عندما تضع شيئًا ما - قل ورقة عادية - في مجلد مانيلا ، فقد يظهر جزء من هذا الشيء خارج المجلد قليلاً. نفس الشيء مع المحفظة وبطاقات الائتمان. تنبثق البطاقات مجرد سميدج حتى تتمكن من إلقاء نظرة سريعة على البطاقات التي تحملها.
أسمي هذا النوع من الأشياء "شق". الشق هو المكان الذي نخلق فيه الوهم بالفتحة التي يمكننا من خلالها إثارة عنصر مرئي يخرج منه. ويمكننا فعل ذلك في CSS!
الجزء الحاسم في التصميم هو الظل ، وهو ما يعطي إشارة بصرية لوجود شق. ثم هناك غطاء الشق الذي يوفر مساحة للعنصر المعروض لإلقاء نظرة خاطفة عليه من الأسفل.
إليك ما سنقوم بعمله معًا:
لنبدأ بإنشاء الظل
قد تتفاجأ من أن الظل في المثال لم يتم إنشاؤه بظل CSS حقيقي ، مثل box-shadow أو drop-shadow() منقي. بدلاً من ذلك ، الظل عنصر منفصل في حد ذاته ، مظلم وغير واضح. هذا مهم لجعل التصميم أكثر قابلية للتكيف ، في كل من حالته الافتراضية والمتحركة.
الغطاء هو العنصر الآخر في التصميم. الغلاف هو ما أسميه العنصر الذي يتداخل مع الظل. إليكم شكل يصور كيف يتحد الظل والغطاء.
يتكون الظل من مستطيل صغير قائم الزاوية له خلفية متدرجة. التدرج أغمق في المنتصف. لذلك عندما يكون العنصر غير واضح ، فإنه يخلق ظلًا أغمق في المنتصف ؛ ومن ثم المزيد من الأبعاد.
الآن ، النصف الأيسر من الظل المعاد إنشاؤه مغطى بمستطيل في الأعلى ، ملون تمامًا مثل خلفية الحاوية الخاصة به.
يتم بعد ذلك تحريك كل من الغطاء والظل إلى اليسار بشكل طفيف بحيث يبدو أنهما من طبقات
العمل على الغلاف
لكي ينسجم الغلاف مع خلفية التصميم ، يتم توريث لون الخلفية من العنصر الذي يحتوي عليه. بدلاً من ذلك ، يمكنك أيضًا محاولة مزج الغلاف بخلفيته باستخدام معايير مثل أقنعة CSS و وسائط مزيج، اعتمادًا على اختياراتك ومتطلبات التصميم الخاصة بك.
لمعرفة بعض الأساسيات حول كيفية تطبيق هذه المعايير ، يمكنك الرجوع إلى هذه المقالات: Sarah Drasner's "الإخفاء مقابل القطع: متى يتم استخدام كل منهما" يوفر أساس ممتاز على الأقنعة. لقد كتبت أيضًا عن أوضاع مزيج CSS في هذه المقالة حيث يمكنك صقل الموضوع.
في الكود المصدري لمثالي ، ستلاحظ أنني قمت بمحاذاة العناصر وتكديسها داخل ملف
ما تسمح لي شبكة CSS أيضًا بفعله هو تعيين كل هؤلاء الثلاثة divs لذا فهي كلها ذات عرض كامل في تنسيق
main > div {
grid-area: 1 / 1;
}هذا يجعل كل شيء يتراكم فوق بعضه البعض. عادة ، نعمل بجد لتجنب تغطية العناصر بعناصر أخرى في الشبكة. لكن هذا المثال يعتمد عليه. لقد أعطيت ال .slit-cover بعرض 50٪ مما يكشف بشكل طبيعي عن الصورة الموجودة تحتها. من هناك ، أضع ملف transform عليه يحركه 50٪ في الاتجاه السلبي ، المزيد الكمية الصغيرة التي حولت الظل سابقًا (25px) للتأكد من الكشف عن ذلك أيضًا.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}ويوجد لدينا ذلك! شق طبيعي المظهر يحاكي شيئًا ما يخرج من مجلد أو محفظة أو أي شيء آخر.
هناك المزيد من الطرق للقيام بذلك! لأحدهما ، يمكن لـ Flexbox الحصول على عناصر تصطف في صف واحد وتحاذيها في الوسط مثل هذا. هناك العديد من الطرق للحصول على الأشياء جنبًا إلى جنب. وربما لديك طريقة لاستخدام ملف box-shadow خاصية، drop-shadow() مرشح ، أو حتى مرشحات SVG للحصول على نفس تأثير الظل الذي يبيع الوهم حقًا.
ويمكنك أن تنخرط في هذا الأمر تمامًا للحصول على مظهرك الخاص. على سبيل المثال ، حاول تبديل موضع الظل والصورة. أو العب مع مجموعات الألوان وقم بتغيير تنسيق blur() تصفية القيمة. يمكن أيضًا تعديل شكل الغطاء والظل - أراهن أنه يمكنك إنشاء ظل منحني بدلاً من ظل مستقيم ومشاركته معنا في التعليقات!
