10 (Több) CSS trükkök valószínűleg felülmúltak
Rengeteg CSS-töredék van, amit a webfejlesztők használhatnak bizonyos eredmények eléréséhez, majd vannak olyan CSS-trükkök, amelyeket a tartalom függőleges beállításához használhat. A CSS folyamatosan fejlődő entitásként újra és újra elbukik a hűvös CSS trükkökről, amelyek szórakoztatóak.
A mai hozzászólásban bemutatom 10 további CSS attribútum és trükkö, amit esetleg nem tud.
1. Írjon függőlegesen
Van egy CSS attribútum írás-mód amely elfogadja e három érték egyikét; vízszintes tb, függőleges rl és függőleges lr.
vízszintes tb az alapértelmezett, és a jellemző bal és jobb vízszintes szöveg áramlását egy elemben okozza.
A függőleges-* Az értékek azonban függőleges blokkáramlásra vonatkoznak, és a böngészők a szöveget felülről lefelé írják. Ban ben függőleges rl, az előző sorok bal oldalán új sorok kerülnek hozzáadásra, és fordítva függőleges lr.
Ez hasznos a kínai és a japán nyelvek megjelenítése amelyek tipikusan felülről lefelé íródnak, és akkor is, ha a szöveget függőlegesen szeretné megjeleníteni a vízszintes tér mentéséhez, mint például a táblázatfejlécekben.
Jegyzet: Ha az egyes betűk irányát kívánja vezérelni, akkor a kívánt szöveg szerint a szöveges tájolással felfelé vagy oldalra fordíthatja őket.
-webkit-írási mód: vertikális-rl; -ms-írási mód: tb-rl; írási mód: függőleges-rl;
2. Használja újra a színértéket
A kulcsszó currentColor hordozza az értékét szín attribútum, és más attribútumokban is használható, amelyek elfogadják a színértékeket háttér.
div háttér: lineáris gradiens (90deg, currentColor 50%, fekete 50%);… szín: # FFD700; / * currentColor # FFD700 * /
3. Háttérképek keverése
Egy elemnek több háttérképe is lehet (háttérszín és több háttérkép). A background-blend-mód mindegyiket összekeveri az adott keverési mód szerint. Jelenleg összesen 16 keverési mód van.
háttér-keverési mód: különbség;
4. Elemek keverése
A mix-blend-mód ötvözi az átfedő elemek tartalmát és hátterét. Úgy tűnik, hogy a Chrome nem támogatja az összes üzemmódot, még akkor is, ha a Firefox.
mix-blend-mode: szín;
Két elemet vettem, egy img a rózsa és a arasz grafikus háttérrel, egymásra rakva és néhány mix-blend módban.
5. Figyelmen kívül hagyja a Pointer eseményeket
Egy adott attribútum segítségével egyetlen elemet is elhanyagolhat bármely mutató eseményre pointer-events. Adva pointer-events az értéke egyik sem egy elemben ez megakadályozza, hogy célpont legyen a mutató események számára. Az IE11 + támogatás tartalmazza.
A következő demóban egy jelölőnégyzet található két egymás fölé egymásra helyezett kép között. Mindkét kép hordozható pointer-események: nincs, lehetővé teszik számunkra, hogy rákattintunk a rájuk helyezett kockára. A jelölőnégyzet ellenőrzött állapota alapján a kívánt kép megjelenik, míg a másik rejtett.
6. Díszítsd a Split dobozokat
Jellemzően, ha egy doboz meg van osztva (mint például, ha egy soros elem tanúi a sorszakadásoknak), az osztott részek szélei nem rendelkeznek semmilyen dobozstílussal, és szeletelve vannak. Ennek elkerülése érdekében használhatja box-dekoráció-break: klón.
Most kövessük ezt a példát és egy korai "karácsony a horizonton" emlékeztetőt, itt van egy lista a télapó rénszarvasairól, amelyek mindegyikét egy egyetlen arasz! Ho! Ho! Ho!
jegyzet: Bár a modern IE támogatja box-dekoráció-break, az osztott szakasz szélénél a renderelés nem sima és a háttér szeletelve néz ki. De ez teszi box-shadow szépen, ezért a keret és a háttér számára használt doboz árnyékokat használtam. Az IE szélein is hiányzik a vízszintes párnázás, amit a terek kitöltéséhez használhat.
7. A táblázatelemek összecsukása
láthatóság: összeomlás egy attribútum, amelyet csak az asztalelemekhez, például sorokhoz és oszlopokhoz hoztak létre. Ha másként használják, úgy viselkedik láthatóság: rejtett. A Chrome azonban úgy kezeli, mintha rejtett még asztali elemek esetében is.
Ha hozzárendel láthatóság: összeomlás egy asztali elemen rejtve van, és a helyét a közeli tartalom tölti ki - mint ahogyan azt használná display: none helyette.
De ellentétben display: none amely módosítja a táblázat elrendezését a hely eltávolítása után, az elrendezés változatlan marad láthatóság: összeomlás. Láthatjuk, hogyan működik itt részletesebben.
8. Oszlopok létrehozása
A oszlopok tulajdonság. Ezzel megadhatja, hogy hány oszlopot (oszlop száma) és az egyes oszlopszélességek (oszlop szélesség) egy elemben kell megjeleníteni.
Ha a tartalom nem szöveges, mint például egy kép, akkor azt is figyelembe kell vennie, hogy a szélessége megfelel az oszlopnak. A következő példa esetében csak azt használtam oszlop száma megadni, hogy hány oszlopot akarok.
-webkit-column-count: 2; -moz-column-count: 2; oszlopszám: 2;
9. Készítse el az elemeket méretezhetővé
Egy elem átméretezhető (függőlegesen, vízszintesen vagy mindkettő) a CSS3 attribútummal átméretezése . Az átméretezhetőség a textarea ugyanezzel a funkcióval letiltható.
átméretezés: függőleges; átméretezés: vízszintes; átméretezés: mindkettő; átméretezés: nincs;
10. Minták létrehozása
Egy elemhez több CSS3 gradiens (egyaránt lineáris és radiális) lehet, és minták létrehozásához egymásra rakhatók. Ez lehetővé teszi számunkra hozzon létre szép elemeket az elemek számára külső képek használata nélkül. A munka megteremtése azonban egy kis gyakorlatot igényelhet.
