شرح عمل تدرج لونى بواسطة css

السلام عليكم و رحمة الله و بركاته

شرح عمل تدرج لونى بواسطة css3
اولاً ينبغى ان اوضح ان هذا التدرج لا يعمل مع المتصفح opera لانه لا يدعم هذه التقنية فى css3
ثانياً الشرح
1- نبدأ بعمل صفحة html باى محرر html و اذا لم يكن لديك فيمكنك استخدام notepad الذى ياتى مع الويندوز و نضع فيها الكود التالى:

اقتباس:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
#nav{
height: 300px;
width:295px;
background-color: #006699;
background: -webkit-gradient(linear, left top, left bottom, from(#006699), to(#993333));
background: -moz-linear-gradient(top, #006699, #993333);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#993333');
}
</style>
<title>تدرج لونى ب css3</title>
</head>

<body>
<div class=nav>

</div>

</body>

</html>

شرح الاكواد:

اقتباس:

nav هو اسم الحقل الذى نكتب فيه و نجعل خلفيته بتدرج لونى و يمكنك تغييره الى ما تريده بشرط تغييره الى نفس الشئ فى كود css

اقتباس:

#nav{

هو
اسم الحقل و لكن ك css و يجب تواجده لكى يعمل الكود و عند تغيير nav الى
اى شئ اخر يجب تغييره الى نفس الشئ هنا ايضاً دون تغيير ما يحيط بكلمة nav

اقتباس:

height: 300px;
width:295px;

هنا قمنا بتحديد ارتفاع الجدول height و عرضه width و يمكنكم تغييره الى اى قيمة تريدونها بشرط تغيير الرقم فقط

اقتباس:

background-color: #006699;

هذا الكود حتى تظهر الخلفية بلون فى متصفح opera و لكن لن يكون متدرجاً فى opera فقط

اقتباس:

background: -webkit-gradient(linear, left top, left bottom, from(#006699), to(#993333));

هذا الكود لكى يعمل التدرج اللونى للخلفية على المتصفحات التى تستخدم تقنية webkit مثل safari و google chrome
و لتغيير اللون الذى يبدأ به التدرج من الاعلى تقوم بتغيير الكود #006699 الى اى كود لون تريده
اما نهاية التدرج التى بالاسفل فتقوم بتغيير الكود #993333 الى اى كود لون تريده
و لمعرفة اكواد الالوان يمكنكم استخددم اى برنامج محرر html مثل frontpage او expression web
و اذا لم يكن لديك و لا تستطيع الحصول على البرنامج فيمكنك استخدام الموقع التالى:
http://www.allprofitallfree.com/color-wheel2.html
حيث تقوم بتحديد اللون الذى تريده ثم تحصل على كود اللون بجانب الخانة html code و نضع قبلها العلامة #

اقتباس:

background: -moz-linear-gradient(top, #006699, #993333);

هذا الكود لكى يعمل التدرج على متصفح firefox و لكن بشرط ان يكون اصداره 3.6 و ما فوق و تغيير اللون كما فى الكود السابق

اقتباس:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#993333');

هذا الكود لكى يعمل التدرج على internet explorer بشرط ان يكون اصداره 6 او احدث و تغيير اللون انت تعرف

اقتباس:

}

لانهاء اكواد الحقل
ارجو ان تكونوا قد استفدتم