11 CSS-i saladust, mida peate teadma 2020. aastal

CSSi trikid
04.30 Pildikrediit: Aga Naplocha

Isegi kui olete CSS-iga tuttav ja kaunite paigutuste loomisel, saate siiski avastada uusi CSS-i omadusi ja funktsioone. Neid kasutades saate rohkem mõjutada seda, kuidas sisu veebisaidil käitub, samuti on teil rohkem vabadust, kuidas rakendada loomingulisi võtteid selliste elementide jaoks nagu fotograafia.

Selles õpetuses uurime mõnda vähem tuntud omadust. Nendega katsetamisel pidage meeles, et kõik brauserid ei toeta nimetatud funktsioone, nii et tasub neid vaadata Kas ma võin kasutada sait. Vaatame lühikesi ja kokkuvõtlikke näiteid.

Kas soovite rohkem CSS-i inspiratsiooni? Vaadake seda tippu valikut CSS-i animatsioon näited, aga ka rohkem CSSi trikid . Kui alustate saidi ehitamist nullist, proovige meie suurepäraste loendit veebisaitide ehitajad ja vara hoidmiseks saada õigus pilvemälu sinu jaoks.

Mida vajate:

  • Teie lemmik veebibrauser ja arendaja tööriistad - soovitan kasutada Firefoxi või Google Chrome'i, kuna need toetavad kõiki funktsioone, mida selles õpetuses kasutan.
  • Koodiredaktor.
  • Varad nagu pildid ja fondid (saate neid alla laadida saidilt minu hoidla .

Tüpograafiline suund

On mitmeid CSS-i omadusi, mis aitavad meil teksti veebis paremaks muuta.

01. Tekstilöök

Oleme tuttavad Adobe Illustratori või vektorijoonistusrakenduste tekstilöögiga (kontuuriga). Saame sama efekti rakendada, kasutades tekstilöök vara.

Hea on teada, et saate animeerida tekstilöök CSS-iga, kuid ainult löögi värv - käigu laius pole.

footer h3 { /*more styles in style.css*/ /*...*/ -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #000; }

02. :: esimene täht

See pseudoelement rakendab stiile plokitaseme elemendi kõige esimese tähe suhtes. Tänu sellele saame tutvustada efekte, mis on meile tuttavad trüki- ja paberajakirjadest.

p.intro:first-letter { font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0 ; }

03. Gradiendi tekst

Lõpuks saame oma tekstile kasutada gradienti ilma keeruliste meetoditeta. Uurime, kuidas saaksime seda pilkupüüdvat efekti oma veebisaidil tutvustada.

h2.contact-heading { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background: radial-gradient(#ffbc00, #ff65aa); }

Sisu kontroll

Tänu järgmistele omadustele saame nautida suuremat kontrolli teksti või piltide käitumise üle, olenemata nende mahuti suurusest või proportsioonist.

04. Liiniklamber

The joon-klamber omadus kärbib teksti kindla arvu ridade korral. Selle toimimiseks vajame kolme omadust.

The kuva vara tuleb seada väärtusele -veebikarp või -veebikomplekt-sisseehitatud kast , -veebikast-kasti-orienteeruda seatud vertikaalseks ja ülevool peidetud muidu sisu ei lõigata.

p.shortened { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

04. Veergude arv

Tänu veergude arv atribuudi järgi jaotab brauser sisu ühtlaselt määratud arvu veergudes.

.outro { column-count: 2; }

05. Märgiühik

Sõltuvalt märgiüksusest saame oma teksti laiust või kõrgust piirata. As Toob välja Eric Mayer , ch unit tähistab praeguse fondi tähemärgi '0' (null) laiust, mis on eriti kasulik koos monospace-fontidega. See muutub fondiperekonna muutudes. Me võime seda käsitleda natuke nagu x-kõrgus kuid ch põhineb 0-tähe laiusel x asemel.

h2.contact-heading { /*more properties in the CSS file* … max-width: 8ch; }

06. Sõnamurdesilt

Kuigi see õpetus põhineb CSS-i trikkidel, tahan mainida ka ühte HTML-i silti: . See on HTML-element, mis määratleb sõnamurdmise võimaluse - positsiooni tekstis, kus brauser võib joone katkestada. Mõnes olukorras võib see olla mugav - seda saab kasutada, kui sõna on üsna pikk ja kardame, et brauser rikub sõna valedes kohtades, näiteks telefoninumber.

+0043234-343234-234

07. Objekti sobivus

Kui mõtlete, kas suudame pildi käitumist sõltuvalt konteineri suurusest kontrollida, soovitan teil seda vaadata objektile sobiv vara. See määratleb, kuidas sisu või tuleks mahuti suurust muuta. Meil on neli võimalust: täitke , sisaldama , kate ja vähendamine . Näiteks kate väärtusega asendatakse asendatud sisu selle proportsioonide säilitamiseks kogu elemendi sisukasti täitmise ajal.

.object-fit { object-fit: cover; height: 400px; width: 100%; }

Dekoratiivsed ja loomingulised elemendid

CSS-i trikid: sisu

Kuigi andmete visualiseerimise teegid, nagu d3.js, pakuvad terviklikku diagrammide funktsionaalsust, võiksite lihtsate sektordiagrammide jaoks proovida CSS-i?04.30 Pildikrediit: Aga Naplocha

Liigume mõne uue elemendi ja värvi lisamisega oma veebisaidile.

08. Kooniline gradient

Kui olete kunagi mõelnud, kas saaksite sektordiagrammi luua ainult CSS-i abil, on hea uudis see, et saate seda tegelikult teha! Ja lahendus sellele viib meid koonus-gradient funktsioon. See loob pildi, mis koosneb gradiendist koos määratud värviülekannetega, mis on pööratud ümber keskpunkti (selle asemel, et kiirata keskpunktist, nagu leiate radiaal-gradient ).

.piechart { background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px; }

09. Loendurid

Numbriloendis numbrite kujundamiseks peame mängima omadustega, mida nimetatakse CSS-loenduriteks. CSS-loendurid võimaldavad teil reguleerida sisu välimust vastavalt dokumendi asukohale.

CSS-i trikid: andmed

CSS-loendurid võimaldavad teil reguleerida sisu välimust vastavalt dokumendi asukohale, pakkudes mugavat häkkimist nummerdatud loendite kujundamiseks04.30 Pildikrediit: Aga Naplocha

CSS-loendurite kasutamiseks tehke järgmist.

  • Loendurite väärtust saab suurendada või vähendada vastu juurdekasv
  • Saame kuvada loenduri väärtuse, kasutades loendur () või loendurid () funktsiooni sisu atribuudilt
ol.numbered-list > li:before { content: counter(li); position: absolute; box-sizing: border-box; width: 45px; height: 45px; background: #f3b70f; border-radius: 50%; } ol.numbered-list li { position: relative; left: 0px; list-style: none; counter-increment: li; }

10. Muutke teksti valiku värvi

Teksti valimise värvi muutmiseks :: valik on pseudoelement, mis alistab brauseri tasemel teksti esiletõstetud värvi asendamiseks valitud värviga. Värvi saab näha, kui olete kursoriga sisu valinud.

::selection { background-color: #f3b70f; }

11. @tugi

Alati, kui soovite kasutada CSS-i atribuuti, mida kõik brauserid ei toeta, on funktsioonipäring nimega @toetus reegel. See võimaldab teil kontrollida brauseri tuge CSS-i atribuut: väärtuspaarid. Kood sisaldub koodis @toetus plokk renderdatakse ainult siis, kui need tingimused on täidetud.

Kui brauser ei saa aru @toetus , ei genereeri see ka antud osa koodist.

@supports (text-stroke: 4px navy;) { .example { text-stroke: 4px navy; } }

Kuigi mõnel atribuudil võib siiski olla probleeme brauserite ühilduvusega, ärge kartke nendega mängida. Kuigi teie brauseri tugi võib praegu olla piiratud, saavad neist tulevikus tõenäoliselt tavapraktikad. See on lihtsalt aja küsimus. Kui soovite tagada, et need efektid laaditakse ainult brauseritesse, mis neid saavad esitada, kasutage nuppu @support reegel stiilide mähkimiseks.

Kui soovite täiendavat inspiratsiooni, käivitasid Jen Simmons ja Mozilla a Paigutusmaa , YouTube'i kanal, mis on täis veebikujunduse ja -arenduse videoid, sealhulgas tööriistu ja tehnikaid, uusi ja parimaid tavasid. Lisaks saate ka teada, kuidas värvikontrasti testida ja värvipimedust simuleerida Firefoxi DevTools . Ja kui kaalute oma veebisaidi keerukust, veenduge, et teie veebileht oleks veebimajutus teenus peegeldab teie ambitsioone.

See sisu ilmus algselt netiajakirjas. Näe rohkem veebidisaini sisu siin .

Loe rohkem: