http://www.dzbatna.com/images/icons/icon30.gif طھطµظ…ظٹظ… طµظپط*ط© ط¬ظ…ظٹظ„ط© ط¨ط§ظ„ظ€CSS3 (ظ…ط«ط§ظ„ ط*ظٹ ط¨ط§ظ„ط¯ط§ط®ظ„)
السلام عليكم ورحمة الله وبركاته .اليوم في درس مفصل جديد من دروسنا المميزة http://www.thedevdot.com/wordpress/w...icon_smile.gif سنقوم بشرح طريقة تصميم صفحة بسيطة بالCSS3الصفحة بسيطة جداً تناسب موقع مدونات ، عبارة عن مربعين لعرض المواضيعمثال حي :لنبدأ في الدرس مفصل :في البداية سنقوم بوضع الأساس للصفحة وهو النص والعنوان ، سنستخدم h1 للعنوان و p لنص الموضوع .وسنعطي كلاس box للمربع لنقوم بالتحكم به بالCSS لاحقاً .سنضع هذا الكود code في منطقة الbody :
رمز Code:
Post Title Here
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.
Post Title Here
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.
الآن سنحصل علي نتيجة عادية جداً وشكلاً تعتبر سيئة http://www.thedevdot.com/wordpress/w...s/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)); }
الآن باقي الأشياء سهلة جداً يمكن لمبتدأ عملها .سنحدد الpparagraphوأهم شئ نقوم بإعطائها خاصية 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/w...icon_smile.gif
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
