شیب رنگ خطی مورب
برای ایجاد شیب رنگ مورب باید افقی عمودی بودن نقطه شروع را مشخص نمایید.
نحوه استفاده:
background: linear-gradient(startfrom1 startfrom2, color-stop1, color-stop2, ...);
Startfrom1: نقطه شروع اول را تعیین میکند که یکی از مقادیر top و bottom را می پذیرد.
Startfrom2: نقطه شروع دوم را تعیین می کند که یکی از مقادیر left و right را می پذیرد.
در مثال زیر، شیب رنگ، از زاوبه بالا سمت چپ شروع می شود (و به پایین سمت راست ختم می شود) و از قرمز به آبی منتقل می شود:
مثال (شیب رنگ خطی مورب)
شیب رنگ خطی از زاویه بالا سمت چپ شروع می شود (و به پایین سمت راست ختم می شود):
#grad
{
background: -webkit-linear-gradient(left top, red , blue); /* For Safari */
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 */
}
خودتان امتحان کنید »{
background: -webkit-linear-gradient(left top, red , blue); /* For Safari */
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 */
}
