Cu toții vrem să dispărem uneori. Elementele HTML nu diferă. Uneori vor să se ascundă o vreme. Nu încetați să mai existați complet – pur și simplu țineți lucrurile în jos-jos.

Din fericire, când vine vorba de dispariția elementelor HTML, CSS oferă o varietate de opțiuni.

CSS de a deveni invizibil

Să luăm un element HTML cu clasa „fantomă” și să-l ascundem.

//index.html
<div class=”ghost”>  <p>I’m friendly!</p></div>
//style.css
.ghost {
}

Pixeli morți

În mod implicit, elementele HTML sunt vizibile. Implicitul lor vizibilitate Proprietatea CSS este vizibil, dar puteți întoarce scriptul și mergeți:

.ghost {
  visibility: hidden;
}

Acum fantoma este ascunsă, dar va ocupa totuși spațiu pe pagină.

Fără urmă

Dacă doriți să faceți ceva invizibil și, de asemenea, să nu ocupați spațiu, puteți utiliza și CSS afişa proprietate.

Dezvoltatorii folosesc de obicei proprietatea de afișare pentru a dicta dacă un element HTML ar trebui să fie afișat ca element de bloc sau ca element în linie, dar poate ascunde și elementul complet:

.ghost {
  display: none;
}

Și spre deosebire de vizibilitate: ascuns, un element ascuns cu display: none nu va ocupa spațiu pe pagină.

Suflete transparente

Cum sa faci HTML sa dispara complet
Mergând, mergând, plecat.

De asemenea, puteți face un element atât de transparent încât să fie invizibil folosind opacitate Proprietate CSS.

.ghost {
  opacity: 0.0;
}

Ca vizibilitate: ascuns, opacitate: 0,0 va lăsa un spațiu gol în care se află elementul HTML. Amintiți-vă, cu toate aceste tehnici, elementul rămâne o parte a DOM – pur și simplu nu este vizibil pentru utilizatorii normali din browserele lor.

Fugi! Aleargă departe, departe!

O modalitate finală prin care puteți ascunde un element este doar să îl mutați atât de departe de pagină încât ar trebui să micșorați enorm pentru a-l vedea.

Pentru a face acest lucru, utilizați mai întâi poziţie Proprietate CSS pentru a da elementului un absolut poziția pe pagină (spre deosebire de relativ la alte elemente HTML).

Apoi, puteți muta elementul de pe pagină cu un număr arbitrar de mare de pixeli:

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

De ce ai face asta? Ei bine, este bine pentru accesibilitatea conținutului dvs. Cititoarele de ecran – pe care persoanele cu deficiențe de vedere le folosesc pentru a naviga pe internet – pot prelua acest conținut, iar toți ceilalți nu vor ști că conținutul este acolo.

Pentru cele mai bune rezultate, poziționați aceste elemente invizibile spre stânga în loc de sus sau de jos, ceea ce poate confunda cititoarele de ecran.

Fiind o fantomă pentru Halloween

Când puneți toate cele 4 tehnici laolaltă, aveți un aspect destul de cool costum de Halloween cu efort redus:

Cum sa faci HTML sa dispara complet

Am făcut acest lucru cu ajutorul designerului și camperului din Austin, Wes Searan.

Poti ridică unul până la sfârșitul acestui sfârșit de săptămână – la bărbați și bărbați.

Scriu doar despre programare și tehnologie. daca tu urmărește-mă pe Twitter Nu-ți voi pierde timpul. ?