كيفية جعل HTML تختفي تمامًا

كلنا نريد أن نختفي في بعض الأحيان. لا تختلف عناصر HTML. في بعض الأحيان يريدون الاختباء لبعض الوقت. لا تتوقف عن الوجود تمامًا - فقط احتفظ بالأشياء في الأسفل.

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

CSS لتصبح غير مرئي

لنأخذ عنصر HTML مع الفئة "ghost" ونخفيه.

//index.html

I’m friendly!

//style.css
.ghost {
}

بكسل ميت

بشكل افتراضي ، تكون عناصر HTML مرئية. تكون خاصية CSS الافتراضية الخاصة بهم مرئية ، ولكن يمكنك قلب البرنامج النصي والانتقال:

.ghost {
 visibility: hidden;
}

الآن تم إخفاء الشبح ، لكنه سيظل يشغل مساحة على الصفحة.

دون أن يترك أثرا

إذا كنت تريد أن تجعل شيئًا ما غير مرئي ، وكذلك لا تشغل أي مساحة ، يمكنك أيضًا استخدام خاصية عرض CSS .

يستخدم المطورون عادةً خاصية العرض لإملاء ما إذا كان يجب عرض عنصر HTML كعنصر كتلة أو عنصر مضمن ، ولكن يمكنه أيضًا إخفاء العنصر تمامًا:

.ghost {
 display: none;
}

وعلى عكس الرؤية: مخفي ، عنصر مخفي مع عرض: لن يشغل أي منها أي مساحة على الصفحة.

انظر من خلال النفوس

يمكنك أيضًا جعل عنصر ما شفافًا بحيث يصبح غير مرئي باستخدام خاصية Opacity CSS.

.ghost {
 opacity: 0.0;
}

مثل visibility: hidden ، opacity: 0.0 ستترك مساحة فارغة حيث يوجد عنصر HTML. تذكر أنه مع كل هذه الأساليب ، يظل العنصر جزءًا من DOM - فهو غير مرئي للمستخدمين العاديين في متصفحاتهم.

اهرب! اهرب بعيدا ، بعيدا!

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

للقيام بذلك، أولا استخدام موقف الملكية CSS لإعطاء عنصر في المطلق موقف على الصفحة (على العكس من قريب لعناصر HTML الأخرى).

بعد ذلك يمكنك نقل العنصر خارج الصفحة عددًا كبيرًا من البكسل بشكل عشوائي:

.ghost { position: absolute; left: -999999px;}

لماذا ستفعل هذا؟ حسنًا ، إنه جيد لإمكانية الوصول إلى المحتوى الخاص بك. يمكن لقارئات الشاشة - التي يستخدمها الأشخاص ضعاف البصر لتصفح الإنترنت - التقاط هذا المحتوى ، ولن يعرف أي شخص آخر المحتوى هناك.

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

كونك شبح هالوين

عندما تضع كل هذه التقنيات الأربعة معًا ، ستحصل على زي هالوين رائع جدًا وبجهد منخفض:

لقد صنعت هذا بمساعدة المصمم والمخيم المقيم في أوستن ويس سيران.

يمكنك اختيار واحدة حتى نهاية نهاية هذا الأسبوع - للرجال والمقاسات المناسبة للنساء.

أنا أكتب فقط عن البرمجة والتكنولوجيا. إذا تابعتني على Twitter فلن أضيع وقتك. ؟