كيفية إنشاء تصميم للحد من الحدود مع CSS
مع خفض الحدود تصميم يمكننا أن نظهر للمستخدمين ما يمكن العثور عليه أسفل منطقة الحدود لعنصر HTML. عادة ما يتم حل هذه المهمة عن طريق التراص عنصرين كتلة أو أكثر (في معظم الحالات ، divs) من أحجام مختلفة على رأس كل منهما الآخر. أولاً ، يبدو هذا حلاً بسيطًا ، ولكنه يصبح أكثر إحباطًا عندما تريد إعادة استخدام التنسيق عدة مرات ، أو التنقل بين العناصر ، أو تحسين التصميم للجوال ، أو الحفاظ على الكود.
في هذا المنشور ، سوف أعرض عليك حلاً أنيقًا يستخدم CSS فقط عنصر HTML واحد فقط لتحقيق نفس التأثير. هذه التقنية هي أيضا كبيرة لسهولة الوصول ، لأنها يقوم بتحميل صورة الخلفية في CSS, فصل من HTML.
بحلول نهاية هذا المنشور ، ستعرف كيف عرض صورة خلفية في المنطقة الحدودية من أجل إنشاء خفض الحدود تصميم تستطيع أن ترى أدناه. سأوضح أيضًا كيف يمكنك جعل التصميم مستجيبًا باستخدام وحدات viewport.
الرمز الأولي
الشرط الوحيد في الجبهة HTML هو عنصر كتلة:
سنحتاج إلى إعادة استخدام أبعاد (العرض والارتفاع) وقيم عرض الحدود لل شعبة, لذلك أنا أعرضهم كمتغيرات CSS. المتغير --ث يدل على عرض من .سي بي عنصر كتلة, --ح يشير إلى ارتفاع, --ب يذهب ل عرض الحدود, و --B2 لعرض الحدود مضروبًا في 2. سنرى لاحقًا استخدام المتغير الأخير.
أنا التحجيم الوحدة لنقم بتحسين الكود أعلاه عن طريق إضافة خلفية ، وتحديد الحدود والطول والعرض باستخدام متغيرات CSS المحددة مسبقًا لدينا. إليك كيفية ظهور العرض التوضيحي في الوقت الحالي: نحن بحاجة إلى صورة الخلفية ل تغطي المنطقة كلها من إذا كنت ترغب في إعطاء صورة خلفية بحجم ثابت ، فقط تأكد من أن الحجم الذي تعطيه يمكّنها من تغطية منطقة الحدود ال عرض صورة الخلفية [ وبالمثل ، فإن ارتفاع صورة الخلفية [ بهذه الطريقة ، قمنا بتغيير حجم صورة الخلفية إلى مساحة مماثلة لحجم ال ملحوظة: إذا كنت تضيف الحشو إلى هذا ما لدينا الآن: الآن وقد غطينا المنطقة الشاملة للحدود مع صورة الخلفية ، كل ما تبقى هو تغطية منطقة الوسط داخل الحدود (منطقة حصرية على الحدود) بلون صلب ، نصل إليه من أجل الظل الأفقي مع القيمة في العرض التوضيحي لـ Codepen ، يمكنك رؤية حد أبيض حول الصورة. هناك خدعة مشهورة باستخدام مربع الظلال لإنشاء حدود متعددة-يمكننا استخدام نفس التقنية ل إضافة واحد أو أكثر من الحدود الملونة الصلبة لتصميمنا. المحدثة ال في عرض Codepen النهائي ، وضعت رمز صورة الخلفية ولون صندوق الظل في فصل منفصل. هذا هو اختياري, ولكن يمكن أن تكون مفيدة للغاية إذا كنت تريد إعادة استخدام تخطيط تصميم الحدود خفض التدريجي في عناصر متعددة ، وإضافة جماليات (صورة خلفية + اللون) لكل عنصر بشكل مستقل. لقد أضفت فصلاً اسمه منذ لتعيين قيمة منذ الأبعاد كلها في الوحدة ملحوظة: لا تنسى ذلك إضافة علامة التعريف viewport إلى صفحة HTML الخاصة بك إذا كنت قد قررت تحسينها لعرض الجوال.فولكس فاجن وحدة (يمكنك استخدام وحدات ثابتة إذا كنت تريد). .cb --w: 35vw؛ - ساعة: 40 فولت - ب: 4vw ؛ - b2: calc (var (- b) * 2) ؛
شرح سريع -
فولكس فاجن و VH وحداتفولكس فاجن يمثل 1/100عشر من عرض منفذ العرض. على سبيل المثال, 50vw هو 50 جزءًا من عرض منفذ العرض شرائح عموديا إلى 100 أجزاء متساوية, في حين 50vh هو 50 أجزاء من ارتفاع viewport شرائح أفقيا إلى 100 أجزاء متساوية. .cb --w: 35vw؛ - ساعة: 40 فولت - ب: 4vw ؛ - b2: calc (var (- b) * 2) ؛ الخلفية: عنوان url (bg.jpg) ؛ الحدود: فار (- ب) صلبة شفافة ؛ الارتفاع: فار (- ح) ؛ العرض: فار (- ث) ؛
حجم صورة الخلفية
خلفية القيمة التي أعطيها: .cb --w: 35vw؛ - ساعة: 40 فولت - ب: 4vw ؛ - b2: calc (var (- b) * 2) ؛ الخلفية: url (bg.jpg) مركز / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2))؛ الحدود: فار (- ب) صلبة شفافة ؛ الارتفاع: فار (- ح) ؛ العرض: فار (- ث) ؛
calc (var (- w) + var (- b2))] هو مجموع عرض div [فار (- ث)] و ال عرض الحدود اليسرى واليمنى [فار (- B2)].calc (var (- h) + var (- b2))] هو مجموع ارتفاع div [فار (- ح)] و ال عرض الحدود العليا والسفلى [فار (- B2)].شعبة (بما في ذلك المنطقة الحدودية).مركز الكلمة يحاذي صورة الخلفية إلى وسط شعبة.شعبة, تذكر أن تشمل منطقة الحشو إلى حجم الخلفية كذلك ، مثل منطقة الحدود.
تغطية المنطقة الحدودية الحصرية
مربع الظل أقحم. .cb --w: 35vw؛ - ساعة: 40 فولت - ب: 4vw ؛ - b2: calc (var (- b) * 2) ؛ الخلفية: url (bg.jpg) مركز / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2))؛ الحدود: فار (- ب) صلبة شفافة ؛ box-shadow: inset var (- w) 0 0 rgba (0،120،237، .5)؛ الارتفاع: فار (- ح) ؛ العرض: فار (- ث) ؛
فار (- ث) يغطي العرض الكامل لل شعبة. استخدام رغبا وظيفة اللون يسمح بعض الشفافية لإضافته في المزيج ، ومع ذلك يمكنك أيضًا استخدام لون معتم إذا كنت تريد تغطية منطقة الوسط بالكامل.
أضف حدودًا إضافية مع
مربع الظلمربع الظل القيمة: .cb --w: 35vw؛ - ساعة: 40 فولت - ب: 4vw ؛ - b2: calc (var (- b) * 2) ؛ الخلفية: url (bg.jpg) مركز / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2))؛ الحدود: فار (- ب) صلبة شفافة ؛ صندوق الظل: أقحم var (- w) 0 0 rgba (0،120،237، .5) ، 0 0 0 calc (var (- b) / 2) white الارتفاع: فار (- ح) ؛ العرض: فار (- ث) ؛
calc (var (- b) / 2) وظيفة يخلق ظل لل نصف عرض الحدود.
اختياري: تخطيط منفصل وعلم الجمال
.poster1 إلى .poster1 --tbgc: rgba (0،120،237، .5)؛ صورة الخلفية: url ("http://bit.ly/2eQBij2") ؛ خلفية هي خاصية الاختزال, يمكن التغلب على خصائصه الطويلة / بشكل فردي. وبالتالي ، يمكننا ضبط الصورة الخلفية في .poster1, وإزالة قيمة url من خلفية الملكية في .سي بي.مربع الظل, يمكننا ان نستخدم متغير CSS آخر. ال --tbgc متغير يحمل قيمة اللون نحن نريد أن نعطي الظل مربع (lightblue في التجريبي) ، وذلك من بين قواعد النمط ل .سي بي نحن استبدال قيمة اللون لل مربع الظل الملكية مع فار (- tbgc). .cb --w: 35vw؛ - ساعة: 40 فولت - ب: 4vw ؛ - b2: calc (var (- b) * 2) ؛ الخلفية: مركز / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)) ؛ الحدود: فار (- ب) صلبة شفافة ؛ صندوق الظل: أقحم var (- w) 0 0 var (- tbgc) ، 0 0 0 calc (var (- b) / 2) أبيض ؛ الارتفاع: فار (- ح) ؛ العرض: فار (- ث) ؛
رمز لوضع عمودي
فولكس فاجن, ستكون تبدو صغيرة جدا عندما تقوم بعرض التصميم في وضع عمودي (عرض أصغر بالنسبة للارتفاع) - يتم تشغيل جميع الأجهزة المحمولة افتراضيًا. لحل هذه المشكلة, مفتاح كهربائي فولكس فاجن مع VH, و تغيير حجم التصميم كما تراه مناسبا لأنماط صورة. media (direction: portrait) .cb --w: 35vh؛ - ح: 40vh ؛ - ب: 4VH ؛
