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

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

الملاحظات

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

آخر 10 مشاركات افعل الخير ولا تنظر جزاءه الا من الله (الكاتـب : admin - مشاركات : 0 - المشاهدات : 55 - الوقت: 08:12 PM - التاريخ: 07-27-2021)           »          دليلك لبناء الباك لينك Backlink لموقعك بطريقة صحيحة (الكاتـب : admin - مشاركات : 2 - المشاهدات : 297 - الوقت: 10:15 PM - التاريخ: 07-26-2021)           »          ملف ال robots.txt وتوجيه عناكب محركات البحث لموقعك (الكاتـب : admin - مشاركات : 2 - المشاهدات : 361 - الوقت: 01:24 PM - التاريخ: 07-21-2021)           »          أهلا وسهلا أليت تيم رياك (الكاتـب : رياك مشار - مشاركات : 2 - المشاهدات : 293 - الوقت: 05:58 PM - التاريخ: 07-03-2021)           »          تحميل لعبة فرايدي نايت فانكن Friday Night Funkin للكمبيوتر 2021 (الكاتـب : الادارة كريم - آخر مشاركة : admin - مشاركات : 2 - المشاهدات : 550 - الوقت: 10:41 PM - التاريخ: 07-01-2021)           »          برنامج البيع بالتقسيط مجاني مصمم بالاكسيس (الكاتـب : ابن الوليد - آخر مشاركة : admin - مشاركات : 1 - المشاهدات : 666 - الوقت: 04:37 AM - التاريخ: 06-25-2021)           »          الصحابي الجليل سعد بن معاذ الأنصاري (الكاتـب : admin - مشاركات : 0 - المشاهدات : 313 - الوقت: 01:25 AM - التاريخ: 06-25-2021)           »          كيفية صلاة الحاجة (الكاتـب : admin - مشاركات : 0 - المشاهدات : 281 - الوقت: 12:13 AM - التاريخ: 06-25-2021)           »          Format FactoryV5.7.5.0 (الكاتـب : admin - مشاركات : 0 - المشاهدات : 326 - الوقت: 11:01 PM - التاريخ: 06-24-2021)           »          رجل أقسم بأن لا يتزوج حتى يشاور مائة رجل (الكاتـب : admin - مشاركات : 0 - المشاهدات : 328 - الوقت: 09:57 PM - التاريخ: 06-24-2021)

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 05-29-2021, 03:20 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 18
الادارة كريم 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

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


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