8 افکت CSS3 که کاربرانتان را شگفت زده میکند !
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
هاست ایمیل
سرور ایمیل | هاست ایمیل اختصاصی | میل سرور smartermail
سرور ایمیل | هاست ایمیل اختصاصی | میل سرور smartermail
پرینتر استوک
خرید پرینتر استوک و دست دوم با بهترین قیمت
خرید پرینتر استوک و دست دوم با بهترین قیمت
دوره آموزش رویت در مشهد
با یادگیری رویت در آکادمی هنرجویان شهریار به یک طراح معماری در مشهد تبدیل شوید.
با یادگیری رویت در آکادمی هنرجویان شهریار به یک طراح معماری در مشهد تبدیل شوید.
خرید ورق گالوانیزه رنگی
خرید ورق گالوانیزه با بهترین قیمت و کیفیت
خرید ورق گالوانیزه با بهترین قیمت و کیفیت
خرید اکانت چت جی پی تی پلاس
خرید اشتراک و لایسنس اورجینال
خرید اشتراک و لایسنس اورجینال
خرید آی پی ثابت
ارزان ترین و معتبرترین سایت خرید آی پی ثابت
خودتان را اینجا معرفی کنید
ارزان ترین و معتبرترین سایت خرید آی پی ثابت
در تمامی افکت ها قطعه کد 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/
عالی بود جناب بابازاده... سپاس