سيوضح لك محرر Downcodes كيفية تنفيذ تأثير الظل متعدد الطبقات لـ CSS! في تصميم الويب، يمكن لطبقات الظل المتعددة أن تعزز الإحساس بالتسلسل الهرمي والجاذبية البصرية. ستشرح هذه المقالة بالتفصيل ثلاث طرق لتحقيق ظلال متعددة الطبقات: استخدام سمة box-shadow، واستخدام سمة المرشح، ومن خلال وضع عناصر متعددة في طبقات. سوف نتعمق في المزايا والعيوب، وبناء الجملة ونموذج التعليمات البرمجية لكل طريقة لمساعدتك على إتقان مهارات ظلال CSS متعددة الطبقات بسهولة، وتحسين مستوى تصميم الويب الخاص بك، وإنشاء تأثيرات بصرية أكثر جاذبية.
لتحقيق تأثيرات ظل متعددة الطبقات في CSS، تتضمن الطرق الرئيسية استخدام سمة box-shadow، واستخدام سمة المرشح، وتكديس عناصر متعددة. من بينها، يعد استخدام سمة box-shadow هو الأكثر مباشرة والأكثر استخدامًا. باستخدام خاصية box-shadow، يمكنك إنشاء تأثير ظل متعدد عن طريق تحديد مجموعات متعددة من قيم الظل، مفصولة بفواصل. المفتاح هو ضبط الإزاحة، ونصف القطر التمويه، ونصف القطر المنتشر، ولون كل مجموعة من الظلال بدقة لتحقيق التأثير البصري المطلوب. من خلال التحكم في هذه المعلمات، يمكنك إنشاء تأثيرات ظل غنية ومتنوعة، وبالتالي زيادة الطبقات والجاذبية المرئية لعناصر الصفحة.
تعد خاصية box-shadow أداة قوية في CSS لإضافة تأثيرات الظل، فهي تسمح بإضافة ظل واحد أو أكثر إلى إطار عنصر ما عن طريق تحديد الإزاحة الأفقية والإزاحة الرأسية ومسافة التمويه ونصف قطر الانتشار واللون لتخصيص الشكل. تأثير الظل. لتنفيذ ظلال متعددة، تحتاج فقط إلى إدراج مجموعات متعددة من القيم في نفس خاصية box-shadow، مفصولة بفواصل.
أولاً، دعونا نلقي نظرة على الصيغة الأساسية لـ box-shadow:
ظل الصندوق: لون انتشار طمس h-offset v-offset؛
يتحكم كل من h-offset (الإزاحة الأفقية) وv-offset (الإزاحة الرأسية) في اتجاه الظل. يحدد التمويه (مسافة التمويه) مدى ضبابية الظل. الانتشار (نصف قطر الانتشار) يمكن أن يجعل الظل أكبر أو أصغر. اللون يحدد لون الظل.لإنشاء تأثير ظل متعدد الطبقات، يمكنك كتابة كود CSS على النحو التالي:
.عنصر {
ظل الصندوق: 0px 5px 5px rgba(0,0,0,0.3),
10px 10px 10px رغبا (0،0،0،0.2)،
15px 15px 15px رغبا (0,0,0,0.1);
}
في هذا المثال، يعرض .element ثلاث طبقات من الظلال، لكل منها اتجاه وطمس ولون مختلف، مما يؤدي إلى إنشاء تأثير مرئي متعدد الطبقات.
توفر خاصية التصفية طريقة أخرى لإنشاء تأثيرات مشابهة للظلال. على الرغم من أنه يستخدم عادةً لتحقيق تأثيرات مثل التمويه وتغير اللون وما إلى ذلك، إلا أنه يمكن استخدام وظيفة المرشح: drop-shadow() لإنشاء تأثير ظل مشابه لتأثير box-shadow.
بناء جملة الدالة drop-shadow() كما يلي:
عامل التصفية: الظل المسقط (لون طمس الإزاحة h والإزاحة) ؛
تشبه معاملاتها معلمات box-shadow، لكن لاحظ أن drop-shadow() لا يمكنها تحديد نصف قطر الانتشار.
لتحقيق طبقات متعددة من الظلال، يمكنك تكديس وظائف Drop-shadow() المتعددة:
.عنصر {
عامل التصفية: الظل المسقط (0px 5px 5px rgba (0,0,0,0.3))
الظل المسقط (10px 10px 10px rgba(0,0,0,0.2))
الظل المسقط (15px 15px 15px rgba(0,0,0,0.1));
}
يتمثل الاختلاف الرئيسي بين هذا الأسلوب وbox-shadow في أن الظل يتم تطبيقه على المخطط التفصيلي المرئي للعنصر، وليس فقط على حافة نموذج الصندوق الخاص به.
إذا كنت بحاجة إلى تأثير ظل أكثر تعقيدًا أو تأثيرًا ذو شكل معين، فقد تحتاج إلى إنشائه يدويًا عن طريق وضع عناصر متعددة في طبقات وتحديد موضعها. هذه الطريقة أكثر مرونة ولكنها أيضًا أكثر تعقيدًا، وتتطلب عنصرًا إضافيًا لكل طبقة من الظلال والتحكم الدقيق فيها باستخدام تقنيات تحديد المواقع CSS.
على سبيل المثال، يمكنك استخدام عنصر زائف:before أو:after لكل طبقة ظل وتطبيق ظل مربع أو لون خلفية عليها لمحاكاة تأثير الظل:
.element::before، .element::after {
محتوى: ؛
الموقف: مطلق؛
/* إعدادات تحديد الموقع والحجم*/
}
العنصر::قبل {
ظل الصندوق: 0px 5px 5px rgba(0,0,0,0.3);
}
.العنصر::بعد {
صندوق الظل: 10px 10px 10px rgba(0,0,0,0.2);
}
هذه الطريقة مناسبة لتحقيق تأثيرات ظل مخصصة للغاية، خاصة عندما يتطلب الظل شكلاً أو موضعًا غير عادي.
يمكن أن يؤدي تحقيق تأثير ظل متعدد الطبقات إلى إضافة عمق وتفاصيل إلى تصميم الويب، ويوفر CSS مجموعة متنوعة من الطرق لتحقيق هذا التأثير. تُفضل خاصية ظل الصندوق لبساطتها ومرونتها، لكن خاصية التصفية وتقنية طبقات العناصر يدويًا توفر أيضًا حلولاً للاحتياجات الخاصة. من خلال تصميم الطبقات والألوان ومواضع الظلال بعناية، يمكنك إنشاء تأثيرات بصرية مثيرة للإعجاب تعمل على تحسين تجربة المستخدم.
كيفية استخدام أنماط CSS لإضافة تأثيرات ظل متعددة إلى العناصر؟
أولاً، قم بإضافة تأثير ظل بسيط للعنصر، باستخدام السمة "box-shadow". على سبيل المثال: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); يؤدي هذا إلى إنشاء تأثير ظل ضبابي قليلاً على الجانب السفلي والأيمن من العنصر. يمكننا بعد ذلك المتابعة لإضافة طبقات متعددة من تأثيرات الظل. ويمكن تحقيق ذلك عن طريق إضافة قيم متعددة إلى خاصية "box-shadow". تمثل كل قيمة طبقة ظل. على سبيل المثال: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(0, 0, 0, 0.3); يؤدي هذا إلى إنشاء ظلين بقوى مختلفة في الجانب السفلي والأيمن من مستوى العنصر. أخيرًا، استمر في إضافة المزيد من مستويات الظل عن طريق إضافة قيم "box-shadow" المتعددة بشكل متكرر. على سبيل المثال: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(0, 0, 0, 0.3), 6px 6px 12px rgba(0, 0, 0, 0.2); يمكنك إنشاء تأثير ظل بثلاث طبقات متفاوتة الشدة والضبابية.كيفية إنشاء تأثيرات خاصة باستخدام تأثيرات الظل متعددة الطبقات في CSS؟
أولاً، يمكن استخدام تأثيرات الظل متعددة الطبقات لمحاكاة التأثيرات ثلاثية الأبعاد مثل المطبات والمنخفضات. من خلال ضبط اللون وموضع كل مستوى من مستويات الظل، يمكنك إنشاء تأثير ثلاثي الأبعاد. على سبيل المثال: من خلال ضبط موضع كل مستوى ظل بشكل مناسب، يمكنك جعل العنصر يبدو أكثر ارتفاعًا. ثانيًا، يمكن أيضًا استخدام تأثيرات الظل متعددة الطبقات لإنشاء تأثيرات تفصيلية، مثل إنشاء تأثيرات بصرية مشابهة للدخان أو الضوء أو السحب. من خلال ضبط التمويه واللون لمستويات الظل المختلفة، يمكنك اللعب بمجموعة متنوعة من التأثيرات المرئية. وأخيرًا، يمكن أيضًا تحقيق تأثيرات النص باستخدام تأثيرات الظل متعددة الطبقات، مثل إنشاء تأثيرات نص ثلاثية الأبعاد. من خلال إضافة مستويات الظل إلى النص الخاص بك، يمكنك جعله يبدو أكثر ثلاثية الأبعاد ويبرز.كيفية تحقيق تأثير الظل متعدد الطبقات بألوان مختلفة في CSS؟
أولاً، يمكنك إضافة تأثير ظل إلى عنصر باستخدام السمة "box-shadow". يمكن تحقيق تأثيرات الظل للألوان المختلفة عن طريق ضبط قناة ألفا في قيمة اللون "rgba". على سبيل المثال: box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5); يؤدي هذا إلى إنشاء تأثير ظل أحمر. ثانيًا، لإنشاء طبقات متعددة من تأثيرات الظل بألوان مختلفة، يمكنك إعادة استخدام خاصية "box-shadow" وإضافة قيم ألوان مختلفة. على سبيل المثال: box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5), 4px 4px 8px rgba(0, 255, 0, 0.3); يؤدي هذا إلى إنشاء تأثير ظل باللونين الأحمر والأخضر. أخيرًا، استمر في إضافة المزيد من تأثيرات الظل بألوان مختلفة، ويمكن تحقيق ذلك عن طريق إضافة قيم متعددة بشكل متكرر في سمة "box-shadow" وتعيين قيم ألوان مختلفة. على سبيل المثال: box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5), 4px 4px 8px rgba(0, 255, 0, 0.3), 6px 6px 12px rgba(0, 0, 255, 0.2); من الممكن إنشاء تأثير الظل بثلاثة ألوان مختلفة.آمل أن يساعدك الشرح الذي قدمه محرر Downcodes في فهم واستخدام تأثيرات الظل متعددة الطبقات لـ CSS بشكل أفضل، وإضافة المزيد من الإثارة إلى تصميم الويب الخاص بك!