شاشة الإنتظار

لغة القالب

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

كن مدون
الأحد, يناير 16, 2022
CSS

 الإعتماد على أكواد 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>

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

1- CNMUBanners1 هذا هو الكلاس الخاص بالبانر ستحتاج تغييره في حالة واحده فقط ان كنت ستستخدم أكثر من بانر وستغير بيانات كل واحد منهم فعليك في كل مرة تكرر فيها كود البانر أن تغير الرقم 1 برقم آخر غير ذلك لو ستستخدمه مرة واحده لن تحتاج لتغيير شئ

2- الكود الأول المعلم بالبرتقالي من أوله لآخره يعبر عن لون البانر وهو تدرج لوني من لونين واحد علمته باللون الازرق الفاتح والآخر بالأخضر استبدل اللونين بلونين آخرين لتحصل على تدرج لوني مختلف , أو استبدل الكود كله بلون موحد ان لم تكن ترغب بتدرجات

3-الرقم 300 هو عرض البانر والرقم 250 هو الإرتفاع واللون #fff  هو لون النص

4- هذا الكود margin: 5px auto 10px 
الرقم 5 هو بعد البانر من الأعلى والرقم 10 هو بعد البانر من الأسفل بحيث لا يكون ملتصق بشئ قبله أو بعده فيمكنك جعلهم 0 ان كانت المسافات لديك مناسبة
اما كلمة auto هذا لجعل البانر يتوسط المكان الذي هو فيه لو تريده غير متوسط اجعل الكلمة 0

5- #000 و #fff هم الوان البانر عند التمرير واحد للخلفية والآخر للنص

6- اعدادات كلمة كن مدون وطبعا تعدل الكلمات بما ترغب به
 40px هذا حجم الخط فيها و 50px هو بعدها من أعلى البانر

7-إعدادات جملة موقع متخصص في تطوير منصة بلوجر
يمكنك ازالة السطر بأكمله ان لم تريد هذه الجملة واردت البانر مكون من كلمة واحده فقط
16px حجم الخط  30px درجة بعدها من الكلم التي اسفلها

8-طبعا لا تنسى في الكود الرئيسي رمز # هذا تستبدله بالرابط المراد فتحه عند الضغط على البانر
مثال آخر للبانر بعد عمل تعديل على تلك المعطيات

كن مدون
صناعة بنرات بإستخدام HTML , CSS دون استخدام صور كن مدون : موقع متخصص في تطوير منصة بلوجر

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. جزاك الله كل خير أستاذ والله مواضيع مميزة وفي القمة ♥ بالتوفيق

    ردحذف
  2. والله كود جميل جدا ومميز كعادتك وقد نحتاجه نحن كثيرا

    ردحذف
    الردود
    1. يسرني ان الكود أعجبك أخي منير , شكراً جزيلا لك يا غالي على المرور
      وجزاك الله بالمثل , ونورت الموضوع ❤❤❤

      حذف
  3. الردود
    1. حبيبي يا أبو حميد يسرني ان الكود أعجبك

      حذف

عدد المواضيع