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

في الأمثلة المقدمة، نستخدم ظلال النص في مواقف مختلفة، مما سيمنحك الأساس اللازم حتى تتمكن من دراسة هذه المشكلة بنفسك.

1. الإعداد الأساسي

إنشاء واحدة جديدة ملف HTMLوأضف الكود التالي إليه لغة البرمجةو CSS:

أزرار CSS

في قسم HTML، قم بإضافة علامة

مع فئة النص:

المهوسون رمز الويب

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

الآن لنقم بتعيين سمة ظل النص على النص. لكن دعونا أولاً نتعرف على القيم التي تأخذها هذه السمة:

ظل النص: 4px 4px 4px #ccc;

4 بكسل - إزاحة X ( أفقي);
3px - إزاحة المحور Y ( رَأسِيّ);
2 بكسل - قيمة التمويه؛
#ccc - اللون.

يتم تعيين هذا على النحو التالي:

ظل النص: لون تمويه الإزاحة الأفقية والإزاحة الرأسية؛

يمكن تمثيل اللون بالرمز السداسي العشري #ccc أو RGBA (0,0,0,0.3); . في CSS، يمكننا تطبيق ظل CSS الداخلي على النص الخاص بنا مثل هذا:

.نص(
حجم الخط: 5em؛ /* تكبير النص */
ظل النص: 4px 3px 2px #ccc;
}

سيبدو تمثيل المتصفح لهذا النص المظلل كما يلي:

موقع مثال

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

2. تأثير البصمة

اضبط لون النص على ظل أغمق قليلاً من الخلفية. ثم قم بتطبيق ظل نص أبيض صغير مع تقليل العتامة:

جسم (
الخلفية: #222؛
}
.نص(
حجم الخط: 5em؛
اللون: رغبا (0،0،0،0.6)؛ /* لون الخط */
ظل النص: 2px 2px 3px rgba(255,255,255,0.1); /* إضافة الظل */
}

باستخدام كود RGBA يمكنك ضبط عتامة اللون. لاحظ أن لون النص له عتامة بنسبة 60% (0.6) وأن ظلال CSS div لها عتامة بنسبة 10% (0.1).

موقع مثال

3. تأثير الظل الرجعية

لا تحتاج الظلال الرجعية دائمًا إلى أن تكون غير واضحة. خذ هذا الظل الرجعية على سبيل المثال:

جسم (
}
.نص(
حجم الخط: 5em؛
اللون الابيض؛ /* تغيير لون النص إلى الأبيض */
ظل النص: 6px 6px 0px rgba(0,0,0,0.2); /* إضافة ظل قديم */
}

موقع مثال

4. تأثير الظل المزدوج

ومن المثير للاهتمام أنه يمكنك إضافة أكثر من ظل خط CSS واحد. يمكن القيام بذلك على النحو التالي: text-shadow: Shadow1, Shadow2, Shadow3; دعونا نضيف ظلين، أحدهما بلون الخلفية والثاني أغمق قليلاً:

نص (
حجم الخط: 5em؛
ظل النص: 4px 3px 0px #fff، 9px 8px 0px rgba(0,0,0,0.15); /* يعطي ظلين */
}

خلفيتنا بيضاء، لذلك لا نحتاج إلى لون آخر لها. في المتصفح سيكون التأثير كالتالي:

موقع مثال

5. تأثير الظل البعيد

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

جسم (
الخلفية: #fff3cd؛ /* تغيير لون الخلفية */
}
.نص(
حجم الخط: 5em؛
اللون الابيض؛
ظل النص: 0px 3px 0px #b2a98f،
0px 14px 10px رغبا (0,0,0,0.15),
0px 24px 2px رغبا (0,0,0,0.1),
0px 34px 30px رغبا (0,0,0,0.1);
}

موقع مثال

6. تأثير ثلاثي الأبعاد لمارك دوتو

جسم (
الخلفية: #3495c0; /* تغيير لون الخلفية */
}
.نص(
حجم الخط: 5em؛
اللون الابيض؛
ظل النص: 0 1px 0 #ccc،
0 2px 0 #c9c9c9,
0 3px 0 #بب،
0 4px 0 #b9b9b9,
0 5px 0 #ااا,
0 6 بكسل 1 بكسل رغبا (0,0,0,.1),
0 0 5 بكسل رغبا (0،0،0،.1)،
0 1px 3px rgba(0,0,0,.3),
0 3بكسل 5بكسل رغبا(0,0,0,.2),
0 5بكسل 10بكسل رغبا(0,0,0,.25),
0 10 بكسل 10 بكسل رغبا (0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

انظر الآن كيف تبدو ظلال النص الداخلي لـ CSS في المتصفح:

موقع مثال

7. تأثير النص الواقعي لقص جوردون هول

يستخدم جوردون بعض سحر CSS المتقدم ليعطي ليس فقط ظلًا خارجيًا، بل أيضًا ظلًا داخليًا واقعيًا:

جسم (
الخلفية: #cbcbcb؛ /* تغيير لون الخلفية */
}
.نص(
حجم الخط: 5em؛
اللون: شفاف؛
لون الخلفية: #666666;
-webkit-background-clip: نص؛
-moz-خلفية مقطع: النص؛
مقطع الخلفية: النص؛
ظل النص: rgba(255,255,255,0.5) 0px 3px 3px;
}

وهذا يخلق تأثير النص المقطوع.

موقع مثال

8. تأثير توهج النص

جسم(
الخلفية: #992d23؛ /* تغيير لون الخلفية */
}
.نص(
حجم الخط: 5em؛
اللون الابيض؛
ظل النص: 0px 0px 6px rgba(255,255,255,0.7);
}

ينشئ هذا الظل تأثيرًا متوهجًا على النص:

موقع مثال

9. تأثير النص المرتفع

جسم(
الخلفية: #629552؛ /* تغيير لون الخلفية */
}
.نص(
حجم الخط: 5em؛
اللون: رغبا (0،0،0،0.6)؛
ظل النص: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px رغبا (255,255,255,0.3);
}

موقع مثال

10. تأثير الظل الطويل

يمكن أن يتم هذا التأثير باستخدام

لون الخلفية: rgb(147, 201, 67);
ظل النص: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60)، 10px 10px rgb (131، 179، 60)، 11px 11px rgb (131، 179، 60)، 12px 12px rgb (131، 179، 60)، 13px 13px rgb (131، 179، 60)، 14px 14px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60) ) , 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb( 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60) ;
اللون: #eaeaea؛

موقع مثال

خاتمة

كما ترون، خاصية ظل النص سهلة الاستخدام للغاية ويمكنك استخدامها لإنشاء ظلال CSS الإبداعية الخاصة بك.

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

بناء جملة ظل النص الأساسي

هذا العقار CSS3يعمل في جميع المتصفحات الأحدث، بدون بادئات البائع مثل -moz و-webkit. حتى IE يمكن تعليمه كيفية فهم هذه الخاصية، فأنت بحاجة إلى استخدام Modernizr أو نظائرها.

ظل النص: لون تمويه إزاحة x وy؛

هذا كل بناء الجملة الأساسي. القيمة الأولى هي الإزاحة الأفقية، والثانية هي الإزاحة الرأسية وطمس الظل ولون الظل. لنلقي نظرة على مثال:

ظل النص: 2px 4px 3px rgba(0,0,0,0.3);

قمنا بتحريك الظل وطمسه بمقدار 3 بكسل وتخصيص اللون الأسود بشفافية 30٪. لماذا أستخدم قناة ألفا أو الشفافية؟ ويمنحك هذا مزيدًا من الحرية في تصرفاتك؛ ويمكنك جعلها أفتح أو أغمق قليلًا ببساطة عن طريق تغيير قيمة الشفافية، دون الحاجة إلى القلق بشأن اختيار اللون. اتضح بسرعة كبيرة، أوصي به.

الحروف المكتئبة

الجسم ( الخلفية: #222; ) #text h1 ( اللون: rgba(0,0,0,0.6); ظل النص: 2px 2px 3px rgba(255,255,255,0.1); )

مبدأ العمل هنا هو: الخلفية أفتح قليلاً من الحروف، وظل خفيف مع شفافية طفيفة. النتيجة في الصورة، جربها.

الظل الصلب

ظل النص: 6px 6px 0px rgba(0,0,0,0.2);

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

ظل مزدوج

ظل النص: 4px 3px 0px #fff، 9px 8px 0px rgba(0,0,0,0.15);

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

أسفل وبعيدا

ظل النص: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1) );

النص ضخم ويبدو أنه معلق فوق الخلفية، أليس كذلك؟ نستخدم هنا 4 ظلال بمستويات مختلفة من التمويه والموقع. بشكل عام، كلما زاد عدد الظلال المستخدمة، كلما كان التأثير أكثر واقعية؛ ضع ذلك في الاعتبار في مشاريعك.

نص ثلاثي الأبعاد صغير

ظل النص: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

على غرار المثال السابق، هناك ثلاثة ظلال، ولكنها تقع بشكل أقرب، ومن هنا تأثير الأبعاد الثلاثية وثقل النص.

نص ثلاثي الأبعاد لمارك دوتو

ظل النص: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0) ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

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

نص ذو مسافة بادئة بواسطة Gordon Hall

لون الخلفية: #666666; -webkit-background-clip: نص؛ -moz-خلفية مقطع: النص؛ مقطع الخلفية: النص؛ اللون: شفاف؛ ظل النص: rgba(255,255,255,0.5) 0px 3px 3px;

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

تألق النص

ظل النص: 0px 0px 6px rgba(255,255,255,0.7);

هنا أيضًا كل شيء بسيط - نحن لا نحرك الظل، بل نطمسه بقوة أكبر ونجعله أبيضًا. هذا كل شيء تألق.

نمط الرجعية

ظل النص: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

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

مصادر ضوء متعددة

ظل النص: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

وهنا تأثير مصادر الضوء المتعددة التي تعطي الظلال في كل الاتجاهات.

نص مرفوع

اللون: رغبا (0،0،0،0.6)؛ ظل النص: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

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

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

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

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

الظل ( المساحة المتروكة: 20 بكسل؛ الحد: 1 بكسل صلب #f0f0f0؛ الحد السفلي: 2 بكسل صلب #ccc؛ -webkit-border-radius: 5px؛ -moz-border-radius: 5px؛ border-radius: 5px; )

من السهل أيضًا تحقيق تأثير الكتلة المنبعجة. تؤدي إضافة زوايا CSS3 الدائرية إلى تحسين التأثير:

مضغوط (اللون: #fff؛ الحشو: 20 بكسل؛ الخلفية: #111؛ الحد: 1 بكسل صلب #000؛ الحد الأيمن: 1 بكسل صلب #353535؛ الحد السفلي: 1 بكسل صلب #353535؛ -نصف قطر حدود الويب: 5 بكسل؛ -نصف قطر الحدود: 5 بكسل؛

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

Img.light (المخطط التفصيلي: 1px Solid #ddd؛ الحد العلوي: 1px Solid #fff؛ الحشو: 10px؛ الخلفية: #f0f0f0؛) img.dark (المخطط التفصيلي: 1px Solid #111؛ الحد العلوي: 1px Solid #555؛ الحشو: 10 بكسل الخلفية: #333؛

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

#مسافة بادئة لـ ul (الهامش: 20 بكسل 0؛ الحشو: 0؛ نمط القائمة: لا شيء؛) #مسافة بادئة لـ ul li (الحدود العلوية: 1 بكسل صلبة #333؛ الحدود السفلية: 1 بكسل صلبة #111؛) #مسافة بادئة لـ ul li:أولًا -طفل (الحد العلوي: لا شيء؛) # مسافة بادئة ul li: آخر طفل (الحد السفلي: لا شيء؛) # مسافة بادئة ul li a ( الحشو: 10 بكسل؛ العرض: كتلة؛ اللون: #fff؛ زخرفة النص: لا شيء ) #مسافة بادئة ul li a:hover (الخلفية: #111;)

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

سيكون من المفيد أن تكون لديك مهارات في العمل مع ظلال النص في ترسانة التقنيات الخاصة بك.

مهمة

إنشاء ظل للنص باستخدام CSS، دون استخدام الصور. ماذا سنحقق بهذا؟

المرونة - لا توجد صور مطلوبة، النص سهل التغيير
السرعة - عدد أقل من الصور - وزن أقل للصفحة، عدد أقل من المكالمات إلى الخادم
تحسين محركات البحث (SEO) - يتم تحسين النص بشكل أفضل من الصور، وهو أكثر موثوقية من استخدام تقنية استبدال النص بصورة

ظلال النص للمتصفحات العادية

تتضمن المتصفحات العادية جميع المتصفحات الحديثة التي تتوافق بشكل أو بآخر مع توصيات W3C. في هذه الحالة، تفهم هذه المتصفحات خاصية ظل النص CSS3، والتي تمت التوصية بها في عام 2003.

لذا، إليك قائمة بالمتصفحات التي تدعم خاصية ظل النص:

Safari 3.1 (Mac/Win) - يدعم ولا يدعم الظلال المتعددة
Safari 4 (Mac/Win) - مدعوم بالكامل
Opera 9.5+ (Mac/Win/Lin) - يدعم بشكل كامل
Firefox 3.1/3.5 (Mac/Win/Lin) - يدعم بشكل كامل
جوجل كروم 2 (وين) - مدعوم بالكامل
Shiira (Mac) - يدعم ولا يدعم الظلال المتعددة
كونكيورر (لين/ماك/وين) - يدعم بشكل كامل
iCab (Mac) - يدعم ولا يدعم الظلال المتعددة
Safari على iPhone - مدعوم، والظلال المتعددة غير مدعومة
هواتف Nokia Symbian الذكية (السلسلة 60) - يدعم
Opera Mini 4.1 - يدعم، لا يدعم طمس الظل

بالنسبة لهذه المتصفحات، يكفي سطر واحد من CSS لتظليل النص:

H1 (ظل النص: 0px 1px 3px #000;)

نحصل على هذا العنوان الرائع:

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

نص غير واضح

H1 (اللون: #fff؛ الخلفية: #666؛ ظل النص: 0px 0px 3px #fff;)

نص مكرر

H1 (ظل النص: 0px 20px #000;)

تتيح لك الظلال المتعددة تحقيق العديد من التأثيرات الإضافية:

نص راحة

H1 ( الخلفية: #ccc؛ اللون: #ccc؛ ظل النص: -1px -1px #666، 1px 1px #FFF؛ عائلة الخط: serif؛ )

نص مرفوع

H1 ( الخلفية: #999؛ اللون: #999؛ ظل النص: 1px 1px 3px #666، -1px -1px 3px #FFF، 1px 1px #666، -1px -1px #FFF؛ عائلة الخط: serif؛ )

(IE لن يسمح لك بالاستمتاع بالجمال هنا، لأنه لا يدعم ظل النص). يمكنك التوصل إلى الكثير من التأثيرات المختلفة باستخدام ظل النص، والقيد العملي الوحيد هو خيالك.

الآن عن الشيء المحزن - ماذا تفعل مع IE "المفضل" لدى الجميع؟

ظلال النص في IE

على الرغم من أن IE حتى الإصدار 8 لا يفهم ظل النص، إلا أنه يحتوي على الكثير من "الأجراس والصفارات" الخاصة به. على وجه الخصوص، يوجد مرشح dropShadow() لإنشاء الظلال. لكي تظهر الظلال، يجب أن يكون للعنصر مجموعة تخطيط. يمكنك التثبيت بعدة طرق:

عن طريق تعيين خصائص العنصر: block + height() أو width())
إعطاء العنصر : مطلق
عن طريق تحديد: يسار/يمين
ضبط التكبير: 1

H1 ( عامل التصفية:progid:DXImageTransform.Microsoft.DropShadow(color = "#666666"، offX=2،offY=2،positive = "true")؛ التكبير/التصغير: 1؛ )

يبدو أنه يمكن للمرء أن يصرخ "مرحى !!!" واستمتع بالحياة، لكن انظر كيف يعمل هذا الفلتر في الواقع:

هذه هي الطريقة التي سيظهر بها النص إذا قمت بتطبيق مرشح dropShadow عليه

لمن لم يفهم، إليكم عيوب هذا الفلتر:

يبدو الظل فظيعًا: زاويًا، ولا يوجد انتقال سلس إلى الخلفية ذات الشفافية
نمط الخط مشوه
من المستحيل عمليًا ضبط الظل (يمكنك التحكم فقط في موضع الظل) - يمكن التحايل على ذلك جزئيًا باستخدام مرشح الظل بدلاً من dropShadow، ولكن يظل العيبان الأولان الحاسمان قائمين
الوجود الإلزامي للتخطيط يحد إلى حد ما من المطور

هذه النتيجة غير مقبولة في المشاريع الحقيقية. ليس من الواضح من وكيف تولى هذا العمل من المطورين.

اقترح كيليان فالكوف استخدام محاكاة الظل:

لا تقم بتطبيق المرشح مباشرة على النص
استخدم مجموعة من مرشحات التوهج والتمويه بدلاً من DropShadow والظل

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

رأس الاختبارТестовый заголовок

H1 (ظل النص: 3px 3px 3px #cccccc؛ الموضع: نسبي؛ التكبير/التصغير: 1؛ اللون: #000؛) h1span (الموضع: مطلق؛ اليسار: -3px؛ الأعلى: -3px؛ مؤشر z: -1؛ عامل التصفية: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3,enabled="true" ; Zoom: 1;

ولكن حتى مع هذا النهج، لا يزال هناك عدد من العيوب:

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

لإنشاء ظلال لـ IE، يمكنك استخدام جافا سكريبت (ليست المرة الأولى التي ينقذ فيها جافا سكريبت الموقف)

ظلال النص باستخدام جافا سكريبت

من النصوص التي اختبرتها، اخترت البرنامج المساعد jquery "Drop Shadow". مزاياها:

يحاكي الظلال عن طريق إدراج حاويات متعددة، أي. دون استخدام المرشحات لIE. وهذا يجعل من الممكن جعل الظلال في IE مشابهة قدر الإمكان للمتصفحات الأخرى + لا داعي للقلق بشأن تخطيط IE
يخلق الظلال ليس فقط لـ IE، والتي يمكن أن تكون مفيدة في بعض الأحيان
البرنامج النصي خفيف الوزن - 4 كيلو بايت (إذا قمت بإزالة التعليقات من الكود)، وإذا قمت بتطبيق الضغط، فسيكون أقل. هناك متطلبات في كتابة البرنامج النصي - وجود البرنامج النصي jquery.dimensions.js، ولكن ما زلت لا أفهم سبب الحاجة إليه. يتم إنشاء الظلال وحذفها وتحديدها بواسطة المعرف وبدونه.
بسيطة وواضحة للاستخدام
يمكنك محاكاة ظلال متعددة مع بعض النجاح

عيوب:

لا يمكنك تهيئة البرنامج النصي بواسطة معرف العنصر
إذا تم إعطاء العنصر خلفية، فسيتم إنشاء الظل ليس للنص، ولكن للعنصر ككل
التضمين الإلزامي لمكتبة jquery (التي يزيد حجمها عن 50 كيلو بايت). لكن شعبية jquery تقضي عمليا على هذا العيب
وفقًا لوصف البرنامج النصي، يلزم أيضًا اتصال jquery.dimensions.js (2 كيلو بايت أخرى). لكنني لا أفهم سبب الحاجة إلى هذه المكتبة، يبدو أن كل شيء يعمل بشكل جيد بدونها

باستخدام البرنامج المساعد Drop Shadow

بناء الجملة:

JQuery(selector).dropShadow(options); // إنشاء ظل على العنصر jQuery(selector).redrawShadow(); // إعادة رسم الظل jQuery(selector).removeShadow(); // إزالة الظل jQuery(selector).shadowId(); // يُرجع معرف ظل العنصر

اليسار: [عدد صحيح] (افتراضي = 4) أعلى: [عدد صحيح] (افتراضي = 4) طمس: [عدد صحيح] (افتراضي = 2) العتامة: [رقم كسري] (افتراضي = 0.5) اللون: [سلسلة] (افتراضي = " أسود") مبادلة: [منطقية] (افتراضي = خطأ)

المعلمات اليسرى والعليا هي إحداثيات بداية الظل بالنسبة إلى الزاوية اليسرى العليا من التسمية (أو الكائن). القيم الموجبة تحرك الظل إلى اليمين وإلى الأسفل، والقيم السالبة تحرك الظل إلى اليسار وإلى الأعلى.

تحتوي الوحدة على ميزات CSS المتعلقة بنمط النص، مثل التسطير وظلال النص ولهجات النص الشرق آسيوية.

خصائص تصميم النص

1. تصميم الخط: تسطير، وسكتة دماغية، ويتوسطه خط

يتم عرض التسطير والحدود وخطوط الشطب فقط للكتل على مستوى السطر غير المستبدلة (العرض: مضمن) ويتم عرضها في كل النص، بما في ذلك المسافات بين الأحرف والكلمات، باستثناء المسافة البادئة في بداية السطر ونهايته.

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

أرز. 1. كسر التسطير

1.1. نوع خط الزخرفة: خاصية خط زخرفة النص

دعم المتصفح

أي: —
حافة: —
ثعلب النار: 36, 35 -موز-
كروم: 57
سفاري: 12.1، 7.1 -ويبكيت-
الأوبرا: 44
سفاري iOS: 8 -مجموعة الويب-
متصفح UC للاندرويد: 11.8
كروم لنظام أندرويد: 73
إنترنت سامسونج: 7.2

تحدد الخاصية text-decoration-line نوع الخط، إن وجد، الذي سيتم إضافته إلى العنصر.

الملكية ليست موروثة.

بناء الجملة

خط زخرفة النص: لا شيء؛ خط زخرفة النص: تسطير؛ خط زخرفة النص: خط علوي؛ خط زخرفة النص: خط من خلال؛ خط زخرفة النص: وميض؛ خط زخرفة النص: تسطير فوق السطر؛ خط زخرفة النص: تسطير تسطير خط من خلال؛ خط زخرفة النص: يرث؛ خط زخرفة النص: الأولي؛

1.2. نمط خط الزخرفة: خاصية نمط زخرفة النص

دعم المتصفح

أي: —
حافة: —
ثعلب النار: 36, 35 -موز-
كروم: 57
سفاري: 12.1، 7.1 -ويبكيت-
الأوبرا: 44
سفاري iOS: 8 -مجموعة الويب-
متصفح UC للاندرويد: 11.8
كروم لنظام أندرويد: 73
إنترنت سامسونج: 7.2

تحدد الخاصية text-decoration-style نمط الخطوط المرسومة لتزيين النص المحدد في العنصر. القيم لها نفس المعنى بالنسبة لخاصية نمط الحدود.

الملكية ليست موروثة.

بناء الجملة

نمط زخرفة النص: صلب؛ نمط زخرفة النص: مزدوج؛ نمط زخرفة النص: منقط؛ نمط زخرفة النص: متقطع؛ نمط زخرفة النص: متموج؛ نمط زخرفة النص: وراثة؛ نمط زخرفة النص: أولي؛

1.3. لون خط الزخرفة: خاصية لون زخرفة النص

دعم المتصفح

أي: —
حافة: —
ثعلب النار: 36, 35 -موز-
كروم: 57
سفاري: 12.1، 7.1 -ويبكيت-
الأوبرا: 44
سفاري iOS: 8 -مجموعة الويب-
متصفح UC للاندرويد: 11.8
كروم لنظام أندرويد: 73
إنترنت سامسونج: 7.2

تحدد الخاصية text-decoration-color لون خط زخرفة النص المحدد لعنصر يحتوي على text-decoration-line .

الملكية ليست موروثة.

بناء الجملة

لون زخرفة النص: اللون الحالي؛ لون زخرفة النص: سمك السلمون؛ لون زخرفة النص: #00ff00؛ لون زخرفة النص: rgba(255, 128, 128, 0.5); لون زخرفة النص: شفاف؛ لون زخرفة النص: وراثة؛ لون زخرفة النص: أولي؛

1.4. ملخص سريع لخصائص خط الزخرفة: خاصية زخرفة النص

دعم المتصفح

أي: —
حافة: —
ثعلب النار: 36, 35 -موز-
كروم: 57
سفاري: 12.1، 7.1 -ويبكيت-
الأوبرا: 44
سفاري iOS: 8 -مجموعة الويب-
متصفح UC للاندرويد: 11.8
كروم لنظام أندرويد: 73
إنترنت سامسونج: 7.2

الخاصية text-decoration هي شكل قصير لكتابة خصائص text-decoration-line text-decoration-style text-decoration-color في إعلان واحد. يتم تعيين القيم المفقودة على قيمها الأولية. القيمة الافتراضية لتزيين النص: لا يوجد لون ثابت ثابت؛ . الملكية ليست موروثة. ومع ذلك، يجب أن يكون نمط كافة أسطر النص هو نفسه بالنسبة لعنصر واحد.

1.5. موضع خط التصميم: خاصية موضع النص تحت السطر

دعم المتصفح

أي: —
حافة: 12
ثعلب النار: —
كروم: 71
سفاري: —
الأوبرا: —
سفاري iOS: —
متصفح UC للاندرويد: ?
كروم لنظام أندرويد: 71
إنترنت سامسونج: —

تقوم الخاصية text-underline-position بتعيين موضع التسطير المحدد في العنصر.

الملكية موروثة.


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

بناء الجملة

موضع تسطير النص: تلقائي؛ نص تسطير الموقف: تحت؛ موقف تسطير النص: اليسار؛ موقف تسطير النص: حق؛ موقف تسطير النص: تحت اليسار؛ نص تسطير الموقف: تحت اليمين؛ موقف تسطير النص: وراثة؛ نص تسطير الموقف: الأولي؛ أرز. 2. قم بوضع خط تحت النص على كلا الجانبين في أوضاع الطباعة الرأسية باستخدام القيم اليسرى واليمنى

2. ظل النص: خاصية ظل النص

دعم المتصفح

أي: 10
حافة: 12
ثعلب النار: 3.5
كروم: 4
سفاري: 4
الأوبرا: 10
سفاري iOS: 3.2
متصفح UC للاندرويد: 11.8
كروم لنظام أندرويد: 73
إنترنت سامسونج: 4

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

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

يتم تعريف كل ظل بطولين أو ثلاثة ولون اختياري. يُسمح بأطوال تساوي 0.

الملكية ليست موروثة.

أرز. 3. بناء جملة خاصية ظل النص

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

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

بناء الجملة

ظل النص: 2 بكسل 2 بكسل 4 بكسل وردي؛ ظل النص: #fc0 1px 0 10px; ظل النص: 5px 5px #4D4644؛ ظل النص: أزرق 2 بكسل 5 بكسل؛ ظل النص: 5 بكسل 10 بكسل؛ ظل النص: يرث؛ ظل النص: الأولي؛

2.1. أمثلة الظل النص

ظل الملصق

ظل النص

ظل النص-1 ( الخلفية: #77F7DE؛ اللون: أبيض؛ ظل النص: -2px -2px 0 #4D4644، 2px -2px 0 #4D4644، -2px 2px 0 #4D4644، 2px 2px 0 #4D4644، 4px 4px 0 أبيض، 5 بكسل 5 بكسل 0 أبيض، 6 بكسل 6 بكسل 0 أبيض؛

ظل ثلاثي الأبعاد

ظل النص

ظل النص-2 ( الخلفية: تدرج خطي (-45 درجة، #FEE864، #F5965E)؛ اللون: #f4f4f4؛ ظل النص: -1px -1px أبيض، 1px 1px رمادي، 2px 2px #7a7a7a، 3px 3px #757575 ، 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px رغبا (0، 0، 0, .4), 18px 18px 10px rgba(0, 0, 0, .4 )

نص الظل

ظل النص

ظل النص-3 ( الخلفية: #FFE6DB؛ اللون: #FFE6DB؛ تباعد الحروف: .1em؛ ظل النص: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142) , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);

الظل الرجعية

ظل النص

ظل النص-4 (اللون: #FB631E؛ تباعد الأحرف: .1em؛ ظل النص: 4px 4px أبيض، 6px 6px #D7CC88;)

الظل الطبقات

ظل النص

ظل النص-5 ( الخلفية: #f1f1f1؛ اللون: #fcc105؛ تباعد الحروف: .1em؛ ظل النص: 4px 4px #ff981d، 7px 7px rgba(200, 120, 22, .2); )

أمثلة الظل النص. CSS: عدة تقنيات لتأثيرات السكتة الدماغية المختلفة

1. الإعداد الأساسي

مع فئة النص:

المهوسون رمز الويب

2. تأثير البصمة

3. تأثير الظل الرجعية

4. تأثير الظل المزدوج

5. تأثير الظل البعيد

6. تأثير ثلاثي الأبعاد لمارك دوتو

7. تأثير النص الواقعي لقص جوردون هول

8. تأثير توهج النص

9. تأثير النص المرتفع

10. تأثير الظل الطويل

خاتمة

بناء جملة ظل النص الأساسي

الحروف المكتئبة

الظل الصلب

ظل مزدوج

أسفل وبعيدا

نص ثلاثي الأبعاد صغير

نص ثلاثي الأبعاد لمارك دوتو

نص ذو مسافة بادئة بواسطة Gordon Hall

تألق النص

نمط الرجعية

مصادر ضوء متعددة

نص مرفوع

مهمة

ظلال النص للمتصفحات العادية

نص غير واضح

نص مكرر

نص راحة

نص مرفوع

ظلال النص في IE

رأس الاختبارТестовый заголовок

ظلال النص باستخدام جافا سكريبت

باستخدام البرنامج المساعد Drop Shadow

خصائص تصميم النص

1. تصميم الخط: تسطير، وسكتة دماغية، ويتوسطه خط

1.1. نوع خط الزخرفة: خاصية خط زخرفة النص

دعم المتصفح

1.2. نمط خط الزخرفة: خاصية نمط زخرفة النص

دعم المتصفح

1.3. لون خط الزخرفة: خاصية لون زخرفة النص

دعم المتصفح

1.4. ملخص سريع لخصائص خط الزخرفة: خاصية زخرفة النص

دعم المتصفح

1.5. موضع خط التصميم: خاصية موضع النص تحت السطر

دعم المتصفح

2. ظل النص: خاصية ظل النص

دعم المتصفح

2.1. أمثلة الظل النص

ظل الملصق

ظل ثلاثي الأبعاد

نص الظل

الظل الرجعية

الظل الطبقات