استفاده از زاویه
اگر می خواهید کنترل بیشتری روی جهت شیب رنگ داشته باشید، می توانید از درجه بجای چهار جهت اصلی استفاده کنید.
نحوه استفاده:
background: linear-gradient(angle, color-stop1, color-stop2);
angle: زاویه بین خط افقی و شیب رنگ را مشخص می کند و برخلاف عقربه های ساعت می چرخد. بعبارت دیگر، 0 درجه یک شیب رنگ از پایین به بالا ایجاد می کند، درحالی که 90 درجه شیب رنگی از چپ به راست تولید می کند.
مثال زیر، نحوه استفاده از شیب رنگ مورب را نشان می دهد:
مثال (استفاده از زاویه در شیب رنگ)
یک شیب رنگ خطی با یک زاویه مشخص:
#grad
{
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
خودتان امتحان کنید »{
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
