صناديق CSS للمدونات و المواقع

بواسطة نبيل يوم الخميس، 9 فبراير 2012 القسم : 0 التعليقات
بسم الله الرحمان الرحيم و السلام عليكم و رحمة الله.
إخواني الكرام أقدم لكم فكرة اليوم : صناديق CSS - للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) .  طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...



لتستعملها في تدويناتك أو صفحات موقعك يكفي أن تزرع كود css الخاص في قالب موقعك أو مدونتك، مثلا في بلوجر نضع كود css قبل ]]></b:skin> من صفحة تحرير html، و في ووردبريس نزرع الكود نفسه في ملف style الموجود في مجلد القالب المستعمل و نفس الطريقة صالحة لباقي المواقع ...

أما الكود فهو كالتالي :

#yellow-box,
    #blue-box, 
    #green-box,
    #red-box, 
    #orange-box,
    #down-box,
    #show-box {
            border-radius:5px;
            -webkit-border-radius:5px;
           -moz-border-radius:5px; 
           -o-border-radius:5px;
            text-align:center;
            padding:6px 20px 6px 20px;
            color:#222222;
            margin:10px 0 5px 0;
    }
    #yellow-box {
            border:solid 1px #8e8e04;
            background:#FFFFCC url(http://img102.herosh.com/2011/06/26/426945931.png) 97% 6px no-repeat;
    }
    #blue-box {
            border:solid 1px #27739d;
            background:#94d5fb url(http://img102.herosh.com/2011/06/26/688326384.png) 97% 6px no-repeat;
    }
    #green-box {
            border:solid 1px #90ac13;
            background:#eef4d3 url(http://img105.herosh.com/2011/06/26/681386449.png) 97% 6px no-repeat;
    }
    #orange-box {
            border:solid 1px #ba4c0e;
            background:#ffcaa4 url(http://img102.herosh.com/2011/06/26/398818527.png) 97% 6px no-repeat;
    }
    #red-box {
            border:solid 1px #dc2727;
            background:#f2abab url(http://img105.herosh.com/2011/06/26/964674528.png) 97% 6px no-repeat;
            color:#222222;
            padding:6px;
            text-align:center;
    }
    #down-box {
            border:solid 1px #90ac13;
            background:#eef4d3 url(http://img105.herosh.com/2011/06/26/417615435.png) 97% 6px no-repeat;
            color:#222222;
            padding:6px;
            text-align:center;
    }
    #show-box {
            border:solid 1px #27739d;
            background:#94d5fb url(http://img102.herosh.com/2011/06/26/278846576.png) 97% 6px no-repeat;
            color:#222222;
            padding:6px;
            text-align:center;
    }
    #code-box {
            background:url(http://img105.herosh.com/2011/06/28/391147010.gif) repeat-x;
            border:1px solid #CFCFCF;
            padding:5px;
            overflow-x:scroll;
            margin:10px 0 5px 0;
    }


طبعا يجب استبدال روابط الصور في الكود لأنها مرفوعة على سيرفر Herosh فقط ، و سيحذفها بعد مدة .
و إليك الصور

الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :

<div id="blue-box">أنا رسالة داخل صندوق أزرق</div> 

0 التعليقات:

إرسال تعليق