10 (Veel) CSS trikke Te tõenäoliselt vaatasin

Seal on palju CSS-fragmente, mida veebiarendajad võivad teatud tulemuste saavutamiseks kasutada, ja siis on olemas CSS-trikke, mida saate kasutada asjade, näiteks sisu vertikaalseks joondamiseks. CSS on pidevalt arenev üksus, jälle ja jälle komistame jahedate CSS trikkide pärast, mis on lõbus teada.

Tänases postituses tutvustan teid 10 veel CSS atribuuti ja nippe, mida te ei tea.

1. Kirjutage vertikaalselt

Seal on CSS atribuut kirjutamisrežiimis mis aktsepteerib ühte neist kolmest väärtusest; horisontaalne-tb, vertikaalne-rl ja vertikaalne-lr.

horisontaalne-tb on vaikimisi ja see põhjustab tüüpilise vasakult parema horisontaalse teksti voolu elemendis.

The vertikaalne- * väärtused on aga vertikaalse ploki voolu jaoks, põhjustades brauserite teksti ülalt alla kirjutamist. Sisse vertikaalne-rl, eelmiste ridade vasakule küljele lisatakse uued read ja vastupidi vertikaalne-lr.

See on kasulik Hiina ja jaapani keelte kuvamine mis on tavaliselt kirjutatud ülalt alla ja ka siis, kui soovite teksti kuvada vertikaalselt, et salvestada horisontaalset ruumi, nagu tabeli päistes.

Märge: Kui soovid juhtida üksikuid tähti, võite kasutada teksti-orientatsiooni, pöörates neid püsti või külgsuunas vastavalt soovile.

 -webkit-writing-mode: vertikaalne-rl; -ms-kirjutamisviis: tb-rl; kirjutamisrežiim: vertikaalne-rl; 

2. Värviväärtuse taaskasutamine

Märksõna currentColor kannab väärtust värv atribuuti ja seda saab kasutada muudes atribuutides, mis aktsepteerivad värviväärtusi taustal.

div taust: lineaarne gradient (90deg, currentColor 50%, must 50%);… värv: # FFD700; / * currentColor on # FFD700 * / 

3. Blend Taustad

Elemendil võib olla rohkem kui üks taust (taustavärv ja mitu taustapilti). The taust-segu-režiim segab kõik need kokku vastavalt antud segamisrežiimile. Praegu on kokku 16 segamisrežiimi.

taust-segu-režiim: erinevus; 

4. Blend Elements

mix-blend-mode segab kattuvate elementide sisu ja tausta. Chrome ei toeta kõiki režiime, kuigi Firefox seda teeb.

mix-blend-mode: värv; 

Võtsin kaks elementi img näitab roosi ja a span graafilise taustaga, virnastati neid ja kasutati mõningaid mix-blend-režiime.

5. Ignoreeri Pointeri sündmusi

Teil on võimalik teha ükskõik millise kursorijuhu jaoks ükskõikne nähtus, kasutades ühte atribuuti, mida nimetatakse pointer-sündmused. Andes pointer-sündmused väärtus mitte ükski elemendis on see takistuseks sellele, et see oleks sihtmärgiks kursori sündmustele. IE11 + tugi.

Järgmises demos on kahe pildi vahel üksteise peale asetatud märkeruut. Mõlemad kujutised on kantud pointer-sündmused: pole, võimaldab meil klõpsata nende all maetud ruudule. Kontrollitud oleku põhjal kuvatakse soovitud pilt, kui teine ​​peitub.

6. Kaunista Split kastid

Tavaliselt, kui kasti on jagatud (näiteks siis, kui inline element tunneb reavahetusi), ei ole jagatud osade servadel ühtegi kasti stiili ega pilku. Selle vältimiseks saate kasutada karp-kaunistus-murda: kloon.

Nüüd järgige seda eeskuju ja varajase "jõulud horisondi" meeldetuletusega, siin on nimekiri Santa's Reindeerist, mis kõik on kirjutatud ühte span! Ho! Ho! Ho!

Märge: Kuigi kaasaegne IE toetab karp-kaunistus-murda, jagatud osa serval ei ole renderdamine sujuv ja taust on viilutatud. Aga see muudab kast-vari kenasti, mistõttu kasutasin nii piiril kui ka taustal kasti varje. IE servades on ka horisontaalne polsterdus, mida võiksite tühikutega täita.

7. Ahenda tabeli elemendid

nähtavus: kollaps on atribuut, mis on loodud just tabeli elementide, näiteks ridade ja veergude jaoks. Kui midagi muud kasutatakse, käitub see nähtavus: peidetud. Chrome kohtleb seda siiski peidetud isegi lauaelemendid.

Kui määrate nähtavus: kollaps lauaelemendil on see peidetud ja selle ruumi täidab lähedal asuv sisu - nagu see, kuidas seda kasutada kuva: pole selle asemel.

Kuid erinevalt kuva: pole mis muudab tabeli paigutust pärast ruumi eemaldamist, jääb paigutus samaks nähtavus: kollaps. Siin näete, kuidas see üksikasjalikumalt toimib.

8. Koostage veerud

Saate oma sisu jaoks luua veergu paigutuse veerud atribuut. See võimaldab teil määrata, mitu veergu (veergude arv) ja kuidas iga veeru laius (veeru laius) tuleb muuta elemendiks.

Kui sisu on muu kui tekst, nagu näiteks pilt, peate meeles pidama selle laiust vastavalt veerule. Järgmise näite puhul kasutasin ma ainult veergude arv täpsustada, kui palju veerge soovin.

-webkit-column-count: 2; -moz-column-count: 2; veergude arv: 2; 

9. Tee elementide suuruse muutmine

Elemendi saab CSS3 atribuudiga muuta muutmisele (vertikaalselt, horisontaalselt või mõlemalt) suuruse muutmiseks . Läbilaskevõime a tekst seda saab kasutada sama.

suuruse muutmine: vertikaalne; suuruse muutmine: horisontaalne; suuruse muutmine: mõlemad; suuruse muutmine: puudub; 

10. Loo mustreid

Ühe elemendi jaoks võib olla mitu CSS3 gradienti (nii lineaarsed kui ka radiaalsed) ja neid saab mustrite loomiseks üksteisele peale panna. See võimaldab meil luua elementidele ilusad taustad ilma väliseid pilte kasutamata. Töö tegemine võib aga vajada natuke praktikat.