امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن CSS. از این منو خیلی راحت میتونید در طرحهای ریسپانسیو ( واکنشگرا) خود استفاده کنید.

ساختار منو شامل یک لیست نامرتب هست که به هر تعداد که دوست دارید میتونید زیر منو بسازید:

<div id="dl-menu" class="dl-menuwrapper">
    <button>مون</button>
    <ul class="dl-menu">
        <li>
            <a href="#">مردانه</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="#">بازگشت</a></li>
                <li><a href="#">زیر منو ۱</a></li>
                <li><a href="#">زیر منو ۲</a></li>
                <li><a href="#">زیر منو ۳</a></li>
                <li>
                    <a href="#">زیر منو ۴</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="#">بازگشت</a></li>
                        <li><a href="#">زیر منو ۱</a></li>
                        <li><a href="#">زیر منو ۲</a></li>
                        <li><a href="#">زیر منو ۳</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

به ادامه مطلب بروید تا قسمت های بعدی را هم ببینید..

ادامه

۲ خرداد ۱۳۹۲

در آموزش امروز می خواهیم تا افکت Transition را روی کادرهای دایره ای تست و آزمایش کنیم و به شما آموزش بدیم. ما از Border Radius برای ایجاد یک Shape دایره ای استفاده و روی آن کار می کنیم.
حالا چرا دایره ؟ چون عملا بسیاری از طراحان مستطیل را برای کار خودشان انتخاب می کنند . اما شما با یک افکت دایره ای خاص جلوه ای دو چندان به وب سایت خود می دهید. به همین دلیل یک شکل خاص محسوب می شود و ما می رویم تا برای hover روی دایره افکت گذاری کنیم و البته با CSS.
در این آموش ما تمام کدها را بررسی نمی کنیم و برای اجرای این کار مبنا را بر این قرار دادیم که شما به Html و CSS3 تا حدودی تسلط دارید. خب ، پس بیائید شروع کنیم.
به ادامه مطلب بروید..
ادامه

۳۱ مرداد ۱۳۹۱

سلام دوستان، از این به بعد میخوام مطالب آموزشی رو ترجمه کنم و به شما یاد بدم، پس امروز اولین پست را ارسال می کنم، من تو ترجمه زیاد وارد نیستم، ولی سعی کردم خوب و گیرا ترجمه کنم، اگه یکم ترجمه رسمی بود به دل نگیرید، به مرور زمان من سعی می کنم بهتر ترجمه کنم. خوب بریم سراغ آموزش:

امروز میخواهم چگونگی ساخت افکت های سه بعدی هیجان انگیز را با استفاده از css3 و jQuery نشان بدهم. این ایده الهام گرفت شده از افکت حرکتی است که شما می توانید در صفحه Google SketchUp Showcase پیدا کنید. ما یک ساختار با jquery می سازیم که به ما اجازه میدهد ، وقتی به روی عکس برویم ، خم یا تا شود. برای این افکت ما از تبدیل css سه بعدی استفاده میکنیم.
پس این موضوع را ذکر کنم که این افکت فقط در مرورگرهای جدید کاربرد دارد و در اینترنت اکسپلورر ( حتی نسخه ۹ ) اجرا نمی شود.
آموزش در ادامه مطلب..
ادامه

۱ تیر ۱۳۹۱
بالا