اضافة شريط بتقنية 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>
لا تقرأ وترحل .. شارك قول رأيك
0 تعليقات: