ایجاد کدهای Gradients در طراحی سایت
ممکن است شما در نظر داشته باشید که در قابلیت gradients در طراحی سایت خود استفاده نمایید. در این صورت شما می توانید این طیف رنگی را به صورت عکس در پس زمینه صفحه وب سایت خود قرار دهید و یا اینکه از قابلیت های کدهای css بدین منظور استفاده نمایید.
با استفاده از کدهای css دو نوع Gradients را در صفحه ایجاد نمایید.
Gradients خطی
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 در زیبا جلوه نمودن طراحی وب سایت خود موثر عمل نمایید. و با زیباتر شدن صفحات سایت خود موجب جلب نظر کاربران وب سایت خود شوید و در سئو سایت خود نقش مثبتی را ایفا نمایید.
منبع: شرکت طراحی سایت
