الاثنين، 1 أكتوبر 2012
صناديق CSS للمدونات و المواقع لعرض النصوص و الرسائل و التنبيهات
صناديق CSS للمدونات و المواقع
إخواني الكرام أقدم لكم اليوم صناديق CSS للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها ثم بعد ذلك يأتي ليقول "راحت المدونة خرب القالب!" :) و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) . طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...
مثال لصناديق محدبة الزوايا (خصائص css3)
مثال لصناديق css عادية
لتستعملها في تدويناتك أو صفحات موقعك يكفي أن تزرع كود css الخاص في قالب موقعك أو مدونتك، مثلا في بلوجر نضع كود css قبل ]]></b:skin> من صفحة تحرير html، و في ووردبريس نزرع الكود نفسه في ملف style الموجود في مجلد القالب المستعمل و نفس الطريقة صالحة لباقي المواقع ...
كود css
/*MESSAGE BOX WITH ICONS Design and Programming : abda3 design*/ .msg-box, .ok-box, .success-box, .warning-box, .error-box{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .msg-box{ border:solid 1px #8e8e04; background:#FFFFCC url(images/msg.png) 97% 6px no-repeat; color:#222222; padding:6px; text-align:center; } .ok-box{ border:solid 1px #27739d; background:#94d5fb url(images/ok.png) 97% 6px no-repeat; color:#222222; padding:6px; text-align:center; } .success-box{ border:solid 1px #90ac13; background:#eef4d3 url(images/success.png) 97% 6px no-repeat; color:#222222; padding:6px; text-align:center; } .warning-box{ border:solid 1px #ba4c0e; background:#ffcaa4 url(images/warning.png) 97% 6px no-repeat; color:#222222; padding:6px; text-align:center; } .error-box{ border:solid 1px #dc2727; background:#f2abab url(images/error.png) 97% 6px no-repeat; color:#222222; padding:6px; text-align:center; } /*MESSAGE CSS BOX Design and Programming : abda3 design*/ .yellow-box{ border:solid 1px #8e8e04; background:#FFFFCC; color:#222222; padding:6px; text-align:center; } .blue-box{ border:solid 1px #27739d; background:#94d5fb; color:#222222; padding:6px; text-align:center; } .green-box{ border:solid 1px #90ac13; background:#eef4d3; color:#222222; padding:6px; text-align:center; } .orange-box{ border:solid 1px #ba4c0e; background:#ffcaa4; color:#222222; padding:6px; text-align:center; } .red-box{ border:solid 1px #dc2727; background:#f2abab; color:#222222; padding:6px; text-align:center; }
طبعا يجب استبدال روابط الصور في الكود بعد رفعها على موقعك و تجدها هنا
أما مستعملي بلوجر فيمكنهم إعادة رفعها أو استعمال هذا الكود المرفوعة صوره مسبقا على بلوجر بدل الأول.
الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :و سيبدو كالآتي:
<div class="ok-box">أنا رسالة داخل صندوق أزرق</div>
أنا رسالة داخل صندوق أزرق
طبعا ok-box تميز الصندوق الأزرق ذو الأيقونة، إن أردت استعمال صندوق آخر ما عليك سوى استبدالها بأخرى مميزة للصندوق المطلوب. مثلا صندوق الخطأ الأحمر تميزه error-box و صندوق التحذير البرتقالي تميزه warning-box ...
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل
التسميات:
اضافات css
بقلم : Abda3Design
لخدمات التصميم والبرمجة
إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية كما تتميز مؤسسة "ابداع ديزاين" . بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة
ضع تعليقك
1 التعليقات:
رائع
_____________________________
http://programing-blog.blogspot.com/2012/09/blog-post.html
إرسال تعليق