السلام عليكم
سنتعلم اليوم كيفية عمل قائمة روابط بواسطة css3 من دون استخدام اي صورة تماما.
من اجل درس اليوم يجب ان تستخدم متصفح كوكل كروم او سفاري , اذا لنبدا الدرس:
1- قسم HTML:
نعمل مجلد جديد سمه بأي اسم, سنسميه index كمثال ونعمل داخل المجلد ملفين
ملف بأسم index.html وملف اخر بأسم style.css. ثم نفتح ملف index.html بأي
محرر اكواد ثم نلصق الكود التالي داخله:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>عمل قائمة روابط</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>ان السطر الاول من الكود في الاعلى يعين نوع DOCTYPE والسطر الثاني يعين نوع HTML والبقية معروفة حيث ان قسم الهيد يمثل قسم الراس ويحتوي على عنوان الصفحة ورابط ملف الستايل. ومن ثم الصق الكود التالي في ملف index.html :
<body> <div id="wrapper"> <ul class="nav"> <li><a href="http://almobdaa.com">الرئيسية</a></li> <li><a href="http://almobdaa.com">المدونة</a></li> <li><a href="http://almobdaa.com">من نحن</a></li> <li><a href="http://almobdaa.com">اتصل بنا</a></li> </ul> </div><!-- #wrapper --> </body> </html>ان السطر الاول يمثل الدايف الذي ينصف الموقع في الصفحة ومن ثم دايف القائمة الرئيسية الذي يحتوي الروابط حيث يمكنك ان تغيرها حسب ارادتك.
2- قسم CSS :
الان ننتقل الى قسم css التي تقوم بالعمل كله, فنفتح ملف style.css ونضيف الكود التالي داخله:
body {background:#ededed; direction:rtl;} #wrapper { /*-- الستايل الخاص بتنصيف القائمة--*/ width:500px; margin:0 auto; margin-top:10%; height:400px; } ul.nav { /*--الستايل الخاص بالقائمة--*/ list-style:none; width:500px; height:300px; } ul.nav li { /*--الستايل الخاص بالرابط--*/ float:right; width:100px; height:100px; -webkit-box-shadow: 0 0px 10px #c4c4c4; -webkit-border-radius:350px; border:3px solid #fff; background:rgba(242,135,5,0.8); cursor:pointer; margin:5px; box-shadow: 0 0px 10px #c4c4c4; border-radius:350px; } ul.nav li:hover { -webkit-transform: rotate(-360deg); -webkit-transition: all 2s ease; -webkit-border-radius:5px; } ul.nav li a { display:block; margin-top:35px; text-decoration:none; text-align:center; font-weight:bold; width:100px; height:100px; color:#fff; }ان الوسم body حصل على خاصية اتجاه الكتابة الى اليمين بواسطة direction:rtl والامر background عين لون الخلفية. الوسم
#wrapper يعين الستايل الخاص بتنصيف الموقع حيث نعيين عرض الموقع وارتفاعه وبعده عن اعلى المتصفح.الوسم ul.nav يعين الستايل الخاص بالقائمة حيث يعين عرض وارتفاع القائمة.وصلنا الى الوسم ul.nav li حيث ان اغلب عملنا يحصل هنا فنعيين عرض وارتفاع زر الرابط وخلفيته وظل الزر ونستخدم خاصية -webkit-border-radius لنجعل الزر دائري;ونستخدم خاصية rgba لنجعل خلفية الزر شبه شفافة.ووسم ul.nav li:hover يعين الستايل الخاص بالزر عند مرور الماوس فوقه,هنا نحن نستخدم الامر -webkit-transform لادارة الزر 360 درجة ونستخدم الامر -webkit-transition للتحكم بزمن ونوع الحركةحيث اعددنا الزمن لمدة ثانيتين وقمنا بتعديل حواف الزر الى 5 بكسل. اما الوسم ul.nav li a يعيين شكل الخط وحجمه .انتهى درسنا للان اذا كان لديكم اي استفسار او تعليق سيسرني الاجابة عليه.