اقدم لكم اليوم درس ع السريع
وراح يكون هناك سلسلة من الدروس العشوائية عن الـ css
اليوم راح نشرح وبسرعة استخدام خاصية الـ hover
طبعا الـ hover تعتبر حركة انتقالية للعنصر عند مرور الماوس عليه
راح اطبق الدرس على div
الآن نضيف داخل الـ body
رمز Code:
TRAIDNT
ونبدأ نعطيه خصائص الـ css
وراح تكون الخصائص كالآتي
رمز Code:
#traidnt{
width:250px;
height:120px;
margin:auto;
background:#666;
-moz-border-radius:0 30px 0 30px;
-webkit-border-radius:0 30px 0 30px;
border-radius:0 30px 0 30px;
box-shadow:0 0 10px #ccc;
text-align:center;
color:#fff;
transition:;
-moz-transition:background linear .3s;
-webkit-transition:background linear .3s;
transition:background linear .3s;
font:bold 30px/120px "Courier New", Courier, monospace;
}
سنقوم بشرح كل واحدة من تلك الخصائص
1- width: وهو عرض للـ div
2- height: ارتفاع
3- margin وهي الحد الخارجي، وعندما نضعها auto تعمل توسيط في حالة لها عرض وارتفاع فقط.
4- background: وهي عبارة عن خلفية، وكلمة background لوحدها تحميل جميع خواص الخلفية، من صورة ولون، ونقاط x,y للصورة، والتمدد (لها درس خاص).
5- -moz-border-radius: هي الحواف الدائرية للـ div، وهذه تعمل على موزيلا، والبيئة الخاصة بها.
6- -webkit-border-radius: ايضا الحواف الدائرية، وتعمل على كروم والبيئة الخاصة بها.
7- border-radius: الحواف الدائرية، للمتصفحات التي لا تنتمي لأي منصة، او بيئة.
8- box-shadow: وهو ظل.
9- text-align: موضع النص، يمين، يسار، وسط.
10- color: وهو لون الخط فقط، أي عند وجود تاج الـ داخل الـ ديف، لا يأخذ هذا اللون.
11- transition: وهي خاصية جديدة في css3، وهي عبارة عن حركات، والمستخدمة في التطبيقة للخلفية، ولا أريد أن أتعمق فيها الآن، سأجعل لها درس خاص وكبير.
12- font: كلمة font لوحدها تأخد أربع خاصيات (عريض أو عادي، حجم الخط، line-height، توع الخط)
الآن هيك اصبح الديف بهذا الشكل
الآن نريد أن نعمل تأثيرين فقط عند مرور الماوس على الـ ديف
1- تغيير الخلفية، وبما اننا وضعنا transition سيكون تغيير الخلفية بشكل تأثير وبحركة جميلة.
2- تغيير لون الظل.
رمز Code:
#traidnt:hover{
background:#09C;
box-shadow:0 0 10px #06C;
}
وبهيك عند مرور الماس تلاحظ التغييرات، وهي الخلفية، والظل.
وهي المثال موجود بالمرفقات، افتحه على جوجل كروم، او فايرفوكس وشوف الحلاوة :bleh:
واي استفسار انا جاهز،
هذا درس ع السريع السريع، يعني انتظروني في دروس أفضل وبالصور الأوضح
تحياتي للجميع
الملفات المرفقة
menu.zip (599 بايت)