8 افکت CSS3 که کاربرانتان را شگفت زده میکند !
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 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;
}
نتیجه گیری
افکت هایی که در بالا معرفی و بکار گرفته شده اند در ساده ترین حالت خود میباشند، سعی کنید از این افکت ها در طرح هایی که میزنید استفاده کنید تا به طراحی خود روح و تحرک زیبایی ببخشید.
محمد بابازاده
محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
ببخشید می خواستم بدونم چطوری میشه ارسال دیدگاه برای سایتم بزارم؟
ممنون.
قالب سایت کتاب استور هم وردپرس هست.
ketab.store/
عالی بود جناب بابازاده... سپاس