اضافة شريط بتقنية CSS داخل التدوينة او الصفحات
معاينة الشريط
حـلولــي
طريقة الاضافة
عند كتابة التدوينة بدل من تأليف إلى HTML وضع الكود التالي مع تعديل
كلمة حلولي بما يناسبك
<style>.css-ribbon { position: relative; z-index: 1; padding: 1em 2em;}.bsribbon { font-size: 120% !important; width: 60%; position: relative; background: #0CC5F4; color: #fff; text-align: center; padding: 1em 2em; margin: 2em auto 3em;}
.bsribbon:before, .bsribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #04A8D1; z-index: -1;}
.bsribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent;}
.bsribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent;}
.bsribbon .ribbon-content:before, .bsribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #088EB0 transparent transparent transparent; bottom: -1em;}
.bsribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em;}
.bsribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0;}</style>
<div class="css-ribbon"> <h1 class="bsribbon"> <strong class="ribbon-content">حـلــولــي </strong> </h1></div>
add_comment ليست هناك تعليقات:
إرسال تعليق