احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي




 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالمعرضاعمالنا المجانيهالتسجيلدخول

شاطر | 
 

 احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي

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

عدد المساهمات : 225
تاريخ التسجيل : 11/07/2015

مُساهمةموضوع: احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي    الأحد يوليو 19, 2015 12:23 am

الدرس :

اقتباس :
اول شيء نفتح ملف العمل القديم
نروح لدف النافبار
<div class="nav"></div>
نعمل ul بدآخلو ونعمل كلاس نسميه social رح يصبح كدا
<div class="nav">
<ul class="social"></ul>
</div>
بدآخل ul نضيف li اخرى نعمله كلاس اسموآ facebook
كده
<div class="nav">
<ul class="social">
<li class="facebook"></li>
</ul>
</div>
نضيف بدآخل li بتاع الفيسبوك a اخرى و نعملو href ونعمله الرابط الي يوجه اليه
رح يصبح الشكل كده
<div class="nav">
<ul class="social">
<li class="facebook"><a href="#"></a></li>
</ul>
</div>
بجآنب href نعمل tiptitle ونعمله الوصف يعني لو يمر الماوس على الايقونة بيظهرلك الوصف الي كتبتله
ورح يصبح كده
<div class="nav">
<ul class="social">
<li class="facebook"><a href="#" tiptitle="تابعنا على الفيسبوك"></a></li>
</ul>
</div>
كده انتهينا من الفيس بوك الحين نعمل للتويتر
نفس العمل بس نغير اسم كلاس الفيسبوك
يعني كده
<div class="nav">
<ul class="social">
<li class="facebook"><a href="#" tiptitle="تابعنا على الفيسبوك"></a></li>
<li class="twiter"><a href="#" tiptitle="تابعنا على تويتر"></a></li>
</ul>
</div>
بس يكون التويتر ايضا بداخل كلاس سوسيال
الحين نريح هنا
<style type="text/css"></style>
ونعمل بدآخل
.social {
}
ونعملو 
الامر
;background-repeat:no-repeat
يعني عآدي
ونعمله الامر
;list-style:none
ثم نعمله الاتجاه
;:float
لو تبيه يمين تعمله
;float:right
ولو تبيه يسار
;float:left
ونعمله
;:width
في ده الامر نعمل مجموع عرض كامل الايقونات مثلا انا عندي 4 ايقونات ولدي عرض ايقونة واحدة 10 بعمي 40 10+10+10+10
عشان ابسط عليكم
ونعمل
;:height
طبعا الطول يكون طول وآحد ما نتحاج نعمل مجموع
الحين نعمل
.social li {
}
نعمل فيه
;display:inline
يعني في سطر وآحد
نعمل الاتجاه مرة اخرى يعني float
و
;background-repeat:no-repeat
الحين نعمل
.social li a {
}

نعمل فيها
;display:block
و
;:width
يعني عرض ايقونة واحدة بس
و
;:height
الطول
ونعمل
;position: relative
عشان يشتغل التوجيه
ونعمل
;float: right
ده لازم تعملو ضروري عشان مايكون هابط تحت
ثم
;text-decoration:none
و
;:font-size
يعني حجم الخط
كده احسن
;font-size:5px
الحين اخر خطوة
نعمل
.facebook {
}

ونعمل
background-image
ونعمل صورة ايقونة الفيسبوك
ونفس الشيء بالنسبة للتويتر
كده نكون انتهينآ




ملآحظة: يجب في نهآية كل امر وضع رمز {;} كما في الدرس


الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://ps-style.ace.st
الزعيم
الاداره العامه
الاداره العامه
avatar

عدد المساهمات : 83
تاريخ التسجيل : 13/07/2015

مُساهمةموضوع: رد: احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي    الأحد يوليو 19, 2015 1:07 am

شرح جميل ومفيد
جزائك الله كل خيرا اخى
Very Happy
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
شركة بي-اس استايل :: لوازم التصميم :: معرض شروحات التصميم والتكويد-
انتقل الى:  

photoshop