سلام خیلی وقته نبودم

با یه اسلایدشو پس زمینه زیبا در خدمت شمام بسیار زیباا

امیدوارم خوشتون بیاد.

نیاز به توضیح نداره جهت استفاده در قالب خود فایل های استایل را در اچ تی ام ال خود آدرس دهی کنید و سپس کلاس

cb-slideshow

را در فایل خود قرار دهید./

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

۱۲ بهمن ۱۳۹۳

چند وقت پیش مایکروسافت نسخه iOS و android نرم افزار ریموت دسکتاپ خود را عرضه کرد، اگر شما هم علاقه مند به کنترل از راه دور وسایل خانه باشید، ریموت دسکتاپ ها در صدر محبوب ترین نرم افزار هایتان قرار دارد.

از هر جای خانه و با آی دیوایس و یا دیوایس اندرویدی خود به کامپیوترتان وصل شده و از فایل هایی که در حال دانلود است باخبر شوید و یا پروژه های خود را از راه دور و از داخل آی پد و .. انجام دهید.

این اپلیکیشن که  Microsoft Remote Desktop  نام دارد ، ریموت دسکتاپ رسمی است که توسط مایکروسافت منتشر شده و هماهنگی کاملی با سیستم عامل این شرکت دارد. دسترسی سریع به بخش های مختلف سیستم عامل از ویژگی های این اپلیکیشن محسوب می گردد. دسترسی کامل به تمامی بخش های کامپیوتر مقصد و همینطور پخش صدا و تصویر با بالاترین کیفیت و بیشترین کاهش حجم در عین حفظ کیفیت از دیگر ویژگی های این اپلیکیشن محسوب می گردد.  ضمنا این اپلیکیشن رایگان بوده و می توانید از اینجا آن را دانلود کنید.

حالا که به معرفی این نرم افزار پرداختم، لازم دانستم آموزش استفاده از این نرم افزار را برای دوستانی که نتوانستند از این نرم افزار استفاده کنند قرار دهم!

ادامه

۹ آبان ۱۳۹۲

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

قسمت 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%) در فایرفاکس ۲۱ کار نمیکند (افکت شماره ۴).

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

۲۹ خرداد ۱۳۹۲

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

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

ادامه

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