8 افکت CSS3 که کاربرانتان را شگفت زده میکند !

8 افکت CSS3 که کاربرانتان را شگفت زده میکند !
CSS3 افکت های فوق العاده زیبایی برای طراحان وب پدید آورده است، در این مقاله 8 روش استفاده از افکت های CSS3 آموزش داده میشود که به المنت های صفحه ی وبتان روح میبخشد و لبخندی بر لبان کاربرانتان نقش میبندد، همچنین این افکت ها دارای کمترین خطوط کد هستند حجم کمی در بارگزاری دارند.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

در تمامی افکت ها قطعه کد HTML زیر وجود دارد که یک div درون آن وجود دارد :
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>
</body>
</html>
همچنین قطعه کد CSS زیر به div مورد نظر ما خصوصاتی مانند بک گراند و عرض و ارتفاع میدهد و همچنین تمامی افکت ها توسط transition انجام خواهند شد
<style type="text/css">
body > div
{
            width:483px;
            height:298px;
            background:#676470;
            transition:all 0.3s ease;
}
</style>

1 - شفافیت

ظاهر شدن المنت ها زمانی که ماوس کاربر روی آنها میرود یکی از بهترین راه ها برای جلب توجه کاربران میباشد، افکت Fade دو مرحله دارد، ابتدا شفافیت المنت را کم میکنید و سپس با قرار گرفتن ماوس روی آن المنت را ظاهر میکنید، توجه داشته باشید که کلاس fade را به div خود بدهید :
.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

2 - تغییر رنگ

تغییر رنگ همراه انیمیشن المنت ها قبلا بسیار پیچیده بود، اما الان تنها با یک خط کد میتوانید المنت خود را همراه با انیمیشن تغییر رنگ بدهید :

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

3 - بزرگ شدن

قبلا برای بزرگ شدن یک المنت باید به آن ارتفاع و عرض میدادیم اما در حال حاضر تنها با transform میتوانیم این کار را انجام دهیم.
.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

4 - چرخش

transform در css3 قابلیت های بسیاری دارد و یکی از آنها چرخش عناصر هست، به div خود کلاس rotate بدهید و سپس قطعه کد زیر را اضافه کنید
.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

5 - تبدیل مستطیل به دایره

میتوانیم با یک افکت ساده و با استفاده از transition و border radis المنت مستطیلی خود را به دایره تبدیل کنیم
.circle:hover
{
        border-radius:50%;
}

6 - سه بعدی

افکت سه بعدی با دادن سایه به باکس مورد نظر و سپس با استفاده از translate و حرکت دادن باکس در راستای محور x ایجاد میشود
 .threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}

7 - نوسان
با استفاده از keyframes میتوان به عناصر لرزش زیبایی داد، برای تعریف keyframes داریم :

@-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;
}

8 - حاشیه داخلی


یکی از افکت های زیبا دادن حاشیه داخلی به عناصر میباشد که از box shadow امکان پذیر میباشد.
.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}

نتیجه گیری

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

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

نظرات و سوالات کاربران

ارسال پاسخ r_rahide
r_rahide
جمعه ۲۰ تیر ۱۳۹۹ ۰۶:۲۲
عالی بود، ممنون.
ارسال پاسخ امیر آریا
امیر آریا
شنبه ۰۳ خرداد ۱۳۹۹ ۰۷:۵۴
سلام خیلی ممنون عالی بود همگی کار کرد به غیر از آخری .

ببخشید می خواستم بدونم چطوری میشه ارسال دیدگاه برای سایتم بزارم؟

ممنون.
ارسال پاسخ نغمه نجفی
نغمه نجفی
سه شنبه ۲۳ مرداد ۱۳۹۷ ۱۴:۱۷
در پاسخ به دیدگاه مجید ارسال شده در شنبه ۲۰ تیر ۱۳۹۴ ۱۵:۴۸

عالی بود جناب بابازاده... سپاس

خیلی مطالب مفیدی هستند. استفاده کردیم.
قالب سایت کتاب استور هم وردپرس هست.
ketab.store/
ارسال پاسخ مجید
مجید
شنبه ۲۰ تیر ۱۳۹۴ ۱۵:۴۸

عالی بود جناب بابازاده... سپاس