Как да накараме HTML да изчезне напълно

Всички искаме понякога да изчезнем. HTML елементите не се различават. Понякога искат да се скрият за известно време. Не преставайте да съществувате напълно - просто дръжте нещата надолу.

За щастие, когато става въпрос за изчезване на HTML елементи, CSS предлага разнообразни опции.

CSS да станеш невидим

Да вземем HTML елемент с класа „призрак“ и да го скрием.

//index.html

I’m friendly!

//style.css
.ghost {
}

Мъртви пиксели

По подразбиране HTML елементите са видими. Свойството CSS за видимост по подразбиране е видимо , но можете да обърнете скрипта и да отидете:

.ghost {
 visibility: hidden;
}

Сега призракът е скрит, но все пак ще заема място на страницата.

Без следа

Ако искате да направите нещо невидимо и освен това да не заемате никакво място, можете също да използвате свойството CSS display .

Разработчиците обикновено използват свойството display, за да диктуват дали HTML елемент трябва да се показва като блоков елемент или вграден елемент, но може и да скрие елемента напълно:

.ghost {
 display: none;
}

И за разлика от видимостта: hidden , елемент, скрит с display: none няма да заема място на страницата.

Прозрачни души

Можете също така да направите елемент толкова прозрачен, че да е невидим, като използвате свойството opacity CSS.

.ghost {
 opacity: 0.0;
}

Подобно на видимост: скрито, непрозрачност: 0.0 ще остави празно място, където е HTML елементът. Не забравяйте, че с всички тези техники елементът остава част от DOM - той просто не се вижда от нормалните потребители в техните браузъри.

Избягал! Бягай далеч, далеч!

Последният начин, по който можете да скриете елемент, е просто да го преместите толкова далеч от страницата, че ще трябва да намалите значително, за да го видите.

За да направите това, първо трябва да използва позицията CSS имота да се даде на елемент на абсолютната позиция на страницата (за разлика от относителната към други HTML елементи).

След това можете да преместите елемента от страницата с произволно голям брой пиксели:

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

Защо бихте направили това? Е, това е добре за достъпността на вашето съдържание. Екранните четци - които хората с увредено зрение използват за сърфиране в интернет - могат да вземат това съдържание и всички останали няма да знаят, че съдържанието е там.

За най-добри резултати разположете тези невидими елементи отляво вместо отгоре или отдолу, което може да обърка четците на екрана.

Да бъдеш призрак за Хелоуин

Когато съберете всичките четири от тези техники, имате доста готин костюм за Хелоуин с ниски усилия:

Направих това с помощта на базирания в Остин дизайнер и кемпер Уес Сиран.

Можете да вземете един до края на този уикенд - в мъжки и вталени дамски размери.

Пиша само за програмиране и технологии. Ако ме следвате в Twitter, няма да ви губя времето. ?