تصميم صفحة جميلة بالـCSS3 (مثال حي بالداخل)

[Chakira]

http://www.dzbatna.com/images/icons/icon30.gif طھطµظ…ظٹظ… طµظپط*ط© ط¬ظ…ظٹظ„ط© ط¨ط§ظ„ظ€CSS3 (ظ…ط«ط§ظ„ ط*ظٹ ط¨ط§ظ„ط¯ط§ط®ظ„) (http://www.dzbatna.com/t1893785/)



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

اليوم في درس مفصل جديد من دروسنا المميزة http://www.thedevdot.com/wordpress/wp-includes/images/smilies/icon_smile.gif سنقوم بشرح طريقة تصميم صفحة بسيطة بالCSS3

الصفحة بسيطة جداً تناسب موقع مدونات ، عبارة عن مربعين لعرض المواضيع

مثال حي :

Learning Tutorials By Khalid Magdy - TheDevDot.CoM (http://www.thedevdot.com/tutorials/new_file.html)

لنبدأ في الدرس مفصل :

في البداية سنقوم بوضع الأساس للصفحة وهو النص والعنوان ، سنستخدم h1 للعنوان و p لنص الموضوع .

وسنعطي كلاس box للمربع لنقوم بالتحكم به بالCSS لاحقاً .

سنضع هذا الكود code في منطقة الbody :
رمز Code:
<div class=&quot;box&quot;> <h1>Post Title Here</h1> <br> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class=&quot;box&quot;> <h1>Post Title Here</h1> <br> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>


الآن سنحصل علي نتيجة عادية جداً وشكلاً تعتبر سيئة http://www.thedevdot.com/wordpress/wp-includes/images/smilies/icon_sad.gif

ولكن الآن سنعدل عليها بالCSS

سنبدأ بالمربع الخاص بكل موضوع .

سنضع له العديد من الخواص .

خاصية التدرج اللوني ، والmargin لوضع مسافة بين كل موضوع

وسنستخدم خاصية border-radius لجعل حواف المربع دائرية .

الآن لنضع الشكل الذي سيكون عليه الكود code
[code]


width:600px; height:300px; border:2px solid #C43400; margin-bottom:9px; border-radius:20px; -webkit-border-radius:20px; background:-moz-linear-gradient(top,#C43400,#AF2D01); background:-webkit-gradient(linear,left top,left bottom,from(#C43400),to(#AF2D01));
[[/codee]

١ : العرض ٦٠٠ بكسل


٢:الطول ٣٠٠ بكسل

٣: الحدود حجمها ٢ بكسل ولها لون معين

٤: فقط إستخدمناه لنضع مسافة بين المربع الأول والثاني وسنجعل مقدارها ٩ بكسل

٥: استخدمناها لجعل الحواف دائرية

٦: أيضاً لجعل الحواف دائرية ولكن للمتصفحات التي تستخدم محرك Webkit Engine

٧: التدرج اللوني وحددنا لون البداية ولون النهاية وهذا الكود code فقط يعمل علي المتصفحات التي تستخدم Gecko Engine

٨: التدرج اللوني وهذا الكود code يعمل فقط علي المتصفحات التي تستخدم محرك Webkit Engine

سنحصل علي نتيجة جميلة جداً .

الآن سنضع كود code آخر ، سختار هذا السيليكتور :

.box:hover

وهنا يمكنك التحكم في شكل المربع عند تمرير الماوس عليه .

فقط سنضيف خاصية وهي التدرج اللوني وسنجعله بالعكس

اي سنعكس لون البداية بلون النهاية .

وسيكون الكود code :
background:-moz-linear-gradient(top,#AF2D01,#C43400);
background:-webkit-gradient(linear,left top,left bottom,from(#AF2D01),to(#C43400));

الآن الكود code النهائي للمربع :
رمز Code:


رمز Code:

.box{ width:600px; height:300px; border:2px solid #C43400; margin-bottom:9px; border-radius:20px; -webkit-border-radius:20px; background:-moz-linear-gradient(top,#C43400,#AF2D01); background:-webkit-gradient(linear,left top,left bottom,from(#C43400),to(#AF2D01)); } .box:hover{ background:-moz-linear-gradient(top,#AF2D01,#C43400); background:-webkit-gradient(linear,left top,left bottom,from(#AF2D01),to(#C43400)); }




الآن باقي الأشياء سهلة جداً يمكن لمبتدأ عملها .

سنحدد الp

paragraph

وأهم شئ نقوم بإعطائها خاصية padding-left

لكي نجعل هنالك مسافة بين حدود المربع والفقرة .

وأيضاً نقوم بوضع p:hover

ونجعل لون النص يتغير عندما يمر الماوس عليه عن طريق color:xxxx;

الآن الكود code النهائي للCSS سيكون :
رمز Code:


رمز Code:
.box{ width:600px; height:300px; border:2px solid #C43400; margin-bottom:9px; border-radius:20px; -webkit-border-radius:20px; background:-moz-linear-gradient(top,#C43400,#AF2D01); background:-webkit-gradient(linear,left top,left bottom,from(#C43400),to(#AF2D01)); } .box:hover{ background:-moz-linear-gradient(top,#AF2D01,#C43400); background:-webkit-gradient(linear,left top,left bottom,from(#AF2D01),to(#C43400)); } h1{ font-family:tahoma; color:white; } p{ padding-left:3px; font-family:tahoma; font-size:13px; color:#BCBCBC; } p:hover{ color:white; }



الآن لنجرب الكود code .

سنحصل علي نفس النتيجة بالمثال الحي

أتمني ان يكون اعجبكم الدرس مفصل .

أي سؤال انا موجود ان شاء الله http://www.thedevdot.com/wordpress/wp-includes/images/smilies/icon_smile.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)©