تأثير النص الذهبي اللامع: دليل شامل لفهم وتطبيق هذا الأسلوب المذهل في الويب

شرح تأثير النص الذهبي اللامع

css Texts

هذا الكود ينشئ تأثير نص ذهبي لامع باستخدام تقنيات CSS متقدمة. دعنا نشرح كل جزء بالتفصيل:

1. العنصر الحاوي (.gold)

.gold {
    margin: 20px 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 6vw 0;
    background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
    

• margin: 20px 0: يضيف مسافة 20px أعلى وأسفل العنصر
• display: flex: يجعل العنصر حاوية مرنة لتسهيل تموضع العناصر داخله
• flex-flow: column: يرتبب العناصر داخلها بشكل عمودي
• align-items: center: يوسّط العناصر أفقيًا
• justify-content: center: يوسّط العناصر عموديًا
• padding: 6vw 0: يضيف حشوة داخلية باستخدام وحدات العرض (vw) لجعلها متجاوبة
• background: radial-gradient: ينشئ خلفية متدرجة من اللون الذهبي الداكن (#443501) إلى الأسود
• box-shadow: يضيف ظلال متعددة لإعطاء عمق للتصميم

2. النص الأساسي (span)

.gold span {
    color: #cfc09f;
    font-family: Times, serif;
    position: relative;
    text-transform: uppercase;	
    font-size: 9vw;
    letter-spacing: 1vw;
    line-height: 1;
    margin: 0;
    font-weight: 300;
    text-shadow: -1px 0 1px #c6bb9f, 0 1px 1px #c6bb9f, 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
}
    

• color: #cfc09f: يحدد لون النص الأساسي (ذهبي فاتح)
• font-family: Times, serif: يحدد خط النص
• position: relative: يسمح بوضع العناصر النسبية داخله (مثل :before)
• text-transform: uppercase: يحول النص إلى أحرف كبيرة
• font-size: 9vw: يحدد حجم الخط باستخدام وحدات العرض لجعله متجاوبًا
• letter-spacing: 1vw: يضيف مسافة بين الحروف
• text-shadow: يضيف ظلال متعددة للنص لإعطاء تأثير ثلاثي الأبعاد

3. العنصر الثاني (span + span)

.gold span + span {
    font-size: 15vw;
}
    

هذا المحدد يستهدف العنصر span الذي يأتي مباشرة بعد span آخر، ويجعله أكبر حجمًا (15vw بدلاً من 9vw).

4. التأثير الذهبي span:before

.gold span:before {
    content: attr(data-double);
    left: 0;
    top: 0;
    position: absolute;	
    z-index: 1;
    background: linear-gradient(to bottom, #cfc09f 14%,#634f2c 16%, #cfc09f 20%, #cfc09f 22%,#ffecb3 40%,#3a2c0f 84%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
    

• content: attr(data-double): يأخذ المحتوى من سمة data-double في HTML
• position: absolute: يضع العنصر فوق النص الأساسي
• z-index: 1: يجعل العنصر يظهر فوق النص الأساسي
• background: linear-gradient: ينشئ تدرجًا لونيًا ذهبيًا معقدًا يعطي تأثير اللمعان
• -webkit-background-clip: text: يقتص الخلفية على شكل النص (خاصية ويب كيت)
• -webkit-text-fill-color: transparent: يجعل لون النص شفافًا لظهور التدرج اللوني

ملاحظة: الخاصيتان -webkit-background-clip و -webkit-text-fill-color هما خاصيتان تجريبيتان تعملان في متصفحات ويب كيت (مثل Chrome و Safari). للحصول على دعم أوسع، يمكن إضافة الإصدارات القياسية.

5. HTML

<div class="gold">
    <span data-double="وسام">وسام</span>
    <span data-double="النجار">النجار</span>
</div>
    

يحتوي العنصر div على فئة "gold" ويحتوي على عنصرين span. كل span يحتوي على النص المراد عرضه وسمة data-double التي تحتوي على نفس النص للتأثير الذهبي.

معاينـــــة

وسام النجار

كيف يعمل التأثير؟

يعتمد التأثير على طبقتين من النص:

1. الطبقة السفلية: النص الأساسي بلون ذهبي فاتح مع ظلال لإعطاء العمق
2. الطبقة العلوية: نسخة من النص باستخدام pseudo-element :before مع تدرج لوني ذهبي معقد يعطي تأثير اللمعان

باستخدام background-clip: text و text-fill-color: transparent، يصبح التدرج اللوني مرئيًا من خلال النص الشفاف، مما يخلق تأثير النص الذهبي اللامع.

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