10 (أكثر) الحيل المغلق أنت ربما تجاهلها

هناك الكثير من مقتطفات CSS التي يمكن لمطوري الويب استخدامها لتحقيق نتائج معينة ، ثم هناك حيل CSS يمكنك استخدامها لأشياء مثل محاذاة المحتوى رأسياً. مع كون CSS كيانًا دائم التطور ، مرارًا وتكرارًا ، نتعثر على حيل CSS الرائعة التي يسهل معرفتها.

في منشور اليوم ، أنا أعرض عليك 10 سمات CSS أخرى وحيل قد لا تعرفها.

1. اكتب عموديا

هناك سمة CSS تسمى الكتابة الوضع يقبل إحدى هذه القيم الثلاث ؛ أفقي السل, عمودي RL و الرأسي-LR.

أفقي السل هو الإعداد الافتراضي ويتسبب في تدفق النص الأفقي من اليسار إلى اليمين في أحد العناصر.

ال عمودي-* ومع ذلك ، فإن القيم تتعلق بتدفق الكتلة الرأسية ، مما يتسبب في كتابة نص من المستعرضات إلى أعلى. في عمودي RL, تضاف خطوط جديدة إلى يسار الخطوط السابقة والعكس صحيح الرأسي-LR.

هذا مفيد ل عرض لغات مثل الصينية واليابانية مكتوبة عادةً من أعلى إلى أسفل وأيضًا عندما ترغب في عرض نص عموديًا لتوفير مساحة أفقية ، كما هو الحال في رؤوس الجداول.

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

 -webkit-writing-mode: vertical-rl؛ -ms-writing-mode: tb-rl؛ وضع الكتابة: عمودي- rl ؛ 

2. إعادة استخدام قيمة اللون

الكلمة الرئيسية currentColor يحمل قيمة اللون السمة ويمكن استخدامها في السمات الأخرى التي تقبل قيم اللون مثل خلفية.

div خلفية: التدرج الخطي (90 درجة ، اللون الحالي 50٪ ، اللون الأسود 50٪) ؛ ... اللون: # FFD700؛ / * currentColor هو # FFD700 * / 

3. مزيج خلفيات

يمكن أن يحتوي العنصر على أكثر من خلفية (لون الخلفية وصور خلفية متعددة). ال خلفية مزيج الوضع يمزج كل منهم معا وفقا لوضع المزج معين. هناك ما مجموعه 16 وضع مزيج في الوقت الراهن.

الخلفية مزيج الوضع: الفرق. 

4. مزيج العناصر

mix-blend-mode يمزج محتويات وخلفيات العناصر المتداخلة. يبدو أن Chrome لا يدعم جميع الأوضاع على الرغم من أن Firefox يدعمها.

مزيج مزيج الوضع: اللون. 

أخذت عنصرين ، IMG تبين صورة وردة و امتداد مع خلفية الرسم ، مكدسة لهم وتطبيق عدد قليل من مزيج مزيج وسائط.

5. تجاهل مؤشر الأحداث

يمكنك جعل عنصرًا غافلاً عن أي حدث مؤشر باستخدام سمة واحدة تسمى مؤشر-الأحداث. عن طريق العطاء مؤشر-الأحداث قيمة ال لا شيء في عنصر ما ، يمنع ذلك من أن يكون هدفًا لمؤشر الأحداث. وشملت IE11 + الدعم.

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

6. تزيين صناديق الانقسام

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

الآن لمتابعة ذلك مع مثال وتذكير مبكر "عيد الميلاد في الأفق" ، وهنا قائمة من الرنة سانتا جميع كتبته في واحدة امتداد! هو! هو! هو!

ملحوظة: على الرغم من أن IE الحديث يدعم مربع زينة كسر, عند حافة الحد المجزأ ، يصبح التقديم سلسًا وتبدو الخلفية مقطوعة. لكنها لا تقدم مربع الظل لطيف ، وهذا هو السبب في أنني كنت استخدم ظلال الصندوق لكل من الحدود والخلفية. هناك أيضًا عدم وجود حشوة أفقية في الحواف في IE قد ترغب في ملؤها بمسافات.

7. طي عناصر الجدول

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

عند التعيين الرؤية: الانهيار في عنصر جدول ، يتم إخفاءه ويتم ملء مساحته بالمحتوى القريب - مثل الطريقة التي سيتصرف بها عند استخدامه عرض لا شيء في حين أن.

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

8. إنشاء أعمدة

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

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

-webkit-column-count: 2؛ عدد الأعمدة: 2 ؛ عدد الأعمدة: 2 ؛ 

9. جعل عناصر يمكن تغيير حجم

يمكن جعل عنصر يمكن تغيير حجمه (عموديًا أو أفقيًا أو كليهما) باستخدام السمة CSS3 تغيير . resizeability في تيكستاريا يمكن تعطيل باستخدام نفسه.

تغيير حجم: العمودي. تغيير حجم: أفقي. تغيير الحجم: كلاهما ؛ تغيير حجم: لا شيء ؛ 

10. إنشاء أنماط

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