فى بى ايجى لدروس و شروحات المواقع و المنتديات دروس و شروحات خاصة بالمنتدى و تطوير المواقع |
LinkBack | أدوات الموضوع | انواع عرض الموضوع |
![]() |
#1 (permalink) | |||||
عضو ممتاز
![]() ![]() ![]() ![]() ![]()
|
![]() الكثير لا يعلم كيفية استخدام خاصية text-shadow من خلال CSS, نظراً لأن تلك الميزة لم تتوفر من خلال المتصفحات على نظام Windows و كانت أكثر و أوسع انتشار في نظام Mac OS X Leopard إلا منذ فترة بسيطة عندما ظهرت متصفحات تدعم تلك الخاصية في بيئة عملها مثل Firefox 3.1 . خاصية text-shadow تقوم بإضافة ظل للنصوص التي تُستخدم فيها و قد توفرت لأول مرة في CSS2 و لم تدعمها كل المتصفحات إلا أن اتجاه المتصفحات الآن لدعم CSS3 سيضيف الكثير من المميزات التي تتوفر فيها . الهدف الأساسي هو إعطاء شكل جميل للنصوص , و الطريقة القديمة للقيام بذلك هو تكوين النص في هيئة صورة باستخدام أي برنامج يضيف مثل تلك التأثيرات (Photoshop) , و كانت بالتالي تأخذ حجماً أكبر في تحميل الصفحة بالإضافة إلى عدم مقدرة محركات البحث على قراءة النصوص بالصور . في الوقت الحالي فجميع المتصفحات باستثناء انترنت اكسبلورر تدعم خاصية text-shadow , و محاولات مايكروسوفت لتكوين قواعد خاصة بها لمثل تلك التأثيرات لا تعطي الشكل الأفضل مثل ظهورها على متصفحات أخرى كـ Safari و Firefox 3.1 . كيفية استخدام text-shadow يتم إضافة التأثير لملف CSS بالشكل التالي ( مع اختلاف ما يتم التطبيق عليه ) : كود:
p {text-shadow:1px1px1px#000;} أول قيمتين يتم من خلالهما تحديد طول الظل الذي يظهر . فأول قيمة تحدد المسافة الأفقية و ثاني قيمة تحدد المسافة الرأسية . القيمة الثالثة تحدد مدى إخفاء معالم الظل (Blur) و القيمة الأخيرة تحدد لون الظل . أمثلة على text-shadow ![]() كود:
text-shadow:2px-2px3px#000; ..... ![]() كود:
color:#fff; background:#666; text-shadow:0px2px4px#000; .... ![]() كود:
color:#fff; background:#ccc; text-shadow:0px5px5px#000; .. نقلته للأفادهـ |
|||||
![]() |
![]() |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
النصوص, تعليم, shadow, text, طريقة |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
![]() فى بى ايجى التطويرية |
||||