11 CSS paslapčių, kurias turite žinoti 2020 m

CSS gudrybės
04.30 Vaizdo kreditas: Aga Naplocha

Net jei esate susipažinę su CSS ir kuriate gražius maketus, vis tiek galite atrasti naujų CSS ypatybių ir funkcijų. Naudodamiesi jais, turite daugiau įtakos tam, kaip turinys elgiasi svetainėje, taip pat turite daugiau laisvės, kaip pritaikyti kūrybines technikas tokiems elementams kaip fotografija.

Šioje pamokoje ketiname gilintis į keletą mažiau žinomų savybių. Eksperimentuodami su jais, nepamirškite, kad minėtos funkcijos palaikomos ne visose naršyklėse, todėl verta jas patikrinti Ar galiu naudoti svetainėje. Panardinkime keletą trumpų ir glaustų pavyzdžių.



Norite daugiau CSS įkvėpimo? Žiūrėkite šį viršų pasirinkimą CSS animacija pavyzdžių, taip pat daugiau CSS gudrybės . Jei kuriate svetainę nuo nulio, išbandykite mūsų puikių sąrašą svetainių kūrėjai ir, norint laikyti turtą, gauti teisę debesies saugykla tau.



kaip tekstūra maks. 3ds

Ko jums reikės:

  • Jūsų mėgstamiausia interneto naršyklė ir kūrėjų įrankiai - rekomenduoju naudoti „Firefox“ arba „Google Chrome“, nes jie palaiko visas funkcijas, kurias naudoju šioje pamokoje.
  • Kodo redaktorius.
  • Turtas, pvz., Vaizdai ir šriftai (juos galite atsisiųsti iš mano saugykla .

Tipografinė kryptis

Yra keletas CSS ypatybių, kurios padeda mums patobulinti teksto pateikimą internete.

01. Teksto brūkšnys

Mes susipažinome su „Adobe Illustrator“ ar vektorinių piešimo programų teksto braižu (kontūra). Tą patį efektą galime pritaikyti naudodami teksto brūkšnys nuosavybė.



Gera žinoti, kad galite animuotis teksto brūkšnys su CSS, bet tik brūkšnio spalva - smūgio plotis nėra.

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

02. :: pirmoji raidė

Šis pseudoelementas taiko stilius pačiai pirmajai bloko lygio elemento raidei. Dėl to galime pristatyti efektus, kurie mums yra žinomi iš spausdintų ir popierinių žurnalų.

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

03. Gradiento tekstas

Galiausiai mes galime pritaikyti gradientą savo tekstui be jokių sudėtingų metodų. Sužinokime, kaip mes galime pristatyti šį patrauklų efektą savo svetainėje.



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

Turinio kontrolė

Dėl šių savybių galime geriau kontroliuoti, kaip elgsis tekstas ar vaizdai, atsižvelgiant į jų talpyklos dydį ar proporciją.

04. Linijos spaustukas

The linijos spaustukas ypatybė sutrumpina tekstą pagal tam tikrą eilučių skaičių. Mums reikia trijų savybių, kad ji veiktų.

The ekranas reikia nustatyti turtą -webkit-dėžutė arba -webkit-inline-box , -webkit-box-orientuotis nustatytas kaip vertikalus, o perpildymas - paslėptas, kitaip turinys nebus nukirptas.

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

04. Stulpelių skaičius

Ačiū stulpelių skaičius nuosavybė, naršyklė tolygiai paskirsto turinį nurodytame stulpelių skaičiuje.

.outro { column-count: 2; }

05. Simbolių vienetas

Mes galime apriboti savo teksto plotį ar aukštį, priklausomai nuo simbolių vieneto. Kaip Erikas Mayeris nurodo , ch vienetas nurodo simbolio „0“ (nulis) plotį dabartiniame šrifte, kuris yra ypač naudingas kartu su monospace šriftais. Jis keičiasi keičiantis šriftų šeimai. Mes galime tai traktuoti šiek tiek kaip x aukštis bet ch remiasi 0 simbolio, o ne x, pločiu.

geriausias fotografų monitoriaus kalibravimo įrankis
h2.contact-heading { /*more properties in the CSS file* … max-width: 8ch; }

06. Žodžių lūžio žyma

Nors ši pamoka yra paremta CSS gudrybėmis, aš taip pat noriu paminėti vieną HTML žymą: . Tai yra HTML elementas, apibrėžiantis žodžio pertraukimo galimybę - poziciją tekste, kurioje naršyklė gali nutraukti eilutę. Kai kuriais atvejais tai gali būti naudinga - jis gali būti naudojamas, kai žodis yra gana ilgas ir bijome, kad naršyklė sugadins žodį netinkamose vietose, pavyzdžiui, telefono numeris.

+0043234-343234-234

07. Objekto tinkamumas

Jei įdomu, ar mes galime kontroliuoti vaizdo veikimą, atsižvelgiant į sudėtinio rodinio dydį, rekomenduoju patikrinti objektui tinkamas nuosavybė. Šis apibūdina, kaip arba reikia pakeisti dydį, kad tilptų į jo indą. Mes turime keturias galimybes: užpildyti , turėti , viršelis ir sumažinti . Pavyzdžiui, su viršelis reikšmę, pakeistas turinys yra tokio dydžio, kad išlaikytų jo formato koeficientą užpildant visą elemento turinio laukelį.

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

Dekoratyviniai ir kūrybiniai elementai

CSS gudrybės: turinys

Nors duomenų vizualizavimo bibliotekos, pvz., D3.js, siūlo išsamią diagramų funkcionalumą, kodėl neišbandžius CSS paprastoms skritulinėms diagramoms?04.30 Vaizdo kreditas: Aga Naplocha

Pereikime prie kelių naujų elementų ir spalvų pridėjimo prie savo svetainės.

08. Kūginis gradientas

Jei kada pagalvojote, ar galėtumėte sukurti skritulinę diagramą tik naudodami CSS, gera žinia yra tai, kad jūs iš tikrųjų galite! Ir to sprendimas mus atveda prie kūginis gradientas funkcija. Tai sukuria vaizdą, kurį sudaro gradientas su nustatytais spalvų perėjimais, pasuktais aplink centrinį tašką (o ne spinduliuojantį iš centrinio taško, kaip rastumėte su radialinis gradientas ).

.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. Skaitikliai

Norėdami susikurti numerius sunumeruotame sąraše, turime žaisti su savybėmis, vadinamomis CSS skaitikliais. CSS skaitikliai leidžia koreguoti turinio išvaizdą pagal jo vietą dokumente.

CSS gudrybės: duomenys

geriausias taškas ir fotografuokite esant silpnam apšvietimui
CSS skaitikliai leidžia koreguoti turinio išvaizdą atsižvelgiant į jo vietą dokumente, siūlant patogu nulaužti sunumeruotų sąrašų stilių04.30 Vaizdo kreditas: Aga Naplocha

Norėdami naudoti CSS skaitiklius:

  • Skaitiklių vertę galima padidinti arba sumažinti priešpriešinis prieaugis
  • Mes galime parodyti skaitiklio vertę naudodami skaitiklis () arba skaitikliai () funkciją iš turinio nuosavybės
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. Pakeiskite teksto pasirinkimo spalvą

Norėdami pakeisti teksto pasirinkimo spalvą, ::pasirinkimas yra pseudo elementas, kuris nepaiso naršyklės lygio, kad teksto paryškinimo spalva būtų pakeista pasirinkta spalva. Spalvą galima pamatyti, kai žymekliu pasirenkate turinį.

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

11. @support

Kai norite naudoti CSS ypatybę, kurios palaiko ne visos naršyklės, yra funkcijos užklausa, vadinama @support taisyklė. Tai leidžia patikrinti, ar naršyklėje palaikoma CSS ypatybė: vertės poros. Kodas, įtrauktas į @support blokas bus pateiktas tik tada, jei šios sąlygos bus įvykdytos.

Jei naršyklė nesupranta @support , jis taip pat nesukuria nurodytos kodo dalies.

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

Nors kai kurios savybės vis tiek gali turėti problemų dėl naršyklių suderinamumo, nedvejodami žaiskite su jomis. Nors jūsų naršyklės palaikymas dabar gali būti ribotas, ateityje tai greičiausiai taps įprasta praktika. Tai tik laiko klausimas. Jei norite užtikrinti, kad šie efektai būtų įkeliami tik tose naršyklėse, kurios juos gali pateikti, naudokite @supports taisyklė apipinti stilius.

Jei norite daugiau įkvėpimo, Jen Simmons ir „Mozilla“ pristatė Maketo žemė , „YouTube“ kanalas, kuriame yra daug vaizdo įrašų apie interneto dizainą ir kūrimą, įskaitant įrankius ir metodus, naujienas ir geriausios praktikos pavyzdžius. Be to, galite sužinoti, kaip išbandyti spalvų kontrastą ir imituoti spalvų aklumą „Firefox DevTools“ . Ir, kol jūs svarstote savo svetainės sudėtingumą, įsitikinkite, kad turite interneto priegloba tarnyba atspindi jūsų ambicijas.

sega išleis naują konsolę

Šis turinys iš pradžių pasirodė internetiniame žurnale. Žiūrėti daugiau interneto dizaino turinį čia .

Skaityti daugiau: