صناعة بنرات بإستخدام HTML , CSS دون استخدام صور

 الإعتماد على أكواد HTML , CSS يعد خيار افضل دائما من استخدام صور , فكل شئ تستطيع ان تصنعه بتلك اللغات كبديل للصور يكون افضل وأسرع , هناك امور لا مفر من استخدام صور فيها كالصورة الأساسية للموضوع لكن هناك أمور اخرى نستطيع استبدال الصور بأكواد منها ومن هذه الأمور بعض البنرات

مثال حى لإستخدام هذا النوع من البنرات

سنستخدم هذا الكود البسيط يمكنك أن تضيفه في  آداة HTMLJavaScript  او داخل موضوع 

<style>

.CNMUBanners1 {background: linear-gradient(to right, #04776e 0%,#2247ad 100%);width: 300px;height: 250px;color: #fff 

!important

;margin: 5px auto 10px !important;box-sizing: border-box;border: 5px solid #fff;box-shadow: 0 0 0 1px #bbb;display: block;text-align: center;padding: 10px;transition: none !important;max-width: 100%;text-decoration: none !important;overflow: hidden;}

.CNMUBanners1:hover {background: #000;color: #fff;}

.CNMUBanners1 b {margin-top: 50px;font-size: 40px;font-weight: normal;display: block;}

.CNMUBanners1 span {margin-top: 30px;font-size: 16px;display: block;}

</style>

<a href="#" class="CNMUBanners1">

<b>كن مدون</b>

<span>موقع متخصص في تطوير منصة بلوجر</span>

</a>

إعدادادت الكود