Radial Gradient یا شیب رنگ مدوٌر در CSS3
برای ایجاد شیب رنگ مدوٌر نیز، حداقل باید دو رنگ را مشخص کنید.
مثال:
نحوه استفاده:
background: radial-gradient(startfrom, shape size, start-color, ..., last-color);
startfrom: مرکز شیب رنگ (چهار جهت اصلی/چهار جهت فرعی/مقدار center)
shaple: شکل شیب رنگ (circle/ellipse)
size: اندازه شیب رنگ
بصورت پیشفرض، مرکز شیب رنگ center و شکل آن ellipse و اندازه آن مقدار farthest-side است.
شیب رنگ مدور - درصد پیشرفت رنگ یکسان (مقدار پیشفرض)
مثال (Radial Gradient یا شیب رنگ مدوٌر در CSS3)
یک شیب رنگ مدوٌر با درصد پیشرفت رنگ یکسان
#grad
{
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
خودتان امتحان کنید »{
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
شیب رنگ مدوٌر - درصد پیشرفت رنگ متفاوت
مثال (Radial Gradient یا شیب رنگ مدوٌر در CSS3)
یک شیب رنگ مدوٌر با درصد پیشرفت رنگ متفاوت
#grad
{
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}
خودتان امتحان کنید »{
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}
