شرح عمل وشاح بـ HTML/CSS

الخميس، 4 ديسمبر 2014

الخميس، 4 ديسمبر 2014 تحرير

شرح عمل وشاح بـ HTML/CSS

بسم الله الرحمن الرحيم

والصلاة والسلام على سيدنا محمد وعلى اله وصحابته اجمعين .. وبعد:

مرحبا بكم احبابي في الله في موضوع جديد من مواضيع مدونة ملك العرب .. اليوم نعود اليكم بموضوع جميل بعد غياب طويل عن التدوين ..

موضوع اليوم سنتعرف فيه على طريقة عمل وشاح كما في الصورة اعلاه ..

على بركة الله ننطلق هذا كود html

<!DOCTYPE HTML> <html dir="rtl"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/topic.css"> </head> <body> <div class="content"> <div class="titleblock"> <h2> العنوان</h2> </div> <p> هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء.</p> </div> </body> </html>

وهذا كود css

body{ margin: 200px 40; background-color: rgba(44, 62, 84,0.9); text-align: center; font: 13px tahoma; } .content{ width: 300px; height: 300px; background: #fff; border-radius: 10px; margin: 150px auto; } .content p{ padding: 15px; } .titleblock{ height: 80px; position: relative; } .titleblock h2{ position: absolute; left: -20px; right: -20px; line-height: 80px; color: #fff; background: #3498db; } .titleblock h2:after,.titleblock h2:before{ position: absolute; top: 60px; z-index: -1; display: block; content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; height: 0; width: 0; } .titleblock h2:after{ left: 0; border-right: 20px solid #2980b9; } .titleblock h2:before{ right: 0; border-left: 20px solid #2980b9; }

ختاما .. اتمنى صادقا بعض الدعم احبائي لأستمر بالعطاء

والسلام عليكم

محمد طه

بقلم محمد طه

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

اضغط على السمايل للحصول على الكود: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

اضف كود (html) ركن الاسئلة !