10 (více) CSS triky, které jste pravděpodobně přehlédli

Existuje spousta útržků CSS, které mohou weboví vývojáři použít k dosažení určitých výsledků, a pak existují triky CSS, které můžete použít pro věci, jako je vertikální zarovnání obsahu. S CSS je stále se rozvíjející entitou, znovu a znovu jsme narazit na cool CSS triky, které jsou zábavné vědět.

V dnešním příspěvku vás představuji 10 dalších CSS atributů a triků, které možná nevíte.

1. Napište svisle

Zavolá se atribut CSS režim zápisu která přijímá jednu z těchto tří hodnot; horizontální-tb, vertikální-rl a vertikální-lr.

horizontální-tb je výchozí a způsobuje, že typický levý a pravý horizontální textový tok v prvku.

vertikální-* hodnoty jsou však pro vertikální blokové proudění, což způsobuje, že se text zapisuje prohlížečem shora dolů. v vertikální-rl, Nové řádky jsou přidány vlevo od předchozích a naopak vertikální-lr.

To je užitečné pro zobrazování jazyků jako čínština a japonština které se typicky zapisují shora dolů a také v případě, že chcete zobrazit text svisle pro uložení vodorovného prostoru, jako v záhlaví tabulek.

Poznámka: Pokud chcete ovládat jednotlivé písmena, můžete podle potřeby použít orientaci textu otočením ve svislé nebo boční poloze.

 -webkit-write-mode: vertical-rl; -ms-write-mode: tb-rl; režim zápisu: vertikální-rl; 

2. Znovu použijte hodnotu barvy

Klíčové slovo currentColor nese hodnotu barva a může být použit v jiných atributech, které akceptují hodnoty barev Pozadí.

div pozadí: lineární gradient (90deg, currentColor 50%, černá 50%);… barva: # FFD700; / * currentColor je # FFD700 * / 

3. Pozadí směsi

Prvek může mít více než jedno pozadí (barvu pozadí a více obrázků na pozadí). režim prolnutí pozadí smíchá všechny dohromady podle daného režimu prolnutí. V současné době existuje celkem 16 režimů prolnutí.

režim pozadí-míchání: rozdíl; 

4. Prvky směsi

režim mix-blend kombinuje obsah a pozadí překrývajících se prvků. Chrome zřejmě nepodporuje všechny režimy, i když Firefox dělá.

režim mix-blend: barva; 

Vzal jsem dva elementy img zobrazující obraz růže a rozpětí s grafickým pozadím, naskládat a aplikovat několik režimů mix-mix.

5. Ignorovat události ukazatele

Pomocí jednoho atributu, který je volán, můžete vytvořit prvek, který nepozná žádnou událost ukazatele pointer-events. Darováním pointer-events hodnota žádný v elementu, toto zabrání tomu, aby to bylo cíl k událostem ukazatele. Včetně podpory IE11 +.

V následujícím demu je pod dvěma obrázky nad sebou umístěno zaškrtávací políčko. Oba obrazy nesou ukazatel-události: žádné, umožňuje nám kliknout na zaškrtávací políčko pod nimi. Na základě zaškrtnutého políčka se zobrazí požadovaný obrázek, zatímco druhý se skryje.

6. Ozdobte rozdělené krabice

Obvykle, když je box rozdělen (jako když je inline element svědkem zlomů řádků), hrany rozdělených částí neobsahují žádné styly boxů a vypadají nařezané. Abyste tomu zabránili, můžete použít box-decoration-break: klon.

Teď následovat to s příkladem a brzy "Vánoce na obzoru" připomínkou, zde je seznam sobů Santa je všechny napsané v jednom rozpětí! Ho! Ho! Ho!

Poznámka: I když moderní IE podporuje box-decoration-break, na okraji hrany rozdělené části není vykreslování hladké a pozadí vypadá řezané. Ale dělá to box-stín hezky, což je důvod, proč jsem použil box stíny pro hranice i pozadí. Tam je také absence horizontální polstrování v okrajích v IE, které můžete chtít vyplnit s mezerami.

7. Sbalit prvky tabulky

viditelnost: kolaps je atribut vytvořený pouze pro elementy tabulky, jako jsou řádky a sloupce. Pokud se použije na cokoliv jiného, ​​bude se chovat jako viditelnost: skrytá. Chrome to však chová stejně skrytý i pro prvky tabulky.

Při přiřazení viditelnost: kolaps na elementu tabulky je skrytý a jeho prostor je vyplněn blízkým obsahem - jako by se choval při používání zobrazení: žádné místo toho.

Ale na rozdíl od zobrazení: žádné který upraví rozložení tabulky po odstranění místa, rozvržení zůstane stejné v viditelnost: kolaps. Zde můžete vidět, jak to funguje podrobněji.

8. Vytvořit sloupce

Pomocí sloupce sloupců atribut. Umožňuje určit, kolik sloupců (počet sloupců) a jak šířka každého sloupce (šířka sloupce) mají být vykresleny v prvku.

Pokud je obsah jiný než text, například obrázek, pak musíte mít na paměti jeho šířku odpovídající sloupci. Pro následující příklad jsem použil pouze počet sloupců určit, kolik sloupců chci.

-webkit-column-count: 2; -moz-sloupec-počet: 2; počet sloupců: 2; 

9. Proveďte změnu velikosti prvků

Prvek může být změněn (vertikálně, horizontálně nebo obojí) pomocí atributu CSS3 změnit velikost . Změna velikosti v a textarea lze ji zakázat.

změna velikosti: vertikální; změna velikosti: horizontální; změna velikosti: obojí; změna velikosti: žádné; 

10. Vytvořit vzory

Pro jeden prvek může existovat více CSS3 přechodů (lineárních i radiálních) a mohou být na sebe navrstveny, aby se vytvořily vzory. To nám umožňuje vytvořit pěkné pozadí pro prvky bez použití externích obrazů. Jeho práce však může vyžadovat trochu praxe.