الرئيسية المنتدى مركز رفع الصور صفحتنا على الفيس قناة اليوتيوب صفحتنا على تويتر واتس اب قوانين المنتدى
منتدى مجمع التطوير    

العودة   منتدى مجمع التطوير > المنتدى المتخصص > لغـات البرمجـة والمشـاريع الجـاهزة > برمجة الويب web development

الملاحظات

برمجة الويب web development يهتم ببرامج الويب php, Sql, Java ,asp.net ,xml ,html

آخر 10 مشاركات البث القديم بتاعنا 2015 (الكاتـب : رياك مشار - مشاركات : 0 - المشاهدات : 151 - الوقت: 03:37 PM - التاريخ: 10-28-2021)           »          دراسات جدوى التمويليه لجميع المشاريع الإستثماريه (الكاتـب : مشاريعي - مشاركات : 0 - المشاهدات : 123 - الوقت: 11:42 AM - التاريخ: 10-28-2021)           »          مواقع للحصول على باك لينكس عالية (الكاتـب : admin - آخر مشاركة : سنبول - مشاركات : 1 - المشاهدات : 2334 - الوقت: 10:19 PM - التاريخ: 09-23-2021)           »          التقليد المذموم (الكاتـب : admin - مشاركات : 0 - المشاهدات : 493 - الوقت: 06:44 PM - التاريخ: 09-06-2021)           »          الخداع (الكاتـب : admin - مشاركات : 0 - المشاهدات : 371 - الوقت: 06:43 PM - التاريخ: 09-06-2021)           »          إعلانات شركة Admaven (الكاتـب : سنبول - مشاركات : 0 - المشاهدات : 513 - الوقت: 04:20 PM - التاريخ: 08-26-2021)           »          جدار روحك يريد أن ينقض (الكاتـب : admin - مشاركات : 0 - المشاهدات : 559 - الوقت: 11:27 PM - التاريخ: 08-23-2021)           »          سعر الذهب في مصر وعالميا صباح اليوم الخميس 12 أغسطس 2021 (الكاتـب : admin - مشاركات : 0 - المشاهدات : 529 - الوقت: 02:58 PM - التاريخ: 08-12-2021)           »          تأملت والدنيا (الكاتـب : admin - مشاركات : 0 - المشاهدات : 568 - الوقت: 10:54 PM - التاريخ: 08-03-2021)           »          وكن راضيا (الكاتـب : admin - مشاركات : 0 - المشاهدات : 555 - الوقت: 10:54 PM - التاريخ: 08-03-2021)

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 05-29-2021, 03:20 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 24
الادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to behold


افتراضي أساسيات لغة css | الدرس 18 (تأثير الظل)

 

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

لعمل تأثير الظل في لغة css هناك خاصيتان ، إحداهما خاصة بالنصوص texts والثانية خاصة بحدود العناصر.






الخاصية text-shadow : تستخدم لإبراز تأثير الظل مع النصوص ، وتأخذ ثلاث قيم رقمية ب px أو em أو % ، تمثل الأولى إتجاه الظل على المحور الأفقي x ، والثانية إتجاه الظل على المحور العمودي y ، والثالثة درجة انتشار الظل ، والتلاعب بالقيم يسمح بتحديد شكل الظهور الذي نريد . ويمكن تجاهل القيمة الثالثة فيحددها المتصفح افتراضيا ، وهناك أيضا قيمة رابعة نحدد بها لون الظل يمكن تجاهلها كذلك فيظهر الظل بلون النص.


وكعادتنا نمر إلى التطبيق كأفضل وسيلة للفهم الصحيح.
ليكن كود html التالي:





والتنسيق التالي:





والنتيجة:





عندما حددنا قيمة موجبة للمحور x الأفقي ذهب الظل في اتجاه الصفحة من اليسار إلى اليمين ، لو وضعنا القيمة سالبة لذهب في الإتجاه المعاكس ، نفس الشيء يقال عن الإتجاه y العمودي .


وفي المثال الأخير حددنا قيمة للإنتشار فقط بينما أعطينا القيمة 0 للمحورين x و y فاتجه الظل بنفس درجة الإنتشار في كل الإتجاهات.



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



ليكن كود html التالي:





والتنسيق التالي:





والنتيجة:





وكما ترى الظل حول العنوان h3 بنسبة متساوية لأننا حددنا للمحورين x و y القيمة 0 ، بينما ظهر الظل في اتجاهين فقط مع العنصر div لأننا حددنا قيمة موجبة للمحورين x و y ولو حددنا قيمة سالبة لإحداها لظهر في الإتجاه المقابل .


ومع input من النوع text والنوع email تعمدت تبديل القيمتين مابين الإنتشار والحجم حتى يتضح الفرق بينهما.



وتذكيرا بما ذكرناه في الدرس الماضي عن الخصائص الجديدة التي جاءت بها css3 ينبغي استخدام البادئات لحل مشاكل المتصفحات مع خاصية الظل ، فنكتب:



text-shadow
moz-text-shadow-
webkit-text-shadow-
ms-text-shadow-
o-text-shadow-

كما نكتب:

box-shadow
moz-box-shadow-
webkit-box-shadow-
ms-box-shadow-
o-box-shadow-

موعدنا في الدرس القادم مع التدرج في الألوان ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.


الموضوع الأصلي : أساسيات لغة css | الدرس 18 (تأثير الظل) || الكاتب : الادارة كريم || المصدر : منتدى مجمع التطوير

 

رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

 

موقع ومنتديات مجمع التطوير موقع يختص بالبرمجة والبرامج المساعدة  للتصاميم والأدوات المساعدة ,مع تقديم العون والمساعدة لكل مبرمج من خلال الأقسام المحددة , كما نعرض الأعمال الجاهزة والمفتوحة المصدر. ويهتم أيضا بالتصاميم والجرافيك وبرامجها وعرض التصاميم وملحقات التصاميم والأدوات المساعدة .كما نتمنى التوفيق لنا ولكم مع أجمل تحية مقدمة منا. 

  • الرئــيســية

  • الــمنــتـدى

  • مركز الرفع

  • التسـجـيل

  • قوانين المنتدى

  • التعـلـيمـات

  • الترقيات

check pagerank

 Flag Counter

كلمة الإدارة  منتدى مجمع التطوير غير مسئول عن أي طرح من الأعضاء فتلك الموضوعات تعبر عن رأى صاحبها ومن خلال وضع قوانين وتعليمات المشاركة بالمنتدى نسعى جاهدين لتطبيق تلك التعليمات. والمنتدى أيضا غير مسئول عن أي اتفاق مالي أو تجارى بين الأعضاء وبذلك تعد هذه الصيغة إخلاء مسئولية من جانب إدارة المنتدى وفقنا ووفقكم الله لما فيه الخير
 
الساعة الآن 07:30 PM


Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.
جميع الحقوق محفوظة لمجمع التطوير