السلام عليكم و رحمة الله تعالى و بركاته
في هذا الدرس مفصل نحاول محاكاة أزرار الفيسبوك باستخدام CSS
فالنتابع ...
مثال مباشر
أزرار الفيسبوك
التطبيق :
قم بانشاء ملفين الأول facebook.html و الثاني facebook.css
الملف الأول facebook.html :
رمز Code:
<!-- Created by Barrett at RRPowered --> <!-- File name facebook.html --> <html> <head> <title>FaceBook style buttons</title> <link rel="stylesheet" type="text/css" href="facebook.css"> </head> <body> <h1>FaceBook style buttons</h1> <div class="button_outside_border_green"> <div class="button_inside_border_green"> Sign Up </div> </div> <br /> <div class="button_outside_border_blue"> <div class="button_inside_border_blue"> Login </div> </div> </body> </html>
الملف الثاني facebook.css :
رمز Code:
/*Created by Barrett at RRPowered*/ /*File name facebook.css*/ body{ font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-weight:bold; font-size:12px; margin:100px; } /* #68a64c background color #98c286 top border #3b6e22 border #2c5115 border bottom #609946 hover background color */ .button_outside_border_green{ width:100px; border:solid #3b6e22 1px; border-bottom:solid #2c5115 1px; cursor
ointer; } .button_inside_border_green{ padding:6px 0 6px 0; background-color:#68a64c; border-top:solid #98c286 1px; text-align:center; color:#ffffff; } div.button_inside_border_green:active{ background-color:#609946; } /* #5c75a9 background color #8a9cc2 top border #29447e border #1a356e border bottom #4f6aa3 hover background color */ .button_outside_border_blue{ width:100px; border:solid #29447e 1px; border-bottom:solid #1a356e 1px; cursor
ointer; } .button_inside_border_blue{ padding:6px 0 6px 0; background-color:#5c75a9; border-top:solid #8a9cc2 1px; text-align:center; color:#ffffff; } div.button_inside_border_blue:active{ background-color:#4f6aa3; }
النتيجة :
بالتوفيق 
ط§ظ†ط´ط§ط، ط£ط²ط±ط§ط± طھط´ط¨ظ‡ ط£ط²ط±ط§ط± ط§ظ„ظپظٹط³ط¨ظˆظƒ
رد مع اقتباس
