السلام عليكم و رحمة الله تعالى و بركاته
اخواني في هذه التدوينة ساقدم صناديق الcss مبتكرة
ما هي صناديق ال css
صورة







بعد مرور الماوس



فهمت الان ما هي صناديق الcss
تستعمل هذه الصناديق مثلا للفت انتباه الزوار او لوضع كود ما بداخلها المهم لها استعمالات كثيرة , يمكنك توظيفها حسب اختيارك
المهم هذا هو كود الcss :

#msgbox{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#fb{
border:solid 2px #DEDEDE;
background:#3c5a9a;
color:#222222;
padding:4px;
text-align:center;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#fb:hover{
border:solid 2px #3c5a9a;
background:#DEDEDE;
color:#222222;
padding:4px;
text-align:center;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#twitter{
border:solid 1px #DEDEDE;
background:#87c1e7;
color:#222222;
padding:4px;
text-align:center;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#twitter:hover{
border:solid 1px #87c1e7;
background:#DEDEDE;
color:#222222;
padding:4px;
text-align:center;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

نشرح الكود
#boxmsg هو اسم الديف div الذي ستضع فيه الكتابة
border هو الاطار الخرجي للصندوق , 1px حجم الاطار و يليه لون الاطار
background لون خلفية الاطار
color هو لون النص داخل الاطار
pading هو بعد النص عن الاطار من الاعلى

 اظن هدا ما يجب عليك ان تعرفه المهم اذا اردت ان تعرف المزيد فغير على الاكواد و شوف النتيجة..

انا تعمدت وضع 3 امثلة لانها تتلاءم مع اغلب المواقع

المهم هذه هي اكواد هتمل html

<div id="msgbox">
www.spacedevloper.com
</div>
<br>
<div id="fb">
www.spacedevloper.com
</div>
<br>
<div id="twitter">
www.spacedevloper.com
</div>

و اذا اردت وضع الاكواد على مدونة بلوجر فضع اكواد css قبل ]]></b:skin> مباشرة
و تبقى نفس اكواد الهتمل html
و الى نكون قد انتهينا اعزائي اتمنى ان اكون قد افدكم و لو بالقليل
استودعكم الله الذي لا تضيع ودائعه