إطار تصميمي مميز بعنوان زخرفي

إطار شفاف متعدد الاستخدامات

إطار أو مربع رائع حيث يتم وضع العنوان في المنتصف على خلفية شفافة، مما يعني أنه يمكن وضعه على أي خلفية بأي لون. هذا خيار بسيط حيث يمكنك وضع الوصف، مما يبدو جميلًا والأهم من ذلك أنه يظهر بشكل صحيح. تم تصميم العنوان افتراضيًا بأسلوب يناسب أي خلفية ملونة. حيث كنا نرى سابقًا أنه كان يتم عمل خلفية خاصة للعنوان لجعل الأحرف مرئية.

لم يعد هذا موجودًا الآن، كل ما علينا هو اختيار الدرجة اللونية التي ستظهر بشكل جميل ومشرق على الخلفية. يمكن حتى اعتبار هذا المربع عنصرًا من عناصر التصميم. على سبيل المثال، إذا كنت تريد وصف موضوعك على الصفحة الرئيسية، فسيكون هذا المربع حلاً رائعًا. والأهم من ذلك أن كل شيء مصمم باستخدام CSS خالص، حيث يمكن وضعه كعنصر تصميم، أو مؤقتًا لنشر خبر أو إعلان، أعتقد أن لهذا النمط العديد من التطبيقات.

كما أن الأساس نفسه يمكن وضعه في أي مكان تريد رؤيته على موقعك. يمكن أن يكون حاوية، أو يمكن وضع مربع أسفله لمادة معينة أو وصف.

شرح مفصل للكود: إطار تصميمي مميز بعنوان زخرفي

الهيكل الأساسي (HTML)

<div class="karkas-forma">
  <div class="opesa_ludsan">اوعــي وشــك</div>
  <p>النص هنا...</p>
</div>

يتكون التصميم من عنصرين رئيسيين:

1. karkas-forma: الإطار الرئيسي الذي يحتوي على المحتوى
2. opesa_ludsan: شريط العنوان الزخرفي الموجود أعلى الإطار

1تنسيقات الإطار الرئيسي (karkas-forma)

.karkas-forma {
  position: relative;
  padding: 10px 30px;
  border-left: 5px solid #6d33b7;
  border-bottom: 5px solid #6d33b7;
  border-right: 5px solid #6d33b7;
  border-radius: 0 0 15px 15px;
  margin: 50px 30px 20px;
}

• position: relative: يسمح بوضع العناصر الداخلية بشكل مطلق بالنسبة له
• padding: مساحة داخلية (10px أعلى/أسفل، 30px يمين/يسار)
• border: حدود جانبية وسفلية باللون البنفسجي (#6d33b7)
• border-radius: زوايا مدورة فقط في الأسفل
• margin: هامش علوي كبير (50px) لترك مساحة للعنوان الزخرفي

2تنسيقات شريط العنوان (opesa_ludsan)

.opesa_ludsan {
  display: flex;
  position: absolute;
  align-items: flex-end;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 22px;
  line-height: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #6d33b7;
  transform: translateY(-100%);
}

• display: flex: لترتيب العناصر الداخلية (النص والزخارف)
• position: absolute: لوضعه خارج التدفق الطبيعي
• transform: translateY(-100%): لرفعه فوق الإطار الرئيسي
• text-transform: uppercase: لتحويل النص إلى أحرف كبيرة
• color: #6d33b7: لون النص البنفسجي المطابق للحدود

3الزخارف الجانبية (باستخدام :before و :after)

.opesa_ludsan:before {
  content: "";
  flex: 1;
  height: 15px;
  margin-right: 15px;
  border-top: 5px solid #6d33b7;
  border-left: 5px solid #6d33b7;
  border-radius: 15px 0;
  transform: translateX(-5px);
}

.opesa_ludsan:after {
  content: "";
  flex: 1;
  height: 15px;
  margin-left: 15px;
  border-top: 5px solid #6d33b7;
  border-right: 5px solid #6d33b7;
  border-radius: 0 15px;
  transform: translateX(5px);
}

هذه الزخارف تخلق تأثيرًا مميزًا:

• عنصر :before: يخلق زخرفة منحنية في الجانب الأيسر
• عنصر :after: يخلق زخرفة منحنية في الجانب الأيمن
• flex: 1: يجعل الزخارف تتمدد لملء المساحة المتاحة
• border-radius: يعطي الشكل المنحني للزخارف
• transform: يضبط موضع الزخارف بدقة

كيف يعمل التصميم ككل؟

1. الإطار الرئيسي له حدود جانبية وسفلية فقط
2. شريط العنوان يقع فوق الإطار الرئيسي تمامًا
3. الزخارف الجانبية تربط بصريًا بين شريط العنوان والإطار
4. التصميم متجاوب ويعمل على جميع أحجام الشاشات

استخدامات ممكنة:

• عناوين الأقسام الرئيسية في الموقع
• تمييز المحتوى المهم أو الخاص
• إطارات الاقتباسات أو النصائح
• عناصر واجهة المستخدم المميزة

الكود كاملا

<div class="karkas-forma">
  <div class="opesa_ludsan">اوعــي وشــك</div>
  <p>اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

</p>
</div>
    

.karkas{
  background: #efefef;
}
.karkas-forma {
  position: relative;
  padding: 10px 30px;
  border-left: 5px solid #6d33b7;
  border-bottom: 5px solid #6d33b7;
  border-right: 5px solid #6d33b7;
  border-radius: 0 0 15px 15px;
  margin: 50px 30px 20px;

}
.opesa_ludsan {
  display: flex;
  position: absolute;
  align-items: flex-end;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 22px;
  line-height: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #6d33b7;
  transform: translateY(-100%);
}
.opesa_ludsan:before {
  content: "";
  flex: 1;
  height: 15px;
  margin-right: 15px;
  border-top: 5px solid #6d33b7;
  border-left: 5px solid #6d33b7;
  border-radius: 15px 0;
  transform: translateX(-5px);
}
.opesa_ludsan:after {
  content: "";
  flex: 1;
  height: 15px;
  margin-left: 15px;
  border-top: 5px solid #6d33b7;
  border-right: 5px solid #6d33b7;
  border-radius: 0 15px;
  transform: translateX(5px);
}
    

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