المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : انشاء أزرار تشبه أزرار الفيسبوك


salima
10-30-2013, بتوقيت غرينيتش 09:40 PM
http://www.dzbatna.com/images/icons/icon30.gif ط§ظ†ط´ط§ط، ط£ط²ط±ط§ط± طھط´ط¨ظ‡ ط£ط²ط±ط§ط± ط§ظ„ظپظٹط³ط¨ظˆظƒ (http://www.dzbatna.com/t2098278/)



السلام عليكم و رحمة الله تعالى و بركاته


في هذا الدرس مفصل نحاول محاكاة أزرار الفيسبوك باستخدام CSS

فالنتابع ...


http://img838.imageshack.us/img838/4884/unled1copyh.png


مثال مباشر

أزرار الفيسبوك (http://www.clubneet.com)




http://img838.imageshack.us/img838/4884/unled1copyh.png


التطبيق :


قم بانشاء ملفين الأول 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=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;facebook.css&quot;> </head> <body> <h1>FaceBook style buttons</h1> <div class=&quot;button_outside_border_green&quot;> <div class=&quot;button_inside_border_green&quot;> Sign Up </div> </div> <br /> <div class=&quot;button_outside_border_blue&quot;> <div class=&quot;button_inside_border_blue&quot;> Login </div> </div> </body> </html>

الملف الثاني facebook.css :


رمز Code:
/*Created by Barrett at RRPowered*/ /*File name facebook.css*/ body{ font-family: &quot;lucida grande&quot;, 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:pointer; } .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:pointer; } .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; }
النتيجة :

http://www.rrpowered.com/images/cssfbstylebtn.png

http://img814.imageshack.us/img814/3907/resultj.png


بالتوفيق http://www.dzbatna.com/images/smilies/icon30.gif








ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى