دیدید تو برخی سایتها قسمت های مختلف صفحه پس زمینه متفاوت داره؟ که وقتی صفحه رو اسکرول میکنید، کم کم پس زمینه اون قسمت میره بالا و پس زمینه قسمت بعد میاد، امروز میخوام اینو بهتون آموزش بدم، یک طرح اسکرول با عکس پس زمینه ثابت با استفاده از قالبلیت background-attachment: fixed و یک قسمت ناوبری  ( navigation ) . صفحه همواره به بخش انتخاب شده حرکت خواهد کرد.

قسمت HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
        <a href="#fbsection2">Section 2</a>
        <a href="#fbsection3">Section 3</a>
        <a href="#fbsection4">Section 4</a>
        <a href="#fbsection5">Section 5</a>
    </nav>
    <section id="fbsection1"></section>
    <section id="fbsection2"></section>
    <section id="fbsection3"></section>
    <section id="fbsection4"></section>
    <section id="fbsection5"></section>
</div>

به ادامه مطلب بروید..

ادامه

۳ خرداد ۱۳۹۲

طراح یا برنامه نویس وب سایت هستید؟ سال ها تگ های HTML را با هم ترکیب و ایده های خود را اجرا کرده اید؟ بدون شک یکی از آرزوهای شما در زمینه کدنویسی، حذف دستورات و تگ های تکراری و تولید خودکار آن ها با استانداردهای روز است.

ایمت (Emmet) که در گذشته آن را با نام زن کدینگ (Zen Coding) می شناختیم، یکی از بهترین پلاگین ها برای تولید سریع کدهای HTML است. در صورتیکه با ساختار دستورات HTML و CSS آشنا باشید، می توانید از ایمت به عنوان دستیار شخصی در تولید آن ها استفاده کنید.

نحوه استفاده

روش کار ایمت هیچ شباهتی با ویرایشگرها ندارد. ایمت برای هر تگ یا دستور سی اس اس حروف اختصاری تعریف کرده که با وارد کردن این حروف تگ ها یا دستورات مربوطه تولید می شوند. در بسیاری موارد ایمت هوشمندانه به بررسی موقعیت مکان نما پرداخته و دستورات متناسب با آن تولید می کند.

به ادامه مطلب بروید..

ادامه

۲۱ اردیبهشت ۱۳۹۲

یک اسلایدشو تصویر به صورت نمایش سریع، که وقتی با موس به روش میرویم اجرا میشه و وقتی که موس را برمیداریم متوقف میشه. تصویر فعلی قابل نمایش خواهد ماند.
این فقط یک افکت جالبه که از سایت Contain.r ایده گرفتم. ما از انیمیشن css برای اسلاید شو و کنترل توقف و اجرای آن با استفاده از animation-play-state استفاده می کنیم.
به ادامه مطلب بروید..
ادامه

۳۱ مرداد ۱۳۹۱
بالا