8/19/2016

settings_overscan print announcement
اضافة شريط بتقنية CSS داخل التدوينة او الصفحات

 اضافة شريط بتقنية 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 ليست هناك تعليقات:

إرسال تعليق