• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
طريقة عمل شريط قائمة او اي نوع ازرار بتأثير popup/CSS

طريقة عمل شريط قائمة او اي نوع ازرار بتأثير popup/CSS

اليوم راح نتعلم كيف نسوي ازرار بتأثير الـpopup بالـCSS
قبل مانبدا..شوف المثال
اضغط هنا

افتح صفحة جديدة في الفوتوشوب
800X300
اختار اداة ال gradient
لون المقدمة #4faeff
لون الخلفية #ffffff

اسحب بإستخدام اداة ال gradient من أعلى الصفحى إلى أسفلها
ضيف فلتر noise

filter>noise>addnoise
الآن ضيف ايقوناتك
انا سأضيف أيقونات الفوتوشوب كمثال

عمل التأثير العادي
اختار أداة ال rectangle marquee
اذهب إلى الليرات..وحدد لير الخلفية
واعمل تحديد صغير على الخلفية, تأكد ان التحديد على نفس خط الايقونات
بالضغط على (CTRL+C) لعمل كوبي

الآن اعمل لير جديد فوق الليرات جميعها والصق التحديد في اللير الجديد
كرر عملية انشاء لير جديد واللصق فوق جميع الازرار

بعد الإنتهاء من هذه العملية

نعمل ليرين 2layers
نختار اداة الـrectangle
في اللير الاول نرسم خط 1 بيكسل باللون الرصاصي
واللير الثاني نرسم خط 1 بيكسل باللون الابيض *الخط الابيض اسفل الخط الرصاصي*
بعد الانتهاء من رسم الخطين
حدد ليراتهم..وادمجهم (CTRL + E)

لاحظ الصورة

بعد دمج الليرات..بالذهاب إلى filter>Blur>motion blur
Angle:0
Distance:40
والآن right click على اللير واختار duplicate
وكرر العملية للأزرار كلها
لتصبح بهذا الشكل

اضافة الظل

بأدة التحدد (الشكل الدائري) اسمها elliptical Marquee tool
نرسم هذا الشكل


ونلونة باللون الاسود ثم تطبيق الفلتر
Filter>>Blur>>Gaussian blur
Radius:3.5 pixel
ونكرر العملية لجميع الازرار
لتصبح بهذا الشكل

الآن بحمدالله انتهينا من التأثير العادي
احفظ الملف pop.psd
نرجع للملف لعمل الهوفر اي عند تمرير الماوس على الزر

حدد ليرات الازرار بالضغط على CTRL
وحددهم بالماوس

وارفعهم للأعلى
ليصبحو بهذا الشكل

احفظ الملف مرة اخرى
Save as
Pop2.psd

عملية البرمجة لهذه الأزرار

نعمل ملفين

واحد نسميه pop.html
الثاني هو ملف الستايل
نسميه styles.css

نبدا كتابة الكود
نفتح ملف الhtml
ونكتب الكود التالي

< !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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="text-align:center;font-size:30px;font-family:impact;">www.m3had.net</p>
<div id="container">
<ul class="nav">
<li id="first"><a href="#">first</a></li>
<li id="second"><a href="#">second</a></li>
<li id="third"><a href="#">third</a></li>
<li id="fourth"><a href="#">fourth</a></li>
</ul>
</div><!--end of container-->
 
</body>
</html>

نرجع لملف التأثير العادي pop.psd
لتقطيعه
حدد الخلفيات اللتي قطعناها
بالضغط على CTRL وحددهم بالماوس

لدمجهم
Layers>>merge layers
او بالضغط على CTRL + E
ونكرر الطريقة للظل

ونكرر الطريقة للأزرار
وللخطوط

لاحظ ترتيب الليرات

الآن حتى نسهل عملية الsprite
حدد لير cover
كما في الصورة

ابقي التحديد الظاهر على كل زر كما هو

انتقل الى لير shadow واضغط ديليت
انتقل الى لير button واضغط delete
انتقل الى لير 2lines اضغط delete
الان امسح لير cover
لافائدة منه بعد الآن

ننتقل لملف pop1.psd
لقصه
نكرر نفس الطرق اللي عملناها في عملية الدمج للملف الاول pop.psd

عمل تقنية الـSprite

اعد فتح ملف pop.psd
اختار اداة الrectangle marquee
واعمل تحديد حول الازرار بهذا الشكل لاتنسى اخفاء الخلفية

ثم edit>>copy merged
الان افتح صفحة جديدة
العرض:626 بيكسل
الارتفاع:180
الان نرجع لملف pop1.psd
ونعيد الخطوات السابقة

ونلصقه بالصفحة الجديدة كما في الصورة

لاحظ..تركنا مساحة في الاعلى..لكي نعطيعهم نفس الارتفاع
(ارتفاع الازرار في الحالة العادية 105 بيكسل..وارتفاعهم في حالة تمرير الماوس عليهم 105 بيكسل)
احفظ الصورة save as
Nav.png
بنفس ملف الاكواد
نرجع لملف pop.psd
نقص الخلفية

Save for web
Bg.png

الآن خلصنا من الفوتوشوب
نروح لملف الستايل
نكتب الكود التالي

body	{
padding:0px;
background: url(bg.png) repeat-x;
margin:80px 0 0 0;
}

هذا شرح كود margin:80px 0 0 0;
Margin:top right bottom left;
يعني بدال ماتكتب
Margin-top:80px;
Margin-right:0;
Margin-bottom:0;
Margin-left:0;
نختصره بالكود التالي
Margin:80px 0 0 0;

نكتب كود الكونتينر

#container	{
margin: auto;
width:	700px;
}

عرضه 700 بيكسل

الآن مرحلة الازرار

.nav	{
width:626px;
height:180px;
margin:0 auto;
list-style:none;
}
.nav li {
 
display: inline;
}
 
.nav li a {
height:105px;
float:left;
text-indent:-9999px;
}

ليش كتبنا text-indent:-9999px;
اول شي علشان نخفي الكتابة احنا نريد الصور بس اللي تظهر من دون الكتابة
طيب كنا نقدر مانكتب شي بملف الhtml
بدال

<li id="first"><a href="#">first</a></li>

مثلا

<li id="first"><a href="#"></a></li>

لا! .. ليش.؟
لان يمكن الصورة تنمسح او ماتظهر في بعض الاحيان..
المستخدم يقدر يشوف الكتابة

نكمل كودنا
نكتب كود اول زر

li#first  a	{
background: url(nav.png) no-repeat 0px 0px;
width: 145px;
}

صورة 20

ليش كتبنا في العرض 145؟
شرحت هذه النقطة من قبل في درس اخر
شاهد الدرس

كود الازرار الباقية

li#second  a	{
background: url(nav.png) no-repeat -145px 0px;
width: 150px;
}
 
li#third  a	{
background: url(nav.png) no-repeat -295px 0px;
width: 150px;
}
li#fourth  a	{
background: url(nav.png) no-repeat -440px 0px;
width: 170px;
}

لاحظ النتيجة

نكتب كود hover وهو في حالة تمرير الماوس
نكرر نفس الكود مع اختلاف بسيط
لاحظ الكود

li#first  a:hover	{
background: url(nav.png) no-repeat 0px bottom;
width: 145px;
}
li#second  a:hover	{
background: url(nav.png) no-repeat -145px bottom;
width: 150px;
}
 
li#third  a:hover	{
background: url(nav.png) no-repeat -295px bottom;
width: 150px;
}
li#fourth  a:hover	{
background: url(nav.png) no-repeat -440px bottom;
width: 170px;
}

وبذلك نكون انتهينا والحمدلله
واللي عندو أي سؤال لايتردد
وسأرد عليه انشاءالله

تحياتي

لتنزيل الملف كامل (الاكواد+ملفات الفوتوشوب+الصور)
اضغط هناا
لتنزيل ملف الايقونات
اضغط هنا

4 آراء على “طريقة عمل شريط قائمة او اي نوع ازرار بتأثير popup/CSS”

  1. علي قال:

    انا مفهمتش حاجة ممكن شرح فيديو لو سمحت

  2. ME قال:

    جميل جداً .. وشكراً

    1. محمد ريان قال:

      العفو 🙂

  3. محمد قال:

    هذا من ذوقك اخ رامي

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *