قبل يومين، سألتني فتاة جميلة كانت تتعلم واجهة HTML5 الأمامية عن كيفية تحقيق تأثير ظل النص. أخبرتني عن ظل النص، وكانت تعرف أيضًا عن ظل النص، لكنها لم تتمكن من جعله يبدو بالطريقة التي تريدها. في الواقع، الميزات الجديدة لـ CSS3 قوية جدًا. لا تحد من تفكيرك كثيرًا. حسنًا، أيها القيل والقال، دون مزيد من اللغط، دعونا نلقي نظرة على ظل النص هذا أولاً.
1. ظل النصtext-shadow معلمات ظل النص: المعلمة 1: يتم استخدام قيمة الطول الأولى لتعيين قيمة الإزاحة الأفقية لظل الكائن. يمكن أن تكون سالبة المعلمة 2: يتم استخدام قيمة الطول الثاني لتعيين قيمة الإزاحة الرأسية لظل الكائن. يمكن أن تكون سالبة المعلمة 3: إذا تم توفير قيمة الطول الثالث، فسيتم استخدامها لتعيين قيمة تمويه الظل للكائن. القيم السالبة غير مسموح بها المعلمة 4: اضبط لون ظل الكائن
ظل النص: 10px 10px 50px #000؛
2. أمثلةكيف نحقق التأثير في الصورة أعلاه؟
هيكل HTML نمط CSS نمط الخط لون الخط ظل النص ثم دعونا نلقي نظرة على الكود المحدد:
HTML:
<div class=text>[آلاف الغضب] شانغ شيويتانغ</div>
CSS:
.text{ الخط: غامق 100px/1.5 'Microsoft Yahei'; 10بكسل 50بكسل #f00;*/الآن دعونا نلقي نظرة على كيفية عمل تأثير الجمال الصغير الذي يسألني على الواجهة الأمامية..
إنه في الواقع بسيط جدًا، فلننتقل مباشرة إلى الكود ~
HTML:
<div class=text>[آلاف الغضب] شانغ شيويتانغ</div>
CSS:
body { الخلفية: #000؛ اللون: #fff;}.text{ الخط: غامق 100px/1.5 Georgia, sans-serif;/*ألوان مختلفة، أحجام ضبابية لقيم مختلفة متعددة*/ text-shadow: 0 0 10px #fff , 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}انشر أفكارك في الواقع، أنماط CSS3 مثيرة جدًا للاهتمام في بعض الأحيان، يمكن أن يؤدي تغيير بسيط إلى تحقيق تأثيرات رائعة جدًا.^
تلخيصما ورد أعلاه هو مقدمة المحرر لاستخدام Html5 وCSS لتحقيق تأثيرات ظل النص، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!