كيفية تأثير تراكب CSS-Only مع Box-Shadow

تراكبات المحتوى هي جزء بارز من تصميم المواقع الحديثة. هم يساعدونك إخفاء عنصر على صفحة ويب ، ولاحقًا - بموافقة المستخدم - تكشف عن ذلك, وعرض معلومات أو عناصر تحكم إضافية ، مثل الأزرار الموجودة خلفها.

تراكب نموذجي هو شبه شفافة, مع لون الخلفية الصلبة (عادةً ما يكون أسود) ، وهناك بعض النص أو الأزرار الموجودة عليه ليراها المستخدمون أو يتفاعلون معها. بعد حدوث التفاعل (النقر أو التحويم) ، يحدث التراكب يحصل إزالتها ويكشف المحتوى تحتها.

في هذه المقالة ، سوف نلقي نظرة على كيفية القيام بذلك إضافة تراكب ملون على الصور باستخدام CSS النقي. يمكنك رؤية النتيجة النهائية في العرض التوضيحي أدناه. قم بتمرير الصور لجعل التراكبات تكشف عن البوكيمون. على الرغم من أن هذا المنشور يناقش الصور ، فإن التقنية التي يقدمها يمكن تطبيقها بأمان على أنواع المحتوى الأخرى (مثل كتل النص) أيضًا.

تجنب إضافة عناصر HTML إضافية

يتم إنشاء التراكبات بشكل متكرر بواسطة وضع عنصر HTML إضافي مع ال غموض قيمة أقل من 1 الحق فوق العنصر المراد تغطيتها. المشكلة هي أن هذه التقنية تنطوي على استخدام إضافي عنصر (أو عنصر شبه زائف) للتراكب.

إذا لم تكن معتادًا على حجم HTML ، فربما لا يكون وجود عنصر إضافي للتراكب أمرًا كبيرًا ، على الأرجح لن يفرض على النطاق الترددي لأي شبكة بهذا القدر. ومع ذلك وجود منفصل لا تزال قواعد النمط الخاصة بالعناصر وتراكبها تؤذي قابلية قراءة CSS وإمكانية صيانته.

للحفاظ على التعليمات البرمجية الخاصة بك ، وليس لتعطيل مخطط HTML ، فمن الأفضل استخدام حل CSS فقط.

إنشاء تراكب مع مربع الظل

إذا كيف يمكنك فعلاً إنشاء تراكب CSS فقط؟ مع مساعدة من مربع الظل خاصية CSS. يعتبر Box-shadow مثاليًا لهذه المهمة ، نظرًا لما هو تراكب ولكن ظل الظلام يلقي على عنصر?

مربع الظل له قيمة خاصية تسمى أقحم, الذي يسبب الظل لتظهر الداخل من إطار مربع.

ظل صندوقي داخلي مع حجم ظل نصف أو أكثر من نصف عرض وارتفاع العنصر ، ينشئ ظلًا يغطي كامل جزء.

 .مربع العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ صندوق الظل: أخضر 0 0 0 100px أقحم.  

منذ تراكب عادة لدينا بعض الشفافية, تحتاج إلى إضافته إلى مربع الظل كذلك. ويمكن القيام بذلك باستخدام رغبا () وظيفة للون الظل.

ال RGB جزء من rgba ، يمثل ، قيم قناة اللون الأحمر والأخضر والأزرق ، بينما ا يمثل قناة ألفا, الذي مسؤولة عن الشفافية.

بالنسبة لقناة ألفا ، تنشئ القيمة 1 قيمة لون معتم, بينما 0 يخلق لون شفاف تماما.

عن طريق تعيين قيمة بين 0 و 1 لقناة ألفا لقيمة اللون rgba للظل المربع ، يمكنك إنشاء تراكب شبه شفاف.

إنشاء رمز للعرض التجريبي

سيعرض التجريبي الخاص بنا صور وأسماء pokemons المختلفة. سنقوم هنا فقط بإنشاء رمز لـ Bulbasaur ، أول بوكيمون في العرض التوضيحي ، حيث يتم إنشاء الآخرين بنفس الطريقة (في Codepen يمكنك التحقق من الكود لهم أيضًا).

HTML

بالنسبة إلى HTML ، نحتاج فقط إلى إنشاء مربع الذي سنضيف إليه كل شيء آخر باستخدام CSS.

CSS

في CSS أدناه ، .البوكيمون عناصر عرض الصور البوكيمون ، و .البوكيمون :: بعد العناصر الزائفة تحمل اسم البوكيمون.

منذ مربع الظل خاصية يمكن أن تأخذ قيم متعددة لكي تقديم ظلال متعددة, بجانب تراكب الظل ، أضفت أيضًا ظلال أخرى من الرمادي إلى .البوكيمون و .البوكيمون: تحوم عناصر لعلم الجمال.

 / * pokemon pictures * / .pokemon width: 200px؛ الارتفاع: 200 بكسل ؛ / * مركز المحتوى باستخدام مربع المرن * / عرض: المرن. تبرير المحتوى: المركز ؛ محاذاة البنود: مركز. / * overlay * / box-shadow: 0 0 0 100px inset، 0 0 5px grey؛ / * hover-out الانتقالية * / الانتقالية: box-shadow 1s؛  / * pokemon names * / .pokemon :: after width: 80٪؛ الارتفاع: 80 ٪ ؛ العرض محجوب؛ الخط: 16pt 'bookman syle' ؛ اللون الابيض؛ الحدود: 2px الصلبة. محاذاة النص: المركز ؛ / * مركز المحتوى باستخدام مربع المرن * / عرض: المرن. تبرير المحتوى: المركز ؛ محاذاة البنود: مركز. / * تحوم للخارج الانتقال * / الانتقالية: العتامة 1s .5s؛  / * كشف صورة البوكيمون على التحويم * / .pokemon: hover الانتقالية: box-shadow 1s؛ صندوق الظل: 0 0 0 5px أقحم ، 0 0 5px رمادي ، 0 0 10px رمادي أقحم ؛  / * إخفاء اسم البوكيمون على التحويم * / .pokemon: hover :: after الانتقالية: opacity .5s؛ التعتيم: 0؛  

عندما .البوكيمون يتم تحريك العناصر ، يجب تغيير ظل الصندوق الخاص بها للكشف عن الصورة خلفها.

يمكنك أن ترى أن .البوكيمون: تحوم محدد يحصل على مربع مربع جديد يزيل التراكب ، و .البوكيمون: تحوم :: بعد محدد يخفي اسم البوكيمون باستخدام غموض خاصية.

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

مثل مربع الظل ليس لديه أي ممتلكات طويلة, لا يمكنك ضبط لون الظل بشكل فردي مع شيء مثل, مربع الظل لون. بدلا من ذلك - نحن نستخدم اللون خاصية.

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

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg) ؛ / * قيمة اللون المستخدمة في لون الظل المربع * / color: rgba (71 ، 121 ، 94 ، 0.9) ؛  #bulbasaur :: after / * pokemon name * / content: 'Bulbasaur'؛  

يستخدم لون ظل التراكب المذكور أعلاه رغبا () تعمل مع 0.9 لقيمة ألفا لجعل التراكب شفافًا.

بصرف النظر عن لون مربع التراكب ، يضيف CSS أعلاه أيضًا القواعد الفردية لكل بوكيمون - الصورة كما الصورة الخلفية والاسم.

وهذا كل شيء ، نحن على استعداد مع تراكب الصور الملونة فقط CSS. ألقِ نظرة على رمز جميع البوكيمون في القلم أدناه.