04‏/05‏/2015

إضافة جميلة لعرض مواضيع بشكل منسق ولطيف التصميم يحتوي فقط على أكواد سس لذلك لا داعي للقلق حول الثقل، تضم الإضافة أربعة صناديق بنفس الحجم مع بعض التعديلات تم إضافة ألوان متعددة تتناسق مع شكل الصورة، وكذلك حجم الصورة أياً كان فسيتناسب تلقائياً أترككم مع المعاينتان

شرح  طريقة التركيب
1. توجه لتخطيط
2. أضف أداة HTML/JAVASCRIPT
3. ضع بها الكود التالي

<style>   
.befeature{height: 250px;overflow: hidden;width: 995px;padding: 0px 0px 0px 0px;  margin: 0 auto;}
.bebox:hover{margin-top: -180px;}
.bebox{float: right;height: 485px;margin: 0px 9px 0px 9px;margin-left: 0%;moz-transition: all .3s ease-in-out;ms-transition: all .3s ease-in-out;o-transition: all .3s ease-in-out;overflow: hidden;padding: 193px 0 0 0;transition: all .3s ease-in-out;webkit-transition: all .3s ease-in-out;width: 24%;}
.beupbox{height: 50px;margin: 0;overflow: hidden;padding: 5px 10px 0px 10px;width: 100%;}.beupbox h1{color: #fff;font-family: cursive,droid arabic kufi;font-size: 15px;font-weight: 400;margin: 0;padding: 0px 0px 0px 0px;width: 95%;text-shadow: 0 -1px 0 rgba(137, 137, 137, 0.25);}
.beupbox a{text-decoration: none;}
.bedownbox{height: 400px;margin: 0;padding: 5px 10px 0px 9px;width: 94%;}
.bedownbox p{color: #FDFDFD;font-family: cursive;font-size: 13px;font-weight: 400;  text-align: right;}
#bebox1{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox2{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox3{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox4{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
    </style>
    <div class='befeature'>
    <div class='bebox' id='bebox1'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox2'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox3'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox4'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div></div></div>

* رابط الصورة محددة باللون الأصفر 
* ألوان الصناديق محددة باللون الأخضر
* ضع بدل # رابط الموضوع
* العنوان / الوصف
إضافة جميلة لعرض مواضيع بشكل منسق ولطيف التصميم يحتوي فقط على أكواد سس لذلك لا داعي للقلق حول الثقل، تضم الإضافة أربعة صناديق بنفس الحجم مع بعض التعديلات تم إضافة ألوان متعددة تتناسق مع شكل الصورة، وكذلك حجم الصورة أياً كان فسيتناسب تلقائياً أترككم مع المعاينتان

شرح  طريقة التركيب
1. توجه لتخطيط
2. أضف أداة HTML/JAVASCRIPT
3. ضع بها الكود التالي

<style>   
.befeature{height: 250px;overflow: hidden;width: 995px;padding: 0px 0px 0px 0px;  margin: 0 auto;}
.bebox:hover{margin-top: -180px;}
.bebox{float: right;height: 485px;margin: 0px 9px 0px 9px;margin-left: 0%;moz-transition: all .3s ease-in-out;ms-transition: all .3s ease-in-out;o-transition: all .3s ease-in-out;overflow: hidden;padding: 193px 0 0 0;transition: all .3s ease-in-out;webkit-transition: all .3s ease-in-out;width: 24%;}
.beupbox{height: 50px;margin: 0;overflow: hidden;padding: 5px 10px 0px 10px;width: 100%;}.beupbox h1{color: #fff;font-family: cursive,droid arabic kufi;font-size: 15px;font-weight: 400;margin: 0;padding: 0px 0px 0px 0px;width: 95%;text-shadow: 0 -1px 0 rgba(137, 137, 137, 0.25);}
.beupbox a{text-decoration: none;}
.bedownbox{height: 400px;margin: 0;padding: 5px 10px 0px 9px;width: 94%;}
.bedownbox p{color: #FDFDFD;font-family: cursive;font-size: 13px;font-weight: 400;  text-align: right;}
#bebox1{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox2{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox3{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox4{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
    </style>
    <div class='befeature'>
    <div class='bebox' id='bebox1'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox2'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox3'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox4'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div></div></div>

* رابط الصورة محددة باللون الأصفر 
* ألوان الصناديق محددة باللون الأخضر
* ضع بدل # رابط الموضوع
* العنوان / الوصف
4 Blogger تعليقات
Disqus
4 التعليقات
المشرف
avatar

.. شغل حلو .. بس هذا للبلوجر ولا للورد بريس ..
وصراحه .. الاعمال اللي تقوم فيه أنيقه جداا .. معجب بمدونتك

المشرف
avatar

شكرا لك أخي، بالنسبة للصناديق فيمكن استعمالها بأي منصة

المشرف
avatar

هل يمكن هضافة العديد من الصناديق أخي ?????

المشرف
avatar

كيف يمكنني تغيير الحجم

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة