بسم الله و الحمد لله و الصلاة و السلام على رسول الله محمد الأمين. السلام عليكم و رحمة الله. إخواني الكرام أقدم لكم اليوم صناديق CSS للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها ثم بعد ذلك يأتي ليقول "راحت المدونة خرب القالب!" :) و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) . طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...
مثال لصناديق محدبة الزوايا (خصائص css3)
 |
| الصناديق |
مثال لصناديق css عادية
 |
| الصناديق |
كود css
<span style="font-family: inherit;">/*MESSAGE BOX WITH ICONS*/
.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*/
.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;
}
</span>
الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :
<span style="font-family: inherit;"><div class="ok-box">أنا رسالة داخل صندوق أزرق</div>
</span>
و سيبدو كالآتي:
أنا رسالة داخل صندوق أزرق
طبعا ok-box تميز الصندوق الأزرق ذو الأيقونة، إن أردت استعمال صندوق آخر ما عليك سوى استبدالها بأخرى مميزة للصندوق المطلوب. مثلا صندوق الخطأ الأحمر تميزه error-box و صندوق التحذير البرتقالي تميزه warning-box ... باقي التخصيصات توضحها هذه الصورة.
للاستئناس أكثر يمكنكم استعراض الصناديق أو تحميل القن المصدري.
0 التعليقات:
إرسال تعليق