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

اضافة شريط بتقنية 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>
ملاحظة! : عند نقلك للموضوع حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده، وايضاَ احتراما وتقديراَ للجهود المبذولة.

عن الكاتب

لـدي القليل مـن الخبره ، فـي مجال الـتـدويـن اضـع بالمدونة ما يـفـيـد الزائر والـمـدون ، تــابـعـنـا قـد نـفـيـدك يـومـاً .

شكرا لك ولمرورك