ممکن است شما در نظر داشته باشید که در قابلیت gradients در طراحی سایت خود استفاده نمایید. در این صورت شما می توانید این طیف رنگی را به صورت عکس در پس زمینه صفحه وب سایت خود قرار دهید و یا اینکه از قابلیت های کدهای css بدین منظور استفاده نمایید.
با استفاده از کدهای css دو نوع Gradients را در صفحه ایجاد نمایید.
البته باید در نظر داشته باشید که مرورگرهای مختلف با ورژن های متفاوت می توانند این قابلیت را پشتیبانی نمایند. حال در مثال زیر نحوه استفاده از این کدها را در صفحه سایت به نمایش می گذاریم. در این مثال نحوه نمایش gradient خطی از بالا به پایین را به نمایش گذاشته ایم.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
حال اگر در نظر دارید gradient خطی از چپ به راست را به نمایش بگذارید در قسمت style کدهای زیر را جایگزین می نماییم.
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
می توناید از چندین رنگ نیز در gradientخود استفاده نمایید. در زیر درج این کد را به نمایش گذاشته ایم.
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
همچنین شما می توانید از خاصیت تکرار نیز استفاده نمایید که بدین منظور از کد زیر استفاده می نماییم.
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
برای ایجاد Gradient با خاصیت دایره ای از کد زیر می توانید استفاده نمایید.
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
به آسانی با استفاده از کدهای css و قابلیت gradient در زیبا جلوه نمودن طراحی وب سایت خود موثر عمل نمایید. و با زیباتر شدن صفحات سایت خود موجب جلب نظر کاربران وب سایت خود شوید و در سئو سایت خود نقش مثبتی را ایفا نمایید.