منتديات احلى عالم جدعان - افلام عربي - افلام اجنبي - اغاني - كليبات - برامج - العاب
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي
اختصار المنتدى في محركات بحث هو جدعان

منتديات احلى عالم جدعان - افلام عربي - افلام اجنبي - اغاني - كليبات - برامج - العاب

افلام عربى، افلام اجنبى ، منتديات احلى عالم جدعان ، اغانى ، العاب ، برامج ، موبايل ، تصميم ، نوكيا ، فلاش ، كرتون ، اشهار ، mp3 ، حصريا ، نوكيا ، ثيمات ، صور
 
الرئيسيةالرئيسية  بحـثبحـث  التسجيلالتسجيل  دخولدخول  الدردشة  
إعلان هام
.........................
تم إنشاء منتدى من شركه
vBulletin أفضل وأسرع وتوجد ميزات اكثر

يمكنكم زيارتنا والتسجيل من هذا الرابط


http://www.a3g1.net/vb/

تحياتي لجميع

 | 

 

 إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover

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

 ~|| معلومات العضو ||~
time one

«©» عضو مجتهد «©»«©» عضو مجتهد «©»

avatar

~|| بيانات العضو ||~
عدد مشآرڪآتي عدد مشآرڪآتي : 1668
عًٍـمـًرٌٍيَـے• : 30
جْــنـسَے• : ذكر
وَظْـيْفَـتْے• :
هـِـوْاًيُتـًے• :
نْـقٌٍـآطُْـيَـے• : 4849
السٌّمعَة : 20
الانتساب : 01/09/2008
الأوسمة :

معاينة صفحة البيانات الشخصي للعضو


مركز تحميل جدعان ..:: مركز جدعان تحميل الملف - مركز جدعان تحميل الصور ::..
التوقيت
Gid3an - TwitterGid3an - Rss  Feed
مُساهمةموضوع: إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover    الإثنين أبريل 04, 2011 4:38 pm 

بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله وعلى آله
وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته

طال إنتظار بعض
الأخوة لشرح طالما سألوا عنه وكنت قد وعدت بإنجازه ووضعت بعض تطبيقات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]المواقع
التى سوف نشرحها فى هذا القسم إن شاء الله تعالى
ولكن وجدت نفسي يجب أن أبدا من
الصفر بل ربما قبل الصفر بقليل إذا اردت أن أشرح جزء بسيط من لغة التصميم العالمي
الجديدة CSS وكذلك CSS3
فقلت اضع مثالا وأحاول جاهدا شرحه عسى أن يستفيد الأخوة
جميعا من هذا الشرح وستكون أول خطوة عملية لتطبيقات تصاميم المواقع .

مثال للتصميم



لمشاهدة مثال للتطبيق بلغة CSS

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
نبدا الشرح إن شاء الله تعالى



سنتعلم
اليوم كيفية [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]زرار لصفة
الويب يعمل بتأثير الهوفر ( اللمس ) ليتغير شكله [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]CSS الرائعة
، كما رايناها فى التطبيق السابق .
وقبل البدء فى الشرح أحب أن أذكر هنا أنه
توجد أكثر من طريقة للوصول الى هذا التأثير وسوف اشرح إثنين منها فقط للتعليم
والتدريب .
وأتمنى من الأخوة عدم وضع أى سؤال إلا بعد التطبيق وأكرر التطبيق
على الدرس فقط ( وسوف لاأجيب على أى سؤال خارج ذلك )

1- نقوم بفتح عمل جديد
بهذه القياسات ( 200 * 75 ) والخلفية بيضاء ونحدد إسم العمل
abc4web_b01



ثم
نقوم بملئ هذه الطبقة بأى مثلا ( 0B415F# ) أتمنى أن نستخدم
ألوان مختلفة فى التطبيقات عن الشرح !



وسنحصل
على هذا الشكل ماتستعجل أنا ماشي معاكم تاته خالص



2-
نقوم بإنشاء طبقة ثانية باللون الأبيض مثلا ونسميها الزرار
وبإستخدام أداة Rounded Rectangle Tool نرسم شكل
الزرار بحوافه الدائرية وممكن جعل الدوران Radius = 10 px ،
ويكون هذا المستطيل مطابق لمساحة العمل تقريبا ، أى بدون ترك فراغات، نقف على هذه
الطبقة وبيمين الماوس نختار Rasterize Layer .



3-
مازلنا على طبقة الزرار ، بيمين الماوس نختار من القائمة Blending Options ونضيف
هذه التأثيرات :

Gradient Overlay





Bevel and Emboss



وسوف
نحصل على الشكل التالي :



4-
مازلنا على طبقة الزار نضغط بيمين الماوس ونختار من القائمة
Duplicate Layer للحصوص على طبقة مشابهة ونختار إسما آخر
لها مثلا ( تأثير اللمس )
وسوف يكون صندوق الطبقات لدينا
بهذا الشكل



نقف
على هذه الطبقة وبيمين الماوس نختار من القائمة Blending
Options


ثم نقوم بتغير واحد فقط فى Bevel and Emboss
وهو إختيار البروز لأسفل



لنحصل
على هذا الشكل:



بذلك
نكون قد إنتهينا من تطبيق التأثيرات على الزرار وحصلنا على طبقتين للازرار ( زر
بارز لأعلى واخر لأسفل )

===========/ مرحلة الكتابة وإضافة
الأيقونات \==========


5- الآن يمكننا إضافة النص الذى نريده وربما
أيقونة للشكل الجمالي ( وهذا إختيارى ) لذلك لاأرى أنها تحتاج شرح .......



===========/ مرحلة حفظ الزرار \==========

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



ثم
نقوم بحفظ الزرار الأول ونعطيه إسم abc4web_b01
الإسم مهم لأكواد CSS

7- نقوم بإظهار طبقة تأثير
اللمس وإخفاء طبقة الزرار بنفس الطريقة السابقة



ثم
نحفظ العمل بصيغة png ونعطيه إسم abc4web_b02

وسوف نحصل على هذه
الأزرار




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

لنحصل على أربعة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]= 8
صور

abc4web_a02 ----- abc4web_a01
abc4web_b02 -----
abc4web_b01
abc4web_c02 ----- abc4web_c01
abc4web_d02 -----
abc4web_d01




==========/ مرحلة إستخدام الأزرار وإضافة تأثير
هوفر [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]CSS
\==========



والآن مع شرح إضافة التأثير على الزرار بأكواد
CSS

أولا نراجع النتيجة التى حصلنا عليها وهي :


1- صورة الزرار بإسم
= abc4web_b01
2- صورة التأثيـر بإسم = abc4web_b02

نقوم بإنشاء مجلد
لنضع فيه الصور مثلا نسميه images ونضع فيه الصور وهذا هام
جدا للحصول الى الصورة وسيكون المسار الخاص بالصور كالتالي :

صورة الزرار
:
images/abc4web_b01.png

صورة التأثير
:
images/abc4web_b02.png

الآن نفتح برنامج فرونت بيج أو أى محرر صفحات
نستخدمه ونفتح صفحة جديدة وتلقائيا سنجد الأكواد التالية :
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

 ~|| معلومات العضو ||~
غضبان

«©» عضو جديد «©»
avatar

~|| بيانات العضو ||~
عدد مشآرڪآتي عدد مشآرڪآتي : 27
عًٍـمـًرٌٍيَـے• : 39
جْــنـسَے• : ذكر
وَظْـيْفَـتْے• : غير معروف
هـِـوْاًيُتـًے• : غير معروف
نْـقٌٍـآطُْـيَـے• : 2468
السٌّمعَة : 0
الانتساب : 10/04/2011

معاينة صفحة البيانات الشخصي للعضو


مركز تحميل جدعان ..:: مركز جدعان تحميل الملف - مركز جدعان تحميل الصور ::..
التوقيت
Gid3an - TwitterGid3an - Rss  Feed
مُساهمةموضوع: رد: إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover    الخميس أبريل 21, 2011 6:58 pm 

يسلمووو
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

 ~|| معلومات العضو ||~
time one

«©» عضو مجتهد «©»«©» عضو مجتهد «©»

avatar

~|| بيانات العضو ||~
عدد مشآرڪآتي عدد مشآرڪآتي : 1668
عًٍـمـًرٌٍيَـے• : 30
جْــنـسَے• : ذكر
وَظْـيْفَـتْے• :
هـِـوْاًيُتـًے• :
نْـقٌٍـآطُْـيَـے• : 4849
السٌّمعَة : 20
الانتساب : 01/09/2008
الأوسمة :

معاينة صفحة البيانات الشخصي للعضو


مركز تحميل جدعان ..:: مركز جدعان تحميل الملف - مركز جدعان تحميل الصور ::..
التوقيت
Gid3an - TwitterGid3an - Rss  Feed
مُساهمةموضوع: رد: إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover    السبت مايو 28, 2011 12:40 am 

مشكورين .......
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
 

إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover

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

  

 

Gid3an Tags الكلمات الدلالية
إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover حصريا , إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover بانفراد , إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover منتديات جدعان , إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover حمل , إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover download , إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover تحميل حصري
Gid3an Link رابط الموضوع
Gid3an bbcode BBCode
Gid3an HTML HTML كود الموضوع
صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احلى عالم جدعان - افلام عربي - افلام اجنبي - اغاني - كليبات - برامج - العاب :: قسم تطوير المواقع والمنتديات | The development of sites and forums :: منتدى تطوير منتديات - تقنيات خاصة - برمجة :: منتدى التقنيات العامة باحلى منتدى-
الإعلانات النصية
منتديات ابداع فتى منتدى الحب كول منتديات نديم الحب شبكة بلاك هكرز العربيه
منتديات شط العرب منتدى أشهار Eshary.com
 •!¦[.. نغم الحياه .. ]¦!• منتديات مايكل جاكسون العربيه اضف موقعك اضف موقعك اضف موقعك اضف موقعك
اضف موقعك اضف موقعك اضف موقعك اضف موقعك اضف موقعك اضف موقعك
اضف موقعك اضف موقعك اضف موقعك اضف موقعك اضف موقعك اضف موقعك

Loading...

Powered by ahlamontada® Version phpbb2
Copyright ©2009 - 2010, Jelsoft Enterprises Ltd.
تصميم :
EH@B
~ |[ .. جميع الحقوق محفوظة لشبكة منتديات أحلى عالم جدعان .. ]| ~

Security by i.s.s.w

منتديات احلى عالم جدعان - افلام عربي - افلام اجنبي - اغاني - كليبات - برامج - العاب

 © phpBB | منتدى مجاني | منتدى مجاني للدعم و المساعدة | إتصل بنا | التبليغ عن محتوى مخالف | انشئ مدونتك

ضغط هنا لدخول رابط الجديد | ضغط هنا ل دخول صفحة المنتدى ع فيس بوك | ضغط هنا لدخول ع توتير خاص بالمنتدى