امروز میخواهم برای شما استایل انیمیشن زیبا و مدرن برای دکمه قرار بدهم، در بعضی از دکمه ها از جاوا برای زیبایی استفاده شده است.

قسمت HTML خیلی ساده است و فقط یک دکمه است که استایلها برایش داده شده:

<button class="btn btn-6 btn-6d">Button</button>

استایل مشترک تمام دکمه ها استایل .btn هست، و برای استایل خاص هر دکمه از شماره خاص استفاده شده است، در استایل برخی از دکمه ها از فونت آیکون استفاده شده است.

برای مثال استایل خاص یک دکمه به صورت زیر است:

/* Button 6d */
.btn-6d {
    border: 2px dashed #226fbe;
}

.btn-6d:hover {
    background: transparent;
    color: #226fbe;
}

در اسلایل .btn و btn-6 هیچ چز مشترکی وجود ندارد.

من این استایل را در نسخه دمو برای شما اینگونه قرار داده ام، شما در صورتی که بخواهید یک دکمه را در قالب خود قرار دهید بهتر از همه استایل ها را با هم در یک استایل قرار دهید.

امیدوارم که لذت برده باشید!

مشاهده دموی اسکریپتدریافت اسکریپت

۸ تیر ۱۳۹۲

امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن 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 -->

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

ادامه

۲ خرداد ۱۳۹۲

تصمیم گرفتم ازین به بعد برای وبلاگها قالب رایگان بسازم و بزام برای دانلود ، امیدوارم از قالب هایی که قرار میدم خوشتون بیاد، اولین قالب را با عنوان قالب شماره ۱ براتون قرار میدم، دانلود کنید ، خوشحال میشم نظر شما رو بدونم..

بلاگفامیهن بلاگوردپرس

۱۲ فروردین ۱۳۹۲

دیروز دوستم بهم پی ام داد، معروف شدی رفت :O

منم پرسیدم که چی شده و این حرفا، فهمیدم که سایت “خبرگزاری مهر” یه مطلب با موضوع “آغاز بکار هجدهمین نمایشگاه الکترونیک و کامپیوتر تهران” ارسال کرده، عکس مطلبشونم، عکس منو دوستمو گذاشتن 😐 حالا تا اینجای کار مشکلی نیستا، خیلیم خوب، ولی موضوع اینه که چرا این عکسو ؟؟؟؟

آخه عکس ضایع تر از این نبود بزارید؟؟ حداقل یه عکس درست و حسابی میزاشتین خوب 😐 آدم امنیت نداره، عزیز من عکس میگیری اطلاع بده تا مثل آدم واستیم هرچقدر دلت میخواد عکس بگیر…

از همینجا به آقای عکاس “آرمین کریمی” خسته نباشید میگم واسه این فتوگرافی زیبا، امیدوارم دیگه ازین سوژه ها تو سایت نزاره و افراد رو سوژه خنده دیگران قرار نده 😐

هیچی دیگه همه دوستان با دیدن این عکس کلی بهم خندیدن، روحشون شاد شد، شما هم اگه تو جریان این عکس نیستید، لینک مطلبو میزارم خودتون برید ببینید 😐

لینک مطلب: http://www.mehrnews.com/fa/newsdetail.aspx?NewsID=1761868

 

۲۶ آذر ۱۳۹۱
بالا