منتديات محمودكو
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


المنتدى متوقف و غير نشط منذ 2011 .. يمكنكم متابعة محمودكو على www.mhmoudko.net
 
شرح عمل تدرج لونى بواسطة css Empty10أحدث الصوردخولتعليماتالتسجيلالملفاتالرئيسيةبوابة المنتدى

شاطر | 
 

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

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

الجنس ذكر مصر
الجدي الماعز عمري عمري : 32
المشاركات المشاركات : 3
هوايتي هوايتي : الشطرنج
مهنتي مهنتي : مبرمج
مزاجي : شرح عمل تدرج لونى بواسطة css Pi-ca-46
نقاط 5129 السٌّمعَة 50

شرح عمل تدرج لونى بواسطة css _
مُساهمةموضوع: شرح عمل تدرج لونى بواسطة css   شرح عمل تدرج لونى بواسطة css Clock1027/11/2010, 00:33

السلام عليكم و رحمة الله و بركاته
اولاً اسف اذا كنت قد وضعته بالقسم الخطأ فانا لا ازال جديد بالمنتدى و لا اعرف بعد ما يجب وضعه بكل قسم
شرح عمل تدرج لونى بواسطة 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 او احدث و تغيير اللون انت تعرف
اقتباس :
}
لانهاء اكواد الحقل
ارجو ان تكونوا قد استفدتم
الشرح من اعداد عمر محسن العفيفى صاحب مجموعة عضويات مجد المصرى
   توقيع العضو : عمر محسن
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.albasha.info
Mhmoudko
الــمــديــر الــعــام
الــمــديــر الــعــام
Mhmoudko

الجنس ذكر مصر
الجوزاء القرد عمري عمري : 32
المشاركات المشاركات : 15918
هوايتي هوايتي : الرسم
مهنتي مهنتي : مبرمج
مزاجي : شرح عمل تدرج لونى بواسطة css Pi-ca-18
نقاط 24476 السٌّمعَة 2352

شرح عمل تدرج لونى بواسطة css _
مُساهمةموضوع: رد: شرح عمل تدرج لونى بواسطة css   شرح عمل تدرج لونى بواسطة css Clock1027/11/2010, 01:38

شكراً على الموضوع أخي الكريم

شرح عمل تدرج لونى بواسطة css 223548
   توقيع العضو : Mhmoudko
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.mhmoudko.net
عمر محسن
عـــضـــو جــديــد
عـــضـــو جــديــد
عمر محسن

الجنس ذكر مصر
الجدي الماعز عمري عمري : 32
المشاركات المشاركات : 3
هوايتي هوايتي : الشطرنج
مهنتي مهنتي : مبرمج
مزاجي : شرح عمل تدرج لونى بواسطة css Pi-ca-46
نقاط 5129 السٌّمعَة 50

شرح عمل تدرج لونى بواسطة css _
مُساهمةموضوع: رد: شرح عمل تدرج لونى بواسطة css   شرح عمل تدرج لونى بواسطة css Clock1027/11/2010, 11:15

العفو اخى الكريم محمودكو و اسف لم انتبه الى انى وضعت الموضوع فى غير القسم المناسب له
   توقيع العضو : عمر محسن
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.albasha.info
{~>ولـــ{نـجـد}ـــد<~}
عـــضـــو مشارك
عـــضـــو مشارك
{~>ولـــ{نـجـد}ـــد<~}

الجنس ذكر إفتراضي
الدلو الخنزير عمري عمري : 29
المشاركات المشاركات : 20
هوايتي هوايتي : الرياضة
مهنتي مهنتي : طيار
مزاجي : شرح عمل تدرج لونى بواسطة css Pi-ca-10
نقاط 5149 السٌّمعَة 50

شرح عمل تدرج لونى بواسطة css _
مُساهمةموضوع: رد: شرح عمل تدرج لونى بواسطة css   شرح عمل تدرج لونى بواسطة css Clock101/12/2010, 13:58

مشكوور يعطيك العاافية بااارك الله فيكـ


شرح عمل تدرج لونى بواسطة css 223548 شرح عمل تدرج لونى بواسطة css 347888
   توقيع العضو : {~>ولـــ{نـجـد}ـــد<~}
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://qmm-alma3ali.yoo7.com
 

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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات محمودكو :: تطوير المواقع ::   :: أكواد CSS-
المشرفينالقوانينالخصوصيةساندناراسلنا
G | Y! | b | Sitemap | XML1 | XML2
Ahlamontada.com

rss