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

قسمت 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 انجام بدهیم، فونت به کار رفته در این اسکریپت از فونت آیکون ( Eco Ico توسط Matthew Skiles ساخته شده توسط IcoMoon app ) است.

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

نمونه ای از قسمت HTML

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
    <a href="#" class="hi-icon hi-icon-earth">Partners</a>
    <a href="#" class="hi-icon hi-icon-support">Support</a>
    <a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

یک نمونه از انمیشن چرخشی CSS

.hi-icon-effect-6 .hi-icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    transition: background 0.2s, color 0.2s;   
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: rgba(255,255,255,1);
    color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
    animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

توجه کنید کادر خط تیره در عنصر (border-radius: 50%) در فایرفاکس ۲۱ کار نمیکند (افکت شماره ۴).

امیدوارم که خوشتان آمده باشه و بتونید ازش استفاده لازم رو ببرید!

۲۹ خرداد ۱۳۹۲

احتمالا برای شما هم پیش آمده شارژ سیم کارت اعتباری تان ته کشیده باشد و برای یک تماس ضروری در به در دنبال خرید کارت شارژ باشید. خب، برای حل این مشکل و برقراری تماس در مواقع ضروری تا کنون توسط ایرانسل راه های زیادی همچون خرید شارژ اینترنتی، خرید شارژ از طریق دستگاه های خودپرداز بانکی و دستگاه های POS، ارسال شارژ موبایل به موبایل و یا ارسال پیامک «لطفا با من تماس بگیرید » با کد دستوری *۱۵۰ ارائه شده بود.

اما شاید شما هم مانند من، حتی برای یک بار که شده، با خودتان رویا پردازی کرده اید چقدر خوب می شد در این مواقع و برای تماس های ضروری، مانند فیلم های هالیوودی با فرد مورد نظر تماس بگیرید و پس از هماهنگی اپراتور، هزینه تماس هم بر عهده وی باشد. خب، اکنون برای اولین بار در ایران، سرویس “میزبان تماس” برای مشترکین ایرانسل و البته تنها میان خطوط این اپراتور عرضه شده است.

روابط عمومی ایرانسل می گوید، با عرضه سرویس میزبان تماس، از این پس مشترکین سیم کارتهای اعتباری ایرانسل می‌توانند علاوه بر تماس‌های عادی، پذیرای تماسهایی باشند که تمایل دارند هزینه آنها را بر عهده بگیرند.

برای استفاده از این سرویس، تنها لازم است شماره مشترک ایرانسلی را که می‌خواهید با او تماس بگیرید و البته هزینه مکالمه را او متقبل شود، با پیش‌کد ۷۰۴ شماره گیری کنید. با این کار به جای بوق عادی، صدای اپراتور را می شنوید که می گوید: «به سیستم میزبان تماس ایرانسل خوش آمدید». پس از آن، سیستم با مشترک موردنظر تماس گرفته و در صورت موافقت او برای بر عهده گرفتن هزینه مکالمه از سوی وی، تماس برقرار می‌شود.

جالب اینجا است که مشترک مقصد می تواند با زدن اعداد یک تا چهار تماس شما را با برعهده گرفتن هزینه قبول کند؛ تماس را رد کند؛ شما را به لیست مجاز اضافه کند تا از این پس هزینه تمامی تماس های این چنینی شما را متقبل شود؛ یا اینکه شما را به لیست غیرمجاز اضافه کند تا دیگر هیچ تماسی به این شکل از شما دریافت نکند.

به عنوان مثال برای تماس از طریق سرویس میزبان تماس با مشترکی با شماره ۰۹۳۵۱۲۳۴۵۶۷ و درخواست قبول هزینه مکالمه از سوی وی، کافی است با اضافه کردن پیش‌کد ۷۰۴ به ابتدای آن، با شماره ۷۰۴۰۹۳۵۱۲۳۴۵۶۷ تماس بگیرید.

البته باید خاطر نشان کرد برای استفاده از این سرویس، کاربر مبدا می تواند هم سیم کارت دائمی و هم سیم کارت اعتباری داشته باشد، در حالی که کاربر مقصد حتما باید دارای سیم کارت اعتباری ایرانسل باشند. همچنین برای مدیریت سرویس میزبان تماس ایرانسل بر روی سیم کارت خودتان، می توانید از کد دستوری #۷۰۴* استفاده کنید.

منبع: نارنجی

۵ خرداد ۱۳۹۲

دیدید تو برخی سایتها قسمت های مختلف صفحه پس زمینه متفاوت داره؟ که وقتی صفحه رو اسکرول میکنید، کم کم پس زمینه اون قسمت میره بالا و پس زمینه قسمت بعد میاد، امروز میخوام اینو بهتون آموزش بدم، یک طرح اسکرول با عکس پس زمینه ثابت با استفاده از قالبلیت 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>

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

ادامه

۳ خرداد ۱۳۹۲

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

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

ادامه

۲ خرداد ۱۳۹۲
بالا