إنشاء تدرج لوني بلغة CSS:
نقوم بإنشاء ملف HTML ونكتب بداخله الكود التالي:
\[code\]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Gradients</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
\[/code\]
ويكون ملف CSS يحوي البرمجة التالية:
\[code\]
.box {
width:300px;
height:300px;
background:-webkit-linear-gradient(top,black 30%,white 70%);
}
\[/code\]
ملاحظات:
- تم إضافة كلمة -webkit- لأن خاصية Gradients غير مدعومة في متصفح Google chrome
- كلمة top تعني ان التدرج اللوني يبدأمن الأعلى وحتى الأسفل
- كلمة black 30% تعني ان اللون الأسود ينتهي بعد 30% من إرتفاع المربع
- كلمة white 70% تعني ان اللون الأبيض ينتهي بعد 70% من إرتفاع المربع
لإنشاء تدرج لوني دائري الشكل نستخدم نفس ملف الـ HTML المذكر في الأعلى
اما ملف الـ CSS فيصبح على الشكل التالي:
\[code\]
.box {
width:300px;
height:300px;
background:-webkit-radial-gradient(circle,black,white);
}
\[/code\]
بإمكاننا إضافة نسب مئوية بعد الألون كما في المثال السابق وذلك لتحديد نهاية كل لون
