يتيح لك CSS3 أن تكون مبدعًا وتجرب تصميمك لإنشاء صفحات ويب جميلة وفريدة من نوعها. أحد مجالات التصميم التي تتيح لك CSS العمل بها هي الطباعة.

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

في هذه المقالة ، ستتعلم طريقة فعالة لإنشاء تأثيرات ظل نص مختلفة باستخدام HTML و CSS.

الشروع في العمل مع HTML و CSS

يمكنك نسخ أمثلة التعليمات البرمجية هذه ولصقها للحصول على تأثير ظل النص الذي تفضله. ابدأ بإنشاء ملف index.html ملف و style.css ملف. هذه هي الملفات الوحيدة التي ستحتاج إليها لتجربة الأمثلة ، لكنك ستحتاج إلى تغيير كلا الملفين لكل مثال.

index.html

 الظل # 01 


href = " https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"





instagram viewer


rel = "stylesheet"
/>
 الظل # 02 


href = " https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel = "stylesheet"
/>
 الظل # 03 


href = " https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel = "stylesheet"
/>
 الظل # 04 


href = " https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel = "stylesheet"
/>
 الظل # 05 


href = " https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel = "stylesheet"
/>
 الظل # 06 


href = " https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel = "stylesheet"
/>
 الظل # 07 


href = " https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel = "stylesheet"
/>

style.css

هيئة {
تحويل النص: الأحرف الكبيرة ؛
ارتفاع الخط: 1 ؛
محاذاة النص: مركز ؛
حجم الخط: 5rem ؛
عرض: شبكة ؛
فجوة: 4rem ؛
}

الآن ، دعنا ننتقل إلى 11 مثالاً في ظل النص لتجربتها.

متعلق ب: كيفية تغيير نص موقع الويب الخاص بك باستخدام خاصية عائلة الخطوط CSS

صوفي

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

انتاج |

لغة البرمجة

 الظل # 01 
صوفي

CSS

هيئة {
لون الخلفية: # 5e5555 ؛
}
.mystic {
عائلة الخطوط: "Bowlby One" ، مخطوطة ؛
اللون: rgba (255 ، 255 ، 255 ، 0.596) ؛
ظل النص: 20 بكسل 0 بكسل 10 بكسل rgb (0 ، 0 ، 0) ؛
}

رتابة

هذا تأثير نصي مرح باستخدام الخط "Monoton". يمكنك التلاعب بالنص ولون الظل لمطابقة الألوان الأساسية لموقعك على الويب.

انتاج |

لغة البرمجة

 الظل # 02 
رتابة

CSS

.monoton {
عائلة الخطوط: 'Monoton' ، مخطوطة ؛
حجم الخط: 15rem ؛
اللون: rgb (255 ، 0 ، 0) ؛
العتامة: 0.5 ؛
ظل النص: 0 بكسل -78 بكسل rgb (255 ، 196 ، 0) ؛
}

بنجي

هذا أسلوب رائع باستخدام خط "Bungee Shade". إلى جانب الخلفية المظلمة ، فإنه ينتج تأثيرًا خامًا مع إحساس بالريبة.

انتاج |

لغة البرمجة

 الظل # 03 
بنجي

CSS

هيئة {
لون الخلفية: # 222 ؛
}
.bungee {
عائلة الخطوط: 'Bungee Shade' ، مخطوطة ؛
اللون: RGB (160 ، 12 ، 12) ؛
العتامة: 0.9 ؛
ظل النص: -18 بكسل 18 بكسل 0 RGB (66 ، 45 ، 45) ؛
}

المشعة

يمكنك استخدام هذا التأثير للتنبيه أو علامات الخطر. يستخدم الخط "Rampart One".

انتاج |

لغة البرمجة

 الظل # 04 
المشعة

CSS

هيئة {
لون الخلفية: # 27292d ؛
}
.radioactive {
عائلة الخطوط: 'Rampart One' ، مخطوطة ؛
اللون: rgb (97 ، 214 ، 43) ؛
العتامة: 0.6 ؛
ظل النص: -18 بكسل -18 بكسل 20 بكسل rgb (87 ، 255 ، 9) ؛
}

سبرينت

يستخدم تأثير النص الجاري تشغيل الخط "Faster One" ، و ظل النص الممتلكات و ::بعد، بعدماعنصر زائف بنفس محتوى النص. هذا يخلق تأثير "مضاعف".

انتاج |

لغة البرمجة

 الظل # 05 
سبرينت

CSS

هيئة {
لون الخلفية: # 27292d ؛
}
.sprint {
عائلة الخطوط: "Faster One" ، مخطوطة ؛
حجم الخط: 10rem ؛
اللون: rgba (255 ، 0 ، 242 ، 0.322) ؛
ظل النص: -20px -108px 0px rgba (255، 255، 255، 0.445) ؛
تباعد الحروف: 1rem ؛
الموقف: نسبي ؛
}
.sprint:: بعد {
المحتوى: "العدو" ؛
الموقف: مطلق.
أعلى: 215 بكسل ؛
اليمين: 300 بكسل ؛
}

شائك

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

انتاج |

لغة البرمجة

 الظل # 06 
شائك

CSS

.prickly {
عائلة الخطوط: "آكل" ، مخطوطة ؛
ظل النص: -18px -18px 2px # 777 ؛
}

كودستار

يمكن أن يكون ظل النص بمثابة مخطط غير واضح ولكنه مرئي للنص. يعمل هذا التأثير المشرق مع العجائب مع خط "Codystar".

انتاج |

لغة البرمجة

 الظل # 06 
كودستار

CSS

.codystar {
عائلة الخطوط: "Codystar" ، مخطوطة ؛
وزن الخط: عريض ؛
اللون: rgb (55 ، 58 ، 255) ؛
ظل النص: 1 بكسل 1 بكسل 10 بكسل rgb (16 ، 72 ، 255) ، 1 بكسل 1 بكسل 10 بكسل rgb (0 ، 195 ، 255) ؛
}

مملكة

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

انتاج |

لغة البرمجة

 الظل # 08 
مملكة

CSS

هيئة {
لون الخلفية: # 5e5555 ؛
}
.مملكة {
اللون الابيض؛
عائلة الخطوط: Impact، Haettenschweiler، 'Arial Narrow Bold'، sans-serif؛
حجم الخط: 10rem ؛
ارتفاع الخط: 1 ؛
محاذاة النص: مركز ؛
}
.kingdom - الظل:: قبل {
اللون: # 000 ؛
المحتوى: attr (نص البيانات);
قمة الهامش: 0.7rem ؛
الموقف: مطلق.
تحويل: منظور (205 بكسل) rotateX (38 درجة) مقياس (0.84) ؛
مؤشر z: -1 ؛
}

المبرمج

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

انتاج |

لغة البرمجة

 الظل # 09 


تأكل 

نايم 

الشفرة 

يكرر

CSS

هيئة {
لون الخلفية: # 5e5555 ؛
}
شعبة {
عائلة الخطوط: Verdana، Geneva، Tahoma، sans-serif؛
الحشو: 40 بكسل ؛
الهامش: 0px auto؛
وزن الخط: عريض ؛
ارتفاع الخط: 5.8rem ؛
محاذاة النص: يسار ؛
اللون: rgb (94 ، 94 ، 94) ؛
} 
.coder-life {
ظل النص: 5px 5px # ffff00 ؛
عامل التصفية: الظل المسقط (-10px 10px 20px # fff000) ؛
}

أنيق

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

انتاج |

لغة البرمجة

 الظل رقم 10 


س
ح
ص
أ
د
د
ح
أ

CSS

.أنيق {
عائلة الخطوط: Impact، Haettenschweiler، 'Arial Narrow Bold'، sans-serif؛
حجم الخط: 10rem ؛
تباعد الحروف: -1rem ؛
اللون الابيض؛
ظل النص: -18px 8px 18px # b4bbbb ؛
}

مرح

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

انتاج |

لغة البرمجة

 الظل رقم 11 
الترميز هو ♥

CSS

.playful {
عائلة الخطوط: 'Baloo Tamma' ، مخطوطة ؛
اللون: #fff ؛
تباعد الحروف: 0.2rem ؛
ظل النص: -2 بكسل -2 بكسل 0 بكسل # 888 ،
4 بكسل 4 بكسل 0 بكسل # 888 ،
7 بكسل 7 بكسل 0 بكسل # 888 ؛
}

استمر في تجربة تأثيرات الظل المتقدمة

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

ناينسى موريا (15 مقالة منشورة)

Naincy متخصصة في بناء مواقع ويب سريعة الاستجابة واستراتيجية محتوى فعالة إلى جانب نسخ الويب. إنها كاتبة تقنية مستقلة تراقب التقنيات الشائعة.

المزيد من Naincy Mourya