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

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

در تمامی افکت ها قطعه کد 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 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

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

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

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