إطار مظلل بدون صور خيارات

[salamj]

تحية

كود

.borderbox{
    width: 500px;
    height: 500px;
    padding: 0;
    background-color: #FFFFFF;
}
.borderbox div{
    border: 3px solid #FEFEFE;
    padding: 0;
}
.borderbox div div{
    border: 3px solid #FCFCFC;
    padding: 0;
}
.borderbox div div div{
    border: 3px solid #F9F9F9;
    padding: 0;
}
.borderbox div div div div{
    border: 3px solid #F5F5F5;
    padding: 0px;
}
.borderbox div div div div div{
    border: 3px solid #F0F0F0;
    padding: 5px;
}
.borderbox div div div div div *{
    border:0;
    padding: 1px;
}

كود

<div class="borderbox">
<div><div><div><div><div>
محتوى ما
</div></div></div></div></div>
</div>

هذه مجرد فكرة ، و مثال، يمكن تعديل الـ CSS لينتج أشياء أخرى...

الملفات المرفقة

 cssbox.zip ( 1001بايت ) عدد مرات التحميل: 18

 

[زاجل]

فكرة جميلة .. أحب هذه المشاركات كثيرا

جزاك الله خير

[iMagdy]

رائع.....

لمن يريد مشاهدة النتيجة بشكل اسرع افتح النوت باد وسيف اس سيف الصفحة .html بامتداد html و انسخ والصق الكود ده فيها:
او من هنا http://tinypaste.com/66d38

كود

<style type="text/css">

.borderbox{
    width: 500px;
    height: 500px;
    padding: 0;
    background-color: #FFFFFF;
}
.borderbox div{
    border: 3px solid #FEFEFE;
    padding: 0;
}
.borderbox div div{
    border: 3px solid #FCFCFC;
    padding: 0;
}
.borderbox div div div{
    border: 3px solid #F9F9F9;
    padding: 0;
}
.borderbox div div div div{
    border: 3px solid #F5F5F5;
    padding: 0px;
}
.borderbox div div div div div{
    border: 3px solid #F0F0F0;
    padding: 5px;
}
.borderbox div div div div div *{
    border:0;
    padding: 1px;
}"

</style>

<div class="borderbox">
<div><div><div><div>

محتوى ما

</div></div></div></div>