Kako učiniti da HTML potpuno nestane

Svi ponekad želimo nestati. HTML elementi se ne razlikuju. Ponekad se žele neko vrijeme sakriti. Ne prestati postojati u potpunosti - samo držite stvari na dolje.

Srećom, kada je riječ o uklanjanju HTML elemenata, CSS nudi razne mogućnosti.

CSS postajanja nevidljivim

Uzmimo HTML element s klasom „duh“ i sakrijemo ga.

//index.html

I’m friendly!

//style.css
.ghost {
}

Mrtvi pikseli

Prema zadanim postavkama vidljivi su HTML elementi. Njihova zadana vidljivost CSS svojstvo je vidljiv , ali možete okrenuti skriptu i otići:

.ghost {
 visibility: hidden;
}

Sada je duh skriven, ali svejedno će zauzeti prostor na stranici.

Bez traga

Ako želite učiniti nešto nevidljivim, a uz to ne zauzimati nikakav prostor, možete koristiti i svojstvo prikaza CSS .

Programeri obično koriste svojstvo display da bi odredili hoće li se HTML element prikazivati ​​kao blok element ili kao ugrađeni element, ali element također može u potpunosti sakriti:

.ghost {
 display: none;
}

I za razliku od vidljivosti: skriven , element skriven prikazom: nijedan neće zauzimati prostor na stranici.

Prozirne duše

Možete i element učiniti toliko prozirnim da je nevidljiv pomoću CSS svojstva opacity .

.ghost {
 opacity: 0.0;
}

Poput vidljivosti: skriveno, neprozirnost: 0.0 ostavit će prazan prostor tamo gdje je HTML element. Zapamtite, uz sve ove tehnike, element ostaje dio DOM-a - on jednostavno nije vidljiv normalnim korisnicima u njihovim preglednicima.

Pobjeći! Bježi daleko, daleko!

Posljednji način na koji možete sakriti element je samo pomicanje toliko daleko od stranice da biste ga morali strahovito smanjiti da biste ga vidjeli.

Da biste to učinili, prvo koristite položaj CSS svojstvo dati elementa je apsolutni položaj na stranici (za razliku u odnosu na druge HTML elemenata).

Tada možete premjestiti element sa stranice proizvoljno velik broj piksela:

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

Zašto bi to učinio? Pa, to je dobro za dostupnost vašeg sadržaja. Čitači zaslona - koje osobe s oštećenjem vida koriste za pregledavanje interneta - mogu pokupiti ovaj sadržaj, a svi ostali neće znati da je sadržaj tamo.

Za najbolje rezultate postavite ove nevidljive elemente ulijevo umjesto na gornju ili donju stranu, što može zbuniti čitače zaslona.

Biti duh za Noć vještica

Kad spojite sve ove 4 tehnike, dobit ćete prilično cool Halloween kostim s malim naporom:

Napravio sam to uz pomoć dizajnera i kampera sa sjedištem u Austinu Wesa Searana.

Možete je kupiti do kraja ovog vikenda - u muškim i opremljenim ženskim veličinama.

Pišem samo o programiranju i tehnologiji. Ako me pratite na Twitteru, neću vam gubiti vrijeme. ?