loulou ange
10-30-2013, بتوقيت غرينيتش 09:46 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط·ط±ظٹظ‚ط© ط§ط³طھط®ط¯ط§ظ… ط§ظ„ظ€ hover (http://www.dzbatna.com/t1937612/)
السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم درس مفصل ع السريع
وراح يكون هناك سلسلة من الدروس العشوائية عن الـ css
اليوم راح نشرح طريقة وبسرعة استخدام خاصية الـ hover
طبعا الـ hover تعتبر حركة انتقالية للعنصر عند مرور الماوس عليه
راح اطبق الدرس مفصل على div
الآن نضيف داخل الـ body
رمز Code:
<body> <div id="dzbatna">TRAIDNT</div> </body>
ونبدأ نعطيه خصائص الـ css
وراح تكون الخصائص كالآتي
رمز Code:
#dzbatna{ 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: وهو لون الخط فقط، أي عند وجود تاج الـ <a> داخل الـ ديف، لا يأخذ هذا اللون.
11- transition: وهي خاصية جديدة في css3، وهي عبارة عن حركات، والمستخدمة في التطبيقة للخلفية، ولا أريد أن أتعمق فيها الآن، سأجعل لها درس مفصل خاص وكبير.
12- font: كلمة font لوحدها تأخد أربع خاصيات (عريض أو عادي، حجم الخط، line-height، توع الخط)
الآن هيك اصبح الديف بهذا الشكل
http://upload.dzbatna.net/upfiles/Sb689297.jpg
الآن نريد أن نعمل تأثيرين فقط عند مرور الماوس على الـ ديف
1- تغيير الخلفية، وبما اننا وضعنا transition سيكون تغيير الخلفية بشكل تأثير وبحركة جميلة.
2- تغيير لون الظل.
رمز Code:
#dzbatna:hover{ background:#09C; box-shadow:0 0 10px #06C; }
وبهيك عند مرور الماس تلاحظ التغييرات، وهي الخلفية، والظل.
وهي المثال موجود بالمرفقات، افتحه على جوجل GOOGLE كروم، او فايرفوكس وشوف الحلاوة http://www.dzbatna.com/images/smilies/bleh.gif
واي استفسار انا جاهز،
هذا درس مفصل ع السريع السريع، يعني انتظروني في دروس أفضل وبالصور الأوضح
تحياتي للجميع
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif menu.zip (http://www.traidnt.net/vb/attachments/597477d1314789633-menu.zip) (599 بايت, عدد مرات المشاهدة 209 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم درس مفصل ع السريع
وراح يكون هناك سلسلة من الدروس العشوائية عن الـ css
اليوم راح نشرح طريقة وبسرعة استخدام خاصية الـ hover
طبعا الـ hover تعتبر حركة انتقالية للعنصر عند مرور الماوس عليه
راح اطبق الدرس مفصل على div
الآن نضيف داخل الـ body
رمز Code:
<body> <div id="dzbatna">TRAIDNT</div> </body>
ونبدأ نعطيه خصائص الـ css
وراح تكون الخصائص كالآتي
رمز Code:
#dzbatna{ 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: وهو لون الخط فقط، أي عند وجود تاج الـ <a> داخل الـ ديف، لا يأخذ هذا اللون.
11- transition: وهي خاصية جديدة في css3، وهي عبارة عن حركات، والمستخدمة في التطبيقة للخلفية، ولا أريد أن أتعمق فيها الآن، سأجعل لها درس مفصل خاص وكبير.
12- font: كلمة font لوحدها تأخد أربع خاصيات (عريض أو عادي، حجم الخط، line-height، توع الخط)
الآن هيك اصبح الديف بهذا الشكل
http://upload.dzbatna.net/upfiles/Sb689297.jpg
الآن نريد أن نعمل تأثيرين فقط عند مرور الماوس على الـ ديف
1- تغيير الخلفية، وبما اننا وضعنا transition سيكون تغيير الخلفية بشكل تأثير وبحركة جميلة.
2- تغيير لون الظل.
رمز Code:
#dzbatna:hover{ background:#09C; box-shadow:0 0 10px #06C; }
وبهيك عند مرور الماس تلاحظ التغييرات، وهي الخلفية، والظل.
وهي المثال موجود بالمرفقات، افتحه على جوجل GOOGLE كروم، او فايرفوكس وشوف الحلاوة http://www.dzbatna.com/images/smilies/bleh.gif
واي استفسار انا جاهز،
هذا درس مفصل ع السريع السريع، يعني انتظروني في دروس أفضل وبالصور الأوضح
تحياتي للجميع
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif menu.zip (http://www.traidnt.net/vb/attachments/597477d1314789633-menu.zip) (599 بايت, عدد مرات المشاهدة 209 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
