در جلسه قبل از آموزش CSS با خاصیت Background در CSS3 آشنا شدید. در این بخش قصد داریم به گرادینت در CSS3 یپردازیم.
ویژگی gradient در CSS3 به شما امکان ساخت یک گرادیان از یک رنگ به رنگ دیگر بدون استفاده از تصویر را می دهد. (gradient : شیب)
استفاده از گرادینت در CSS3
خاصیت گرادینت در CSS3 یک راه منعطف برای ساخت آسان دو یا چند رنگ را در اختیار ما قرار می دهد. قبل تر, برای ساخت چنین افکت هایی نیاز بود از تصاویر استفاده کنیم.
با استفاده از گرادینت در CSS3 می توانید زمان بارگذاری صفحه وب را کاهش بدید و همچنین در استفاده از پهنای باند صرفه جویی کنید.
المان با گرادیان با بزرگ شدن در عرض یا ارتفاع, کیفیت آن کاهش پیدا نمی کند. همچنین سرعت رندر آن بسیار سریع تر است چرا که توسط مرورگر ایجاد می شود.
گرادینت در CSS3 در دو استایل linear (خطی) و radial (شعاعی) در دسترس است.
ساخت Linear Gradient در CSS3
برای ساخت گرادیان خطی شما نیاز به حداقل دو رنگ دارید. به هر حا برای ساخت افکت های پیچیده تر می تواند از رنگ های بیشتری استفاده کنید.
می توانید نقطه شروع و یک مسیر یا زاویه را که قصد اعمال افکت gradient را دارید تعریف کنید.
سینتکس ساده ساخت گرادینت خطی بصورت زیر است
1 |
linear-gradient(direction, color-stop1, color-stop2, ...) |
Linear Gradient – بالا به پایین
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(red, yellow); /* For Internet Explorer 10 */ background: -ms-linear-gradient(red, yellow); /* Standard syntax */ background: linear-gradient(red, yellow); } |
Linear Gradient – چپ به راست
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(left, red, yellow); /* For Internet Explorer 10 */ background: -ms-linear-gradient(left, red, yellow); /* Standard syntax */ background: linear-gradient(to right, red, yellow); } |
Linear Gradient – مورب
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(bottom left, red, yellow); /* For Internet Explorer 10 */ background: -ms-linear-gradient(bottom left, red, yellow); /* Standard syntax */ background: linear-gradient(to top right, red, yellow); } |
ست کردن مسیر Linear Gradient با زاویه
اگر می خواهید کنترل بیشتری روی مسیر گرادیان داشته باشید می توانید به جای کلمات کلیدی مشخص شده از زاویه استفاده کنید.
1 |
linear-gradient(angle, color-stop1, color-stop2, ...) |
زاویه ۰deg
از پایین به بالا یک گرادیان را می سازد و در جهت مثبت عقربه های ساعت حرکت می کند.
مثلا زاویه ۹۰deg
یک گرادیان از چپ به راست را ایجاد می کند.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(0deg, red, yellow); /* For Internet Explorer 10 */ background: -ms-linear-gradient(0deg, red, yellow); /* Standard syntax */ background: linear-gradient(90deg, red, yellow); } |
ساخت Linear Gradient با چندین رنگ
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(red, yellow, lime); /* For Internet Explorer 10 */ background: -ms-linear-gradient(red, yellow, lime); /* Standard syntax */ background: linear-gradient(red, yellow, lime); } |
تعیین محل توقف رنگ
این مقدار بصورت درصدی یا یک مقدار مطلق تعیین می شود.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(red, yellow 30%, lime 60%); /* For Internet Explorer 10 */ background: -ms-linear-gradient(red, yellow 30%, lime 60%); /* Standard syntax */ background: linear-gradient(red, yellow 30%, lime 60%); } |
تکرار Linear Gradient
شما می توانید برای تکرار یک گرادیان خطی از تابع repeating-linear-gradient()
بهره ببرید.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: white; /* For Safari 5.1 to 6.0 */ background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%); /* For Internet Explorer 10 */ background: -ms-repeating-linear-gradient(black, white 10%, lime 20%); /* Standard syntax */ background: repeating-linear-gradient(black, white 10%, lime 20%); } |
ساخت Radial Gradient در CSS3
در یک گرادینت شعاعی, رنگ از یک نقطه شروع ظاهر می شود و بصورت نرم بیرون شکل دایره ای یا بیضی شکل و بصورت شعایی پخش می شود.
1 |
radial-gradient(shape size at position, color-stop1, color-stop2, ...); |
آرگومان های تابع radial-gradient()
بصورت زیر است:
position
– نقطه شروع گرادیان را مشخص می کند که می تواند با واحد ها (px, em یا درصد) یا کلمه کلیدی (left, bottom و غیره) تعیین شود.Shape
– مشخص کننده شکل پایانی گرادیان است که می تواند مقادیرcircle
یاellipse
باشد.Size
– مشخص کننده اندازه شکل پایانی گرادینت است. مقدار پیش فرضfarthest-side
است.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-radial-gradient(red, yellow, lime); /* For Internet Explorer 10 */ background: -ms-radial-gradient(red, yellow, lime); /* Standard syntax */ background: radial-gradient(red, yellow, lime); } |
ست کردن shape گرادینت شعاعی
اگر این آرگومان بدون مقدار باشد, مقدار پیش فرض circle خواهد بود.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-radial-gradient(circle, red, yellow, lime); /* For Internet Explorer 10 */ background: -ms-radial-gradient(circle, red, yellow, lime); /* Standard syntax */ background: radial-gradient(circle, red, yellow, lime); } |
ست کردن size گرادینت شعاعی
این آرگومان می توانید مقادیر واحدی یا کلمه کلیدی closest-side
, farthest-side
, closest-corner
, farthest-corner
دریافت کند.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: red; /* For Safari 5.1 to 6.0 */ background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime); /* For Internet Explorer 10 */ background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime); /* Standard syntax */ background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime); } |
تکرار گرادینت شعاعی
شما می توانید گرادینت شعاعی را با تابع repeating-radial-gradient()
تکرار کنید.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: white; /* For Safari 5.1 to 6.0 */ background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%); /* For Internet Explorer 10 */ background: -ms-repeating-radial-gradient(black, white 10%, lime 20%); /* Standard syntax */ background: repeating-radial-gradient(black, white 10%, lime 20%); } |
شفافیت و گرادینت
گرادینت در CSS3 از شفافیت یا transparency نیز پیشتیبانی می کند. شما می توانید از این برای ساخت یک افکت fade روی تصاویر پس زمینه استفاده کنید.
1 2 3 4 5 6 7 8 9 10 |
.gradient { /* Fallback for browsers that don't support gradients */ background: url("images/sky.jpg"); /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg"); /* For Internet Explorer 10 */ background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg"); /* Standard syntax */ background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg"); } |
امیدوارم در این بخش آموزش CSS, از گرادینت در CSS3 نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.