10 (viac) CSS triky, ktoré ste pravdepodobne prehliadli

Existuje veľa úryvkov CSS, ktoré weboví vývojári môžu použiť na dosiahnutie určitých výsledkov, a potom existujú triky CSS, ktoré môžete použiť na veci, ako je zarovnanie obsahu vertikálne. Keď sa CSS stáva stále sa vyvíjajúcim subjektom, opakovane narazíme na cool triky CSS, ktoré sú zábavné vedieť.

V dnešnom príspevku vás predstavujem 10 ďalších atribútov a trikov CSS, ktoré možno neviete.

1. Napíšte vertikálne

Existuje atribút CSS nazvaný písanie-mode ktorá akceptuje jednu z týchto troch hodnôt; horizontálne-TB, vertikálne-rl a vertikálne-lr.

horizontálne-TB je predvolené a spôsobuje typický ľavý až pravý horizontálny tok textu v prvku.

zvislú a * Hodnoty sú však pre vertikálny tok blokov, čo spôsobuje, že text je zapisovaný zhora nadol pomocou prehliadačov. v vertikálne-rl, nové riadky sa pridávajú vľavo od predchádzajúcich a naopak vertikálne-lr.

To je užitočné pre zobrazovanie jazykov ako čínština a japončina ktoré sú zvyčajne napísané zhora nadol a tiež vtedy, keď chcete zobraziť text vertikálne, aby ste ušetrili horizontálny priestor, napríklad v hlavičkách tabuľky.

Poznámka: Ak chcete ovládať smer jednotlivých písmen, môžete ich podľa potreby použiť na orientáciu textu.

 -webkit-writing-mode: vertikálne-rl; -ms-režim písania: tb-rl; režim písania: vertikálne-rl; 

2. Opätovne použite hodnotu farieb

Kľúčové slovo currentColor nesie hodnotu farba atribút a môže byť použitý v iných atribútoch, ktoré akceptujú hodnoty farieb, ako je pozadie.

div pozadie: lineárny gradient (90deg, súčasná farba 50%, čierna 50%); farba: # FFD700; / * currentColor je # FFD700 * / 

3. Zmiešajte pozadie

Prvok môže mať viac ako jedno pozadie (farbu pozadia a viaceré obrázky na pozadí). background-blend-mode zmieša všetky z nich dohromady podľa daného režimu miešania. V súčasnosti existuje celkovo 16 režimov miešania.

Režim blend-pozadia: rozdiel; 

4. Blend Elements

blend-blend-mode zmieša obsah a pozadie prekrývajúcich sa prvkov. Zdá sa, že prehliadač Chrome nepodporuje všetky režimy, hoci to Firefox robí.

mix-blend-mode: farba; 

Vzal som dva prvky, a img zobrazujúci obrázok ruže a a rozpätie s grafickým pozadím, naskladali ich a použili niekoľko režimov mix-blend.

5. Ignorovať udalosti ukazovateľa

Môžete urobiť prvok nezabudnuteľný na akúkoľvek udalosť ukazovateľa pomocou jedného atribútu nazvaného Ukazovateľ-events. Dávať Ukazovateľ-events hodnota nikto v prvku to bráni tomu, aby bol cieľom na udalosti ukazovateľov. Podpora IE11 + vrátane.

V nasledujúcom ukážke je zaškrtávacie políčko pod dvomi obrázkami naskladanými nad sebou. Obidva obrázky majú ukazovatele-udalosti: žiadne, čo nám umožňuje kliknúť na zaškrtávacie políčko pod nimi. Na základe kontrolovaného stavu začiarkavacieho políčka sa zobrazuje požadovaný obrázok, zatiaľ čo druhý skrytý.

6. Ozdobte rozdelené boxy

Typicky, keď je škatuľka rozdelená (ako keď inline prvok je svedkom zlomov línie), okraje rozdelených častí sú zbavené akýchkoľvek štýlov schránok a vyzerajú nakrájané. Aby ste tomu zabránili, môžete ho použiť box-dekorácie-break: clone.

Teraz sledujte to s príkladom a časným pripomienkou "Vianoce v horizonte", tu je zoznam samičiek Santa, všetko napísané v jednom rozpätie! Ho! Ho! ho!

Poznámka: Aj keď moderná IE podporuje box-dekorácie-break, na okraji hranice rozdelených častí, vykresľovanie nie je hladké a pozadie vyzerá nakrájané. Ale to robí box-shadow pekne, čo je dôvod, prečo som použil tieňové stĺpce pre okraj aj pozadie. Neexistuje tiež horizontálna výplň v okrajoch v IE, ktorú možno budete chcieť vyplniť medzerami.

7. Zbaliť prvky tabuľky

viditeľnosť: zrútenie je atribút vytvorený práve pre prvky tabuľky, ako sú riadky a stĺpce. Ak sa použije v čomkoľvek inom, bude sa správať ako viditeľnosť: skryté. Chrome ho však zaobchádza skrytý dokonca aj pre stolové prvky.

Pri priradení viditeľnosť: zrútenie na prvok tabuľky je skrytý a jeho priestor je vyplnený blízkym obsahom - ako by sa správalo pri používaní display: none namiesto.

Ale na rozdiel od toho display: none ktorý upravuje rozloženie tabuľky po odstránení medzery, rozloženie zostáva rovnaké Viditeľnosť: kolaps. Môžete vidieť, ako to funguje podrobnejšie tu.

8. Vytvorte stĺpce

Rozloženie stĺpcov pre obsah môžete vytvoriť pomocou tlačidla stĺpce atribútov. Umožňuje určiť, koľko stĺpcov (Kolóna-count) a ako každá šírka stĺpca (stĺpec šírky) sa majú vykresliť v prvku.

Ak je obsah iný ako text, napríklad obrázok, potom budete musieť mať na pamäti jeho šírku zodpovedajúcu stĺpci. V nasledujúcom príklade som použil len Kolóna-count určiť, koľko stĺpcov chcem.

-počet webkit-stĺpcov: 2; -moz-počet stĺpcov: 2; počet stĺpcov: 2; 

9. Urobiť prvky, ktoré je možné meniť

Element môže byť zmenený (vertikálne, horizontálne alebo oboje) pomocou atribútu CSS3 veľkosť . Menovitá veľkosť v a textarea môžu byť deaktivované pomocou toho istého.

zmena veľkosti: vertikálna; zmena veľkosti: horizontálna; zmena veľkosti: obe; zmena veľkosti: žiadna; 

10. Vytvorte vzory

Môže existovať viac gradientov CSS3 (lineárnych aj radiálnych) pre jeden prvok a môžu byť navzájom nahromadené na vytváranie vzorov. To nám umožňuje vytvorte pekné pozadie pre prvky bez použitia externých obrázkov. Urobiť to môže vyžadovať trochu praxe hoci.