Adrem
الإدارة'''''
الجنس : 
دولتي : المغرب
المشآرڪآت : 6210
نقاطي : 23836
سٌّمعَتي : 8
 |  موضوع: شرح عمل تدرج لونى بواسطة css 9/8/2011, 04:03 | |
| شرح عمل تدرج لونى بواسطة css
اولا : ينبغى ان اوضح ان هذا التدرج لا يعمل مع المتصفح 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 او احدث و تغيير اللون انت تعرف - الكود:
-
} لانهاء اكواد الحقل
|
|
