تطوير المواقعووردبريس

css: ظل النص

محتوى المقالة إخفاء

السلام عليكم …

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

في البداية لم أتطرق لطرح أي موضوع عن صفحات الانماط الانسابية أو (المتعاقبة) CSS وهي اختصار لـ Cascading Style Sheets بسبب كثرتها على الانترنت وتطرق العديد من المواقع لها فالباحث عنها سيجد أكثر من موقع يقوم بشرحها له وكانت بدايتي بهذا الموضوع البسيط وإن شاء الله يكون مفيد للجميع .

لنبدأ بالمثال التالي [ وإن لم يظهر لك ظل النص فجرب استخدام متصفح حديث غير الاكسبلورر اذا كان لديك وقد لا يظهر الظل أيضاً في اكسبلورر 8 ]

Text Shadow

قد يعتقد البعض أن المثال السابق عبارة عن صورة وهو في الحقيقة نص ويمكنك التأكد من ذلك بتحديده بالفأرة (الماوس) .

لكي تتمكن من فعل ذلك عليك استخدام خاصية text-shadow بثلاثة قيم متحركة الأولى (x-offset) لتحريك الظل يمين ويسار ، والثانية (y-offset) لتحريك الظل يمين ويسار ، والثالثة (blur) البقعة أو الصبغة وفي الأخير سيتوجب عليك اضافة لون الظل


وهذين كودين الاكسبلورر

قم بتجربة أحدهما لترى بنفسك !!
ويمكنك الرجوع لهذا الموقع لرؤية المثال والمزيد من المعلومات عن كود الاكسبلورر
http://www.howtocreate.co.uk/textshadow.html

يمكنك أيضاً القراءة في ظل النص خاصية جديدة في css | مدونة احمد حموده

الاشتراك في النشرة البريدية
اشترك في المجموعة البريدية لتصلك آخر المقالات على البريد الالكتروني
سيتم ارسال بريد الكتروني لتأكيد الاشتراك

اقرأ المقالات

‫8 تعليقات

  1. السلام عليكم ورحمة الله
    أخي بارك الله فيك على الفوائد الفياضة في مدونتك
    لقد أفدتني كثيرا كوني مبتدأ في مجال التدوين ولغات الويب

    غير أني أريد منك طلب اذا سمحت وهو حبذا لو توضح كيفية إضافة الكود
    …في اي ملف…والمكان
    ولك أطيب المنى

    1. الكود ليس له مكان محدد .. أما بالنسبة للملف فالغالب هو ملف style.css .
      بإمكانك انشاء ظل نص بدون ان تقوم بوضع الكود السابق في ملف style.css بالتحديد وإنما مباشرة مع الجملة

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

أنت توافق على نشر تعليقك وحفظ بياناتك.

زر الذهاب إلى الأعلى