إعـــــــلان

**admin admin** · 16-09-2011, 01:30 AM

إضافة أكواد css + html

[frame="14 90"]

بارك الله فيك أخى ابا الوليد
شرح رائع وماتع ماشاء الله

وبعد إذنك تم فصل شرح البرمجة لمزيد من التفصيل والله المستعان

هذا الشرح سوف نستخدم فيه أمر focus
ومعناه التمركز - مركز النشاط

وهذا يعنى اننا سوف نحدد الإتجاهات ( أعلى - منتصف - أسفل ) من الصورة وهو التصميم الذى يظهر عليه الزرار فى الحالات الثلاثة
1- الوضع الثابت
2- عند مرور الماوس
3- عند الضغط على الزرار

وهناك طريقة أخرى لإستخدام نفس الخلفية والحصول على الزرار ولكن بتحديد المقاسات
( وهذه الطريقة التى تُستخدم غالبا ) لأننا يمكن ان نجمع جميع الأزرار التى فى الموقع فى صورة واحدة. وسوف يتم الشرح لاحقا إن شاء الله

والآن مع الشرح

ننظر الى هذه الصورة جيدا لنفهم فكرة أن التصميم تم تكوينه من ثلاثة أزرار لأننا سوف نستخدم تقنية CSS3 المتقدمة فى إضافة تأثير مرور الماوس

طريقتين لتكويد الزرار إذا كان تصميم الأزرار رأسيا أي زر فوق زر والطريقة الثانية إذا كان التصميم أفقيا زر بجانب زر

نقوم بإنشاء مجلد للصور ونسميه images وهذا هام لأنه مسار الصورة

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

[HTML]
<html>

<head>
مكان أكواد الـ CSS
</head>

<body>
مكان ظهور الأزرار
</body>

</html>

[/HTML]

كود HTML بالنسبة للزرار إذا كان التصميم رأسيا

الكود الخاص بالجسم وهو الذى سيظهر فى الصفحة

[HTML]
<p><a class="button">abc4web</a></p>
[/HTML]

كود CSS للزرار إذا كان التصميم رأسيا
وهذا الكود يتم وضعه بين وسمي
[HTML]
<head></head>
[/HTML]

نضيف هذا الكود

[HTML]
<style type="text/css">
/*<![CDATA[*/
.button {
background: url(images/abc4web_button_H.png) no-repeat 0 0;
/* قمنا هنا بتحديد مسار خلفية الزرار وحددنا أنه لاتكرار فى الصورة افقيا أو راسيا */
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:183px;
height:62px;
/* قمنا هنا بتحديد مقاس الزرار وهذا التحديد ثابت لأن الذى سيتحرك هو الصورة */
}
a.button:hover, a.button:focus {
background-position: center;
/* قمنا هنا بتحديد أسلوب التأثير وهو ( بؤرة التمركز ) لظهور الصورة الثانية عند لمس الزرار وهي منتصف التصميم */
}
a.button:active {
background-position: bottom;
/* أخيرا عند النقر على الزرار قمنا بتحديد الجزء الأسفل من الصور للظهور مكان الزرار */
/* مع مراعاة إذا كان التصميم أفقيا سيكون الإختيار بين ( يمين وشمال ) */
}
a {
outline: none;
/* هنا قمنا بتحديد عدم ظهور أى جزء من الصورة خارج التحديد أى مقاس الزرار */
}
/*]]>*/
</style>
[/HTML]

نلاحظ التعليمات التى تم إضافتها باللغة العربية

وبذلك سيكون الكود الكامل للصفحة كالتالي

كود PHP:


<html>
<head>
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<meta content="ar-sa" http-equiv="Content-Language" />
<title>abc4web CSS Button</title>
 <style type="text/css">
  /*<![CDATA[*/
.button {
background: url(images/abc4web_button_H.png) no-repeat 0 0; 
/* قمنا هنا بتحديد مسار خلفية الزرار وحددنا أنه لاتكرار فى الصورة افقيا أو راسيا  */
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:183px;
height:62px;
/* قمنا هنا بتحديد مقاس الزرار وهذا التحديد ثابت لأن الذى سيتحرك هو الصورة  */
}
a.button:hover, a.button:focus {
background-position: center;
/* قمنا هنا بتحديد أسلوب التأثير وهو ( بؤرة التمركز ) لظهور الصورة الثانية عند لمس الزرار وهي منتصف التصميم  */
}
a.button:active {
background-position: bottom;
/* أخيرا عند النقر على الزرار قمنا بتحديد الجزء الأسفل من الصور للظهور مكان الزرار  */
/* مع مراعاة إذا كان التصميم أفقيا سيكون الإختيار بين ( يمين وشمال )  */
}
a {
outline: none;
/* هنا قمنا بتحديد عدم ظهور أى جزء من الصورة خارج التحديد أى مقاس الزرار */
}
   /*]]>*/
  </style>
</head>

<body bgcolor="#2e3c4c">

     <p><a class="button">abc4web</a></p>
  
</body>
</html>

إذا كان التصميم أفقيا هكذا

نستخدم نفس الكود لكن يتم تغير إتجاه ضهور الصور كما اشرنا فى التعليمات

والتغير فقط فى أكواد CSS

نقوم بتغير إسم صورة الزرار
وكذلك إتجاه ظهور صورة الخلفية عندما يمر الماوس ( يمين )

ولفعل ذلك نبحث عن هذا الكود

[HTML]background-position: bottom;[/HTML]

ونستبدل كلمة bottom والتى معناها أسفل بـ right أى اليمين هكذا

[HTML]background-position: right;[/HTML]

وكذلك نبحث عن إسم الصورة

[HTML]background: url(images/abc4web_button_H.png) no-repeat 0 0; [/HTML]

ونقوم بتغيرها إلى

[HTML]background: url(images/abc4web_button_V.png) no-repeat 0 0; [/HTML]

وسيكون الكود الكامل هكذا

كود PHP:


<html>
<head>
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<meta content="ar-sa" http-equiv="Content-Language" />
<title>abc4web CSS Button</title>
 <style type="text/css">
  /*<![CDATA[*/
.button {
background: url(images/abc4web_button_V.png) no-repeat 0 0; 
/* قمنا هنا بتحديد مسار خلفية الزرار وحددنا أنه لاتكرار فى الصورة افقيا أو راسيا  */
text-indent:-9999px;
/* Hide text "Download" off screen */
display:block;
width:183px;
height:62px;
/* قمنا هنا بتحديد مقاس الزرار وهذا التحديد ثابت لأن الذى سيتحرك هو الصورة  */
}
a.button:hover, a.button:focus {
background-position: center;
/* قمنا هنا بتحديد أسلوب التأثير وهو ( بؤرة التمركز ) لظهور الصورة الثانية عند لمس الزرار وهي منتصف التصميم  */
}
a.button:active {
background-position: right;
/* أخيرا عند النقر على الزرار قمنا بتحديد الجزء الأسفل من الصور للظهور مكان الزرار  */
/* مع مراعاة إذا كان التصميم أفقيا سيكون الإختيار بين ( يمين وشمال )  */
}
a {
outline: none;
/* هنا قمنا بتحديد عدم ظهور أى جزء من الصورة خارج التحديد أى مقاس الزرار */
}
   /*]]>*/
  </style>
</head>

<body bgcolor="#2e3c4c">

     <p><a class="button">abc4web</a></p>
  
</body>

</html>

طبعا هذه أمثلة لطريقة ظهور الزرار فقط أما باقى الأمور ككيفية توسيط الأزرار أو إنشاء قوائم

فالأمر مجاله أقسام برمجة المواقع

أتمنى لكم جميعا الفائدة من هذه المشاركة

ولاتنسونا من صالح دعائكم

:fasel6:
أبوهمام
.

[/frame]

**المياه المظلمة المياه المظلمة** · 17-09-2011, 10:37 AM

باااااااااااااااااااااااا اااااااااارك الله فيك

**أبو الوليد أبو الوليد** · 17-09-2011, 08:30 PM

المشاركة الأصلية بواسطة المياه المظلمة مشاهدة المشاركة

باااااااااااااااااااااااا اااااااااارك الله فيك

وفيك البركة يا طيب

حياك الله

**مغترب مغترب** · 19-09-2011, 02:40 PM

بسم الله الرحمن الرحيم
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

**toufik_alg toufik_alg** · 21-10-2011, 11:53 PM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

**جروح بارده جروح بارده** · 22-10-2011, 07:52 PM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

**أبو صخر أبو صخر** · 28-10-2011, 03:30 PM

موفق بإذن الله ... لك مني أجمل تحية .

**admin admin** · 04-05-2014, 05:30 PM

جزاكم الله خيرا جميعا

نشكر لكم مروركم العطر وتواصلكم الجاد

موفقين بإذن الله

**أبو فارس أبو فارس** · 08-05-2014, 03:13 PM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

**admin admin** · 16-05-2015, 01:43 PM

حياك الله أخى ابا فلرس

أشكر لك مرورك وتواصلك ودعائك

**رشوان رشوان** · 27-03-2016, 12:32 PM

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

**احمد بادي احمد بادي** · 03-01-2017, 11:38 AM

يعطيك الصحة على هذا العمل الرئع خونا أبوالوليد ومشكور

**احمد بادي احمد بادي** · 17-07-2017, 11:49 AM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

إعـــــــلان

تصميم أزرار وقوائم من الفوتوشب إلى البرمجة CSS image rollovers

تصميم أزرار وقوائم من الفوتوشب إلى البرمجة CSS image rollovers

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

تعليق

مواضيع تهمك