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

من طرف **rare designer** الأربعاء مايو 16, 2012 9:59 am

السلام عليكم و رحمة الله و بركاته
اولاً اسف اذا كنت قد وضعته بالقسم الخطأ فانا لا ازال جديد بالمنتدى و لا اعرف بعد ما يجب وضعه بكل قسم
شرح عمل تدرج لونى بواسطة 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 او احدث و تغيير اللون انت تعرف

اقتباس:

}

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