CSS3 Transitions جذاب وب سایت



CSS3 Transitions جذاب وب سایت

css3 transitions جذاب که کاربران را شگفت زده می کند!

در این مقاله آموزشی طراحی وب قصد داریم در مورد یکی بخش های طراحی وب سایت و طراحی UI/UX که CSS3  می باشد صحبت کنیم.Css3  قابلیت های بی شماری را برای طراحان وب سایت UI/UX فراهم کرده که خوشبختانه پیاده سازی آنها هم بسیار ساده است.

تنها با استفاده از چند خط کدنویسی می توانید افکت ها و ویژگی transitions هایی بسازید که کاربران را شگفت زده کند و علاقه و نرخ بازگشت آنها به سایت شما کاربران را افزایش دهد. علاوه بر اینها این افکت ها برای دستگاه های مختلف هم بهینه سازی شده اند و همه برای استفاده شما آماده اند.

در این مقاله به معرفی تعدادی افکت ساده و جذاب و پرکاربرد می پردازیم که می تواند پویایی و زندگی را به UI/UX شما اضافه کند و لبخند را به لب کاربران! همه این افکت ها (به جز یکی) به وسیله ویژگی (property) به نامtransition  کنترل می شوند. برای نمایش این افکت ، یک div را در یک صفحه HTML ایجاد می کنیم:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

بعد از این مرحله شروع به تنظیم کردن طول و عرض و رنگ پس زمینه Background Color و هم چنین تعریف ویژگی transition می کنیم: 

<style type="text/css">
body > div
{
            width:483px;
            height:298px;
            background:#676470;
            transition:all 0.3s ease;
}
</style>

 

ویژگی transition سه مقدار(value) مختلف می پذیرد:

 اولین مقدار مشخص کننده نوع properties این ترنزیشن است (در مثال بالا با استفاده از مقدار all ما از همه آنها استفاده کردیم)، مقدار بعدی سرعت ترنزیشن (در مثال بالا 0.3 ثانیه) می باشد و مقدار سومی برای تغییر دادن acceleration (شتاب) ترنزیشن است که چگونه محاسبه شود که ما فعلا آن را خالی می گذاریم و مقدار نمی دهیم تا همان مقادیر پیش فرض قرار بگیرد.

حالا تنها کاری که نیاز داریم این است که مقدار properties را تغییر بدهیم تا انیمیشن و ترنزیشن های ما شروع به کار کنند. 

Fade in (محو شدن

افکت fade in یکی از موارد پر طرفدار در میان طرحان وب سایت است. این افکت یک راه عالی برای جلب کردن توجه کاربران به یک  call to action یا اعلام سراسری در وب است.

افکت  های fade in در دو مرحله کدنویسی می شوند: اول شما باید وضعیت اولیه (initial state) را تعیین کنید و در مرحله بعد حالت بعدی (حالت تغییر داده شده) را تعیین کنید. برای مثال برای Hover (قرار گرفتن ماوس روی آبجکت) کد نویسی زیر را انجام می دهیم:

(حتما  نام کلاس div خود را روی مقدار به نام "fade" قرار دهید تا افکت کار کند)

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

Change Color (تغییر رنگ)

انیمیت کردن (Animating) حالت تغییر رنگ بسیار پیچیده بود مخصوصا با محاسبات ریاضی که برای محاسبه  باید مقادیر RGB و ترکیب آنها باهم استفاده کرد. که در اینجا تنها کاری که نیاز است انجام دهیم قرار دادن کلاسی برای div به مقدار “color” و تعیین کردن رنگ دلخواهمان است:

.color:hover
{
        background:#53a7ea;
}

Grow & Shrink (کوچک و بزرگ شدن)

برای افزایش اندازه یک آبجکت باید از طول و عرض یا  (padding) آبجکت استفاده می کردید، اما حالا با استفاده از CSS3 و  ویژگی transform می توانیم یک آبجکت را بزرگتر کنیم.

کلاس div را روی مقدار “grow” قرار بدهید و کد زیر را در style آن قرار دهید:

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

کوچک کردن یک آبجکت هم به سادگی بزرگ کردن است. برای افزایش اندازه یک آبجکت ما مقداری بزرگتر از "1" قرار دادیم و حالا برای کوچکتر کردن آبجکت مقداری کوچکتر از "1" باید قرار بدهیم:

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

Rotate element (چرخاندن آبجکت)

ویژگی Transformer ها در CSS3 کاربردهای مختلفی دارند که یکی از مهم ترین کاربردهای آن برای چرخاندن آبجکت ها می باشد. به div موردنظر کلاس مقدار ‘rotate” دهید و کدهای زیر را به CSS اضافه کنید:

.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

Square to circle (تبدیل مربع به دایره)

یکی از محبوب ترین ویژگی ترنزیشن ها در حال حاضر تبدیل مربع به دایره و بالعکس است.  پیاده سازی این افکت ساده  و تنها نیاز به قابلیت ترنزیشن و ویژگی  border-radius است.

کلاس div  را مقدار"circle" بگذارید و کد زیر را به CSS اضافه کنید:

.circle:hover
{
        border-radius:50%;
}

3D shadow (سایه سه بعدی)

سایه های سه بعدی (D shadow3) تا مدتی مورد بحث و انتقاد قرار داشتند زیرا گفته می شد با طراحی جدید فلت (flat) سازگار نیستند که البته خیلی حرف درستی نیست، این افکت به خوبی می تواند یک فیدبک و بازخورد مناسب به تعاملات کاربر (interactions) بدهد و به خوبی نیز با ساختارهای فلت و یا سه بعدی مجازی کار کند.

برای افکت دادن به این صورت ساخته می شود که یک آبجکت box shadow ساخته و آبجکت را روی محور x  جا به جا می کنیم (به وسیله ویژگی های transform و translate) که باعث می شود اینطور به نظر بیاید که انگار آبجکت در حال بیرون آمدن از صفحه نمایش است و حالت سه بعدی بگیرد.

کلاسی با مقدار “threed” را به div بدهید و کدهای زیر را در CSS  اضافه کنید:

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}

Swing (تاب خوردن)

همه ویژگی ترنزیشن ها با قابلیتtransition  ساخته نمی شوند. ما با استفاده از امکان @keyframes هم می توانیم انیمیشن های پیچیده ای بسازیم.

در این مثال اول از همه یک CSS animation  در فایل Style می سازیم. به دلیل مشکلات پیاده سازی و پشتیبانی انواع مرورگر ما نیاز داریم که از مقدار @-webkit-keyframes و همچنین مقدار @keyfreames استفاده کنیم.

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

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

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

Inset border (حاشیه های درونی)

در حال حاضر یکی از Style های پرطرفدار برای طراحی  دکمه ها  استایل ghost button است که به صورت یک دکمه بدون پس زمینه Background و حاشیه سنگین  است.

 البته می توان حاشیه (border) را هم به سادگی به آبجکت اضافه کرد ولی این کار باعث جا به جایی موقعیت آبجکت می شود. برای حل این مشکل قبلا از ویژگی  box sizing استفاده می شد که حالا یک راه ساده تر استفاده از ویژگی ترنزیشن در این border است که به وسیله Inset box shadow انجام می شود.

برای div کلاس “border” قرار دهید و کد زیر را به Style اضافه کنید:

.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}

جهت ثبت پیام باید در سایت عضو شوید و یا وارد سایت شده باشید .
ورود به حساب کاربری / ایجاد حساب کاربری
کار با Built-in Functions در پایتون (2)

کار با Built-in Functions در پایتون (2)

در این مقاله زمیوسی در بخش آموزش قصد داریم در مورد کار با Built-in Functions در پایتون صحبت کنیم. شما قبلاً با محبوب ترین تابع در پایتون یعنی ()print آشنا شدید.

Cheat Sheet در پایتون - مبانی پایتون (1)

Cheat Sheet در پایتون - مبانی پایتون (1)

پایتون 3 یک زبان برنامه نویسی واقعا همه کاره است که دوستش دارم هم برای توسط توسعه دهندگان وب web developers، دانشمندان داده data scientists و ...

10 وب سایت برای حل تمام سوالات مربوط به برنامه نویسی

10 وب سایت برای حل تمام سوالات مربوط به برنامه نویسی

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

APEX_ZIP : مدیریت فایل های Zip از PL/SQL

APEX_ZIP : مدیریت فایل های Zip از PL/SQL

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