CSS stílusokat módszerek elrejtése elemet css
Elrejtése elemeket a css felhasználásával lehetséges CSS stílusok sok. El tudja rejteni a fényelnyelés beállítás 0, láthatósága, kijelző, vagy a Nincs szélső értékek a végére.
Gondolkozott már azon, hogy miért olyan sok módszer rejtőzik tárgyakat, bár a végső cél ugyanaz?
Valójában azonban a módszerek különböznek egymástól, és azok jellemzői kér bennünket, hogy mikor kell használni az egyik vagy a másik módszer. Ez a cikk foglalkozik csak kis különbségek módszer, amit érdemes használni őket, ha a használni kívánt CSS stílusokat, hogy elrejtse az elem.
1 elrejtik elem módszer segítségével: opacitás - (opacitás)
Ez a tulajdonság állítja Opacity eleme az átláthatóság. Nem célja, hogy módosítsa a nagyon kontúros keret elem. Ez azt jelenti, hogy beállítása Opacity értéke 0, a vizuális elem lesz rejtve, de mégis bude elfoglalja helyét és befolyását az elrendezés a weboldal. Azt is reagálni a felhasználói beavatkozásra.
Ha szeretné használni a átlátszatlanság tulajdonság a rejtett elemeket az olvasás, ez egy rossz módszer, hiszen elérhető lesz az olvasás, valamint egyéb elemeit a weboldal, más szóval nem érzi a különbséget, és anélkül, hogy a fedőképesség.
Meg kell jegyezni, hogy az ingatlan homály lehet animált és használja valamilyen nagy hatással.
Vessen egy pillantást az alábbi HTML és CSS
Ha a kurzort a rejtett második blokk elem mozog simán homály, hogy a teljes átláthatóságot. A blokk van egy mutató kurzor megmutatni a lehetőséget, hogy kölcsönhatásba lépnek.
2. Módszerek elrejtése elemek a CSS stílusok: Láthatóság - (láthatóság)
Az alábbi tulajdonság listánkon - re. beállítás, amely segít elrejteni elem. Ez a tulajdonság, valamint a fényelnyelés is hatással vannak az elrendezés a web - oldalt. A megkülönböztető jellemzője, hogy nem követett el semmilyen felhasználói beavatkozásra, ha a talált elemek tulajdon - rejtve maradnak a felhasználó. Az elem nem lesz elérhető, hogy a képernyőolvasó. Ez a tulajdonság lehet beállítani, hogy megadjuk a kezdő és záró értékek, így az átmenet különböző államok közötti tűnnek puha, sima, nem durvaságot.
A példa látható láthatóságát különbségek fényelnyelés
Miután egy tag
. belül a tag
Amint lebeg az egeret a tex
3 eljárás a hide: Display - (reflexió)
megjelenítéséhez ingatlan tárgyak elrejtésére a legigazibb értelemben vett. Ha a kijelzőt sem biztosítja, hogy a doboz-modell nem képződik egyáltalán. Ezzel a tulajdon, a rejtett elemeket, miután nincs üres hely marad. A fémjelzi az idő, hogy a kölcsönhatás a felhasználó nem érdemes megjeleníteni sem. így a rendelkezésre álló olvasás nem lesz lehetséges, mivel - bár ez az elem nem létezik.
Minden jövőbeli mi tételek is rejtettek. Ez a tulajdonság lehet animált úgyhogy közötti átmeneteket állapotokat mindig éles.
Felhívjuk figyelmét, hogy ez az elem elérhető a DOM. Akkor dolgozni vele, mint bármely más elemet.
Nézd CSS:
Látni fogja, hogy a második egység van egy pont, egy sor megjelenítési tulajdonságait. de továbbra is láthatatlan. Ez egy másik különbség visibility: hidden és display: none. Az első esetben történik meg a láthatóság tulajdonság látható, ez nem olyasmi, ami a kijelzőn. Minden egység rejtve maradnak, függetlenül a sajátos tulajdonságai a kijelzőn.
4 módszerrel elrejtése: pozíció - (pozicionálás)
A CSS, megteheti:
Ez szemlélteti, hogyan kell elrejteni a mozgás az elem, és dolgozik főként az előző példában a tervezett bemutató:
Itt a fő feladat -, hogy létrehoz egy negatív alsó és felső értékek lehetségesek hosszú kiszorítása a képernyőn a kívánt elemet. Az egyik előnye (potenciális hátránya) módszer - ez az, amit a tartalma - abszolút pozicionált elem és olvasni a képernyőn.
Nem tudja használni ezt a módszert, hogy a tételek is kap hangsúlyt, mert ez okozhat váratlan átmenetek, ha összpontosítva az elem. Ezt a módszert gyakran használják hozzon létre egy egyéni rádió gombok vagy kapcsolók.
5 módszer, elrejtve elem útján: Clip-path - (ragasztott path)
Esche egyik módja annak, hogy elrejtse az elemek - ez kötés őket. Korábban azt lehetne csinálni egy ingatlan klip. de ez egy elavult ingatlanok, sokkal modernebb elismert - clip-path.
Megjegyezzük, hogy a clip-path tulajdonság. használunk az alábbiakban, most még nem lehet támogatni IE.
Ha külső SVG fájlt a clip-path. fenntartása még korlátozott (ez nem vonatkozik a következő). clip-path tulajdonság, hogy elrejtse az elemek a következők:
Itt láthatjuk az intézkedés:
Ha lebeg a kurzor az első elem, ez hatással lesz a második elem, annak ellenére, hogy ez a rejtett funkció clip-path. Ha rákattint egy ilyen típusú elemből kijelzők rejtve, hogy megmutassuk a tétel, amely már ott együtt. Ez a szöveg lesz elérhető a képernyő olvasók számára, és ez a tulajdonság együtt a klip sok weboldalak WordPress.
Még ha a rejtett elem nem látható, az összes elemet körüli munkát, és szintén az eredeti téglalap méretben. Ne feledje, hogy felhasználói beavatkozás egyaránt, ha lebeg, és ha rákattint lehetetlen kívül egy bizonyos területen. Esetünkben ez azt jelenti, hogy nincs közvetlen felhasználói interakció rejtett eleme. Ez a tulajdonság lehet animált különböző módon, hogy új hatásokat.
Ezt a cikket felül 5 módszerekkel elrejteni elemek CSS segítségével. Minden tulajdonság különbözik egymástól, és tudja, mit akar elérni, akkor lehet, hogy egy meghatározott funkció, amely fontos a web - fejlesztők.