Ascundeți articolele din css ca posibile stiluri folosind CSS în mai multe moduri. Puteți ascunde folosind opacitatea setarea la 0, vizibilitate ascunse, afișare, sau setați la valori extreme nici unul până la sfârșit.
V-ați întrebat vreodată de ce atât de multe metode pentru ascunderea elementelor, deși scopul final este același?
Dar, de fapt, toate metodele sunt diferite unele de altele, iar caracteristicile lor ne determina când să utilizeze una sau alta metoda. Acest articol va aborda doar diferențe mici în metodele pe care ar trebui să ia în considerare utilizarea pe care le atunci când doriți să utilizați stiluri CSS pentru a ascunde elementul.
1 ascunderea metodei elementului folosind: Opacitate - (opacitate)
Această proprietate stabilește elementul Opacitate de transparență. Acesta nu este conceput pentru a schimba cadrul foarte conturată pentru elementul. Aceasta înseamnă că setarea Opacity la 0, elementul vizual va fi ascuns, dar încă bude avea loc și influența sa asupra aspectul paginii sale web. Acesta va răspunde, de asemenea, la o acțiune de utilizator.
Dacă intenționați să utilizați proprietatea Opacitate pentru elementele ascunse de citire, este o metodă proastă, deoarece acesta va fi disponibil pentru lectură, precum și alte elemente ale paginii web, cu alte cuvinte, nu simți diferența cu și fără Opacitate.
Trebuie remarcat faptul că proprietatea de opacitate poate fi animată și de a folosi unele efecte mari.
Uitați-vă la următoarea HTML si CSS
Atunci când cursorul mouse-ului pe elementul ascuns al doilea bloc se mișcă ușor de la opacitate la transparență totală. Blocul are un cursor indicator pentru a arăta posibilitatea de a interacționa.
2 Metode Ascunde elemente folosind stiluri CSS: Vizibilitate - (vizibilitate)
Următoarea proprietate a listei noastre - vizibilitate. setare care va ajuta ascunde elementul nostru. Această proprietate, precum și opacitate afectează încă aspectul nostru web - pagina. O trăsătură distinctivă este că nu va comite nici o interacțiune cu utilizatorul atunci când elementele găsite de proprietate - ascunse utilizatorului. Elementul nu va fi disponibil pentru un cititor de ecran. Această proprietate poate fi configurată prin specificarea valorilor de început și sfârșit, astfel încât tranziția între diferitele state par a fi moale, neted, fara a fi aspru.
Exemplul poate observa diferente de vizibilitate de opacitate
După o etichetă
. în interiorul tag-ul
De îndată ce treceți cu mouse-ul peste tex
3 metode, folosind ascunde: display - (reflexie)
afișa proprietate pentru a ascunde elemente în adevăratul sens al cuvântului. Setarea afișajului la nici unul asigură faptul că modelul de cutie nu se formează deloc. Folosind această proprietate, cu obiecte ascunse, după nici un spațiu gol rămâne. Semnul distinctiv este momentul în care interacțiunea cu utilizatorul nu poate fi în valoare de timp pentru a afișa nici unul. astfel încât disponibilitatea lectură nu va fi posibil, deoarece - deși acest element nu există.
Toate elementele noastre viitoare sunt, de asemenea, ascunse. Această proprietate poate fi animată, astfel încât tranziții între stările întotdeauna ascuțite.
Vă rugăm să rețineți că elementul este disponibil prin intermediul DOM. Se poate lucra cu ea ca și cu orice alt element.
Uită-te la CSS:
Vei vedea că a doua unitate are un punct cu un set de proprietăți de afișare. dar rămâne invizibil. Aceasta este o altă diferență între vizibilitate: ascunse și afișare: nici unul. În primul caz, se întâmplă pentru a seta proprietatea de vizibilitate este vizibil, nu este ceva ce se întâmplă pe ecran. Toate unitățile rămân ascunse, indiferent de proprietățile specifice ale ecranului.
4 Metoda folosind hide: Poziția - (poziționare)
Folosind CSS, puteți face:
Acesta este ilustrat modul în care să se ascundă mișcarea elementului, și funcționează în principal ca în exemplul anterior, în demonstrația propusă:
Aici, sarcina principală - pentru a stabili un rezultat negativ de valori superioare și inferioare extreme sunt posibile pentru o lungă dispariție de pe ecranul de elementul dorit. Unul dintre beneficiile (potențial dezavantaj) metoda - aceasta este ceea ce conținutul - elementul poziționat și citit de pe ecran absolut.
Nu puteți utiliza această metodă pentru elementele care ar putea obține un accent, deoarece poate provoca tranziții neașteptate, atunci când concentrându-se pe acest element. Această metodă este deseori folosită pentru a crea un buton radio personalizate sau comutatoare.
5 metodă, element de ascundere prin: Clip-cale - (cale legat)
Esche o modalitate de a ascunde elementele - această legătură ei. Anterior, s-ar putea face cu un clip de proprietate. dar aceasta este o proprietate învechită, mult mai modern recunoscut - clip-cale.
Rețineți că proprietatea clip-cale. este utilizat de mai jos, nu poate fi acceptată acum în IE.
Dacă utilizați fișier SVG extern în clip-cale. menținerea unui chiar mai limitat (nu se aplică următoarelor). clip-cale de proprietate pentru a ascunde elementele este după cum urmează:
Aici puteți vedea acțiunea:
Dacă treceți cursorul pe primul element, acesta va afecta al doilea element, în ciuda faptului că acesta este ascuns caracteristica clip-cale. Dacă faceți clic pe un element de acest tip display-uri ascunse, pentru a arăta elementul nostru, care a fost acolo împreună. Acest text va fi accesibil cititorilor ecran, iar această proprietate este utilizat împreună cu clema în mai multe site-uri pe WordPress.
Chiar dacă elementul ascuns nu este vizibil, toate elementele din jurul lucrării și, de asemenea, au dimensiunile originale dreptunghiulare. Rețineți că interacțiunea cu utilizatorul, atât atunci când treci și când se face clic este imposibil în afara o anumită zonă. În cazul nostru, acest lucru înseamnă că nu există nici o interacțiune directă cu utilizatorul cu element ascuns. Această proprietate poate fi animată în diferite moduri de a crea efecte noi.
Acest articol a fost revizuit de 5 metode pentru a ascunde elemente folosind CSS. Fiecare proprietate este diferit unul de altul, și știind ceea ce doriți să realizeze, va trebui să utilizați o caracteristică specifică, ceea ce este important pentru web - dezvoltatori.