تأسف إدارة المنتدى لغياب تغطيتها المستمرة للمنتدى
الرئيسيةمحمدكــــوالتسجيلدخول

شاطر | 
 

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
محمدكو
صاحـــــــــب الــــــموقـــــــــــع

صاحـــــــــب الــــــموقـــــــــــع
avatar

عضو
معلومات العضو
ذكر عدد المساهمات : 508
عدد المواضيع : 1107
السٌّمعَة : 1
تاريخ التسجيل : 12/09/2010
العمر : 24
الموقع : http://mohamed-ko.yoo7.com
نشــــــاط العـضو :
100 / 100100 / 100


خدمة المنتدى
 :
 :


  
<div style="background-color: #ffffff;"><a href="http://www.rsspump.com/?web_widget/rss_ticker/news_widget" title="News Widget">News Widget</a></div>



مُساهمةموضوع: شرح عمل تدرج لونى بواسطة css   الثلاثاء ديسمبر 21, 2010 11:00 am

[quote="عمر محسن"]السلام عليكم و رحمة الله و بركاته
اولاً اسف اذا كنت قد وضعته بالقسم الخطأ فانا لا ازال جديد بالمنتدى و لا اعرف بعد ما يجب وضعه بكل قسم
شرح عمل تدرج لونى بواسطة 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
و اذا لم يكن لديك و لا تستطيع الحصول على البرنامج فيمكنك استخدام الموقع التالى:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
حيث تقوم بتحديد اللون الذى تريده ثم تحصل على كود اللون بجانب الخانة html code و نضع قبلها العلامة #
اقتباس :
background: -moz-linear-gradient(top, #006699, #993333);
هذا الكود لكى يعمل التدرج على متصفح firefox و لكن بشرط ان يكون اصداره 3.6 و ما فوق و تغيير اللون كما فى الكود السابق
اقتباس :
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#993333');
هذا الكود لكى يعمل التدرج على internet explorer بشرط ان يكون اصداره 6 او احدث و تغيير اللون انت تعرف
اقتباس :
}

ارجو ان تكونوا قد استفدتم









..... ̿̿'̿'̵͇̿̿)(•̪●) مـــــحــــــمـــــدكـــــــــو (•̪●)=ε/̵͇̿̿/'̿'̿̿̿


لست الافضل ولكن لي أسلوبي .. سأظل دائما اتقبل رأي الناقد و الحاسد .. فالأول يصحح مساري والثاني يزيد من اصراري




الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://mohamed-ko.yoo7.com
 
شرح عمل تدرج لونى بواسطة css
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات محمدكو :: محمدكــــ ( تطــــوير المـــــواقــــع )ـــــو ::   :: أكواد CSS-
انتقل الى:  

إشترك مجانا لتصلك أخر المواضيع بضغط هــــنا

منتديات محمدكو

الإعلانات النصية في شبكة محمدكو ...... للحجز اضغط هنا



 اخي زائر اود ان تعرف انجميع الحقوق والطبع والنشر محفوظة © لشبكة ومنتديات محمدكو .:: ومَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ ::.  

  أحلى منتديات لشروحات البرامج و تطويرالمواقع وتقدم العديد من الخدمات الرائعة التي تهم المستخدم | جميع المشاركات لا تعبر بالضرورة عن رأي إدارته بل تمثل وجهة نظر كاتبها