گرادینت ها در CSS
گرادینت ها در CSS به ما این امکان را می دهند که انتقال یکدست بین دو یا چند رنگ مشخص شده را نمایش دهیم یا به زبان ساده تر، امکان ایجاد طیف رنگی را به ما می دهند.
گرادینت ها یک نوع تصویر می باشند که از دو یا چند رنگ که به آرامی در هم محو می شوند، تشکیل می شوند.
نکته: در CSS، گرادینت ها رنگ نیستند، به همین دلیل نمی توان از آنها برای مقداردهی به ویژگی هایی مثل color استفاده کرد.
نکته: گرادینت ها می توانند مقداری برای ویژگی هایی مثل background-image و یا ویژگی هایی که تصویر را به عنوان مقدار می پذیرند، باشند.
نکته: می توان با استفاده از ویژگی background-size برای گرادینت ها، اندازه تعریف کرد.
CSS سه نوع گرادینت را تعریف می کند:
- گرادینت خطی (linear gradient): به سمت بالا، پایین، راست، چپ و مورب می رود.
- گرادینت شعاعی (radial gradient): نسبت به مرکز خود تعریف شده است.
- گرادینت مخروطی (conic gradient): حول یک نقطه مرکزی، چرخانده شده است.
گرادینت خطی در CSS
به سمت بالا، پایین، راست، چپ و مورب می رود.
<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad1 {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(green, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html><!DOCTYPE html dir="rtl">
<html>
<head>
<style>
#grad2 {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, green , yellow);
}
</style>
</head>
<body>
<h1>گرادینت خطی-از چپ به راست</h1>
<p>این گرادینت خطی از چپ و از سبز شروع می شود و در راست به زرد تبدیل می شود:</p>
<div id="grad2"></div>
</body>
</html><!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad3 {
height: 200px;
background-color: green; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, green, yellow);
}
</style>
</head>
<body>
<h1>گرادینت خطی-مورب</h1>
<p>این گرادینت خطی از بالا سمت چپ سبز شروع می شود و به زرد (در پایین سمت راست) تبدیل می شود:</p>
<div id="grad3"></div>
</body>
</html>
نکته: برای اطلاعات بیشتر به آموزش گرادینت خطی در CSS مراجعه کنید.
گرادینت شعاعی در CSS
نسبت به مرکز خود تعریف شده است.
<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad1 {
height: 150px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>گرادینت شعاعی-توقف رنگ با فاصله مساوی</h1>
<div id="grad1"></div>
</body>
</html><!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad2 {
height: 150px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
<h1>گرادینت شعاعی-توقف رنگ با فاصله متفاوت</h1>
<div id="grad2"></div>
</body>
</html>نکته: برای اطلاعات بیشتر به آموزش گرادینت شعاعی در CSS مراجعه کنید.
گرادینت مخروطی در CSS
حول یک نقطه مرکزی، چرخانده شده است.
<!DOCTYPE html>
<html dir="rtl"">
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>گرادینت مخروطی-سه رنگ</h1>
<div id="grad1"></div>
</body>
</html><!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad2 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h1>گرادینت مخروطی-پنج رنگ</h1>
<div id="grad2"></div>
</body>
</html>نکته: برای اطلاعات بیشتر به آموزش گرادینت مخروطی در CSS مراجعه کنید.
خلاصه درس
در این درس با گرادینت ها در CSS:
- گرادینت خطی
- گرادینت شعاعی
- گرادینت مخروطی
آشنا شدیم.
