صمم شعارمدونتك ب html + css

شعار أنيق بتقنيات CSS و HTML

هذا شعار تم تصميمه بأسلوب رائع باستخدام تقنيات CSS وHTML مع ظل خفيف يتغير ليناسب تصميم موقعك. يحتوي على ميزات مطبعية متقدمة تتيح اتصال الخطوط والنصوص بسلاسة.

مميزات التصميم:

• تصميم مطبعي أنيق ومرن
• استخدام أحدث خصائص CSS3
• تأثيرات بصرية بدون الحاجة لصور
• تنسيق متكامل للنصوص والخطوط
• أيقونة نجمة متكاملة مع التصميم

كود HTML

<div class="nazvaniya">
  <h1>wesam developer</h1>
  <h6>website for webmaster</h6><br/>
  <h5>Here is the title</h5><br/>
  <i class="ion-star"></i>
</div>

كود CSS

.nazvaniya {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  display: inline-block;
  color: #b7b1b1;
  margin: 55px 18px;
  max-width: 432px;
  width: 100%;
  text-align: center;
  font-size: 36px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.nazvaniya h1,
.nazvaniya h5 {
  margin: 0;
  text-transform: uppercase;
}

.nazvaniya h1 {
  font-family: 'Teko', Arial, sans-serif;
  font-weight: 700;
  font-size: 65px;
  padding: 0;
  text-align: center;
  margin: 0;
  line-height: 30px;
}

.nazvaniya h5 {
  background-color: #b3acac;
  color: #1f1d1d;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 23px;
  padding: 0px 34px;
  position: relative;
}

.nazvaniya h5:before,
.nazvaniya h5:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 2px;
  border-width: 9px 5px;
  border-style: solid;
  opacity: 0.8;
}

.nazvaniya h5:before {
  right: 100%;
  border-color: #afaeae #afaeae #afaeae transparent;
}

.nazvaniya h5:after {
  left: 100%;
  border-color: #afaeae transparent #afaeae #afaeae;
}

.nazvaniya h6 {
  margin: 0;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
}

.nazvaniya h6:before,
.nazvaniya h6:after {
  position: absolute;
  height: 2px;
  content: '';
  width: 38px;
  top: 50%;
  border-top: 2px solid #afaeae;
  border-bottom: 2px solid #afaeae;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nazvaniya h6:before {
  left: -43px;
}

.nazvaniya h6:after {
  right: -43px;
}

.nazvaniya i {
  font-size: 34px;
  line-height: 36px;
}
    

معاينة

معاينة الذهاب الي الموقع

ملاحظة: يحتاج هذا التصميم إلى تضمين مكتبة Ionicons للعمل بشكل صحيح:

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

شرح كود العنوان المتكامل

البنية الأساسية:

هذا الكود ينشئ قسم عنوان أنيق يتكون من:

• عنوان رئيسي كبير (h1)
• عنوان فرعي صغير (h6)
• شعار أو وصف (h5)
• أيقونة نجمة (من مكتبة Ionicons)

تفاصيل العناصر:

العنصر الأساسي (.nazvaniya):

• يستخدم خط Raleway كخط أساسي
• يتم عرضه كعنصر inline-block
• لونه الأساسي رمادي فاتح (#b7b1b1)
• عرضه الأقصى 432 بكسل
• محاذاة النص في المنتصف

العنوان الرئيسي (h1):

• يستخدم خط Teko بسمك 700
• حجم الخط 65 بكسل
• يتم تحويل النص إلى أحرف كبيرة (uppercase)
• لا يوجد هوامش أو حشوات

الشعار (h5):

• خلفية رمادية (#b3acac)
• لون النص داكن (#1f1d1d)
• حجم الخط 14 بكسل
• يحتوي على مثلثين صغيرين على الجانبين (منشئين باستخدام :before و :after)
• المثلثات تستخدم حدود ملونة لإنشاء شكل السهم

العنوان الفرعي (h6):

• يحتوي على خطين أفقيين على الجانبين
• الخطوط منشأة باستخدام :before و :after
• يتم تحويل النص إلى أحرف كبيرة
• محاذاة الخطوط تتم باستخدام transform

الأيقونة (i):

• تستخدم أيقونة نجمة من مكتبة Ionicons
• حجم الأيقونة 34 بكسل
• يتم تحميل مكتبة الأيقونات من CDN

ملاحظات تقنية:

• يستخدم الكود pseudo-elements (:before و :after) لإنشاء أشكال زخرفية
• يتم استخدام transform لمحاذاة العناصر بدقة
• الكود متجاوب ويعمل على مختلف أحجام الشاشات
• يستخدم box-sizing: content-box للحفاظ على الأبعاد

كيف كان المقال؟