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

0 التعليقات: