11 CSS-hemmeligheder, du har brug for at vide i 2020

CSS-tricks
04.30 Billedkredit: Aga Naplocha

Selvom du er fortrolig med CSS og bygger smukke layouts, kan du stadig opdage nye CSS-egenskaber og funktioner. Ved at bruge dem har du større indflydelse på, hvordan indholdet opfører sig på hjemmesiden, samt at have mere frihed med hensyn til, hvordan du anvender kreative teknikker til elementer som fotografering.

I denne vejledning skal vi grave i nogle mindre kendte egenskaber. Når du eksperimenterer med dem, skal du huske på, at de nævnte funktioner ikke understøttes af alle browsere, så det er værd at tjekke dem ud på Kan jeg bruge websted. Lad os dykke ned i nogle korte og koncise eksempler.

Vil du have mere CSS inspiration? Se dette valg af top CSS animation eksempler såvel som mere CSS-tricks . Hvis du starter fra bunden med at opbygge et websted, så prøv vores liste over strålende hjemmesidebygere og for at gemme aktiver skal du få ret Sky lagring for dig.



hvordan man tegner en kat ved hjælp af ordet kat

Hvad du får brug for:

  • Din yndlingswebbrowser og udviklerværktøjer - Jeg anbefaler at bruge Firefox eller Google Chrome, da de understøtter alle de funktioner, jeg bruger i denne vejledning.
  • En kode editor.
  • Aktiver såsom billeder og skrifttyper (du kan downloade dem fra mit arkiv .

Typografisk retning

Der er flere CSS-egenskaber, der hjælper os med at forbedre, hvordan teksten præsenteres på nettet.

01. Tekststreg

Vi er fortrolige med tekststreg (disposition) fra Adobe Illustrator eller applikationer til vektortegning. Vi kan anvende den samme effekt ved hjælp af tekststreg ejendom.

Det er godt at vide, at du kan animere tekststreg med CSS, men kun stregfarven - stregbredden er ikke.

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

02. :: første bogstav

Dette pseudo-element anvender stilarter på det allerførste bogstav i elementet på blokniveau. Takket være det kan vi introducere effekter, som vi kender fra trykte magasiner og papirmagasiner.

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

03. Gradienttekst

Endelig kan vi anvende gradient til vores tekst uden komplicerede metoder. Lad os finde ud af, hvordan vi kan introducere denne iøjnefaldende effekt på vores hjemmeside.

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

Indholdskontrol

Takket være følgende egenskaber kan vi få større kontrol over, hvordan teksten eller billederne opfører sig, afhængigt af hvilken størrelse eller andel deres container er.

hvordan man tegner hoveder fra forskellige vinkler

04. Linjeklemme

Det linjeklemme egenskab afkortes tekst på et bestemt antal linjer. Vi har brug for tre egenskaber for at få det til at fungere.

Det Skærm ejendom skal indstilles til -webkit-kasse eller -webkit-inline-box , -webkit-box-orient indstillet til lodret og overløb sat til skjult, ellers klippes indholdet ikke.

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

04. Kolonnetælling

Tak til kolonnetælling egenskab, distribuerer en browser jævnt indholdet i et angivet antal kolonner.

.outro { column-count: 2; }

05. Tegnenhed

Vi kan begrænse vores tekstbredde eller højde afhængigt af tegnenheden. Som Påpeger Eric Mayer , det ch enhed repræsenterer bredden af ​​tegnet '0' (nul) i den aktuelle skrifttype, hvilket er særlig brugbart i kombination med monospace-skrifttyper. Det ændres, når skrifttypefamilien ændres. Vi kan behandle det lidt som en x-højde men ch er baseret på bredden af ​​0-tegnet i stedet for x.

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

06. Tagbrud til ord

Selvom denne tutorial er baseret på CSS-tricks, vil jeg også nævne et HTML-tag: . Dette er et HTML-element, der definerer en ordbrydningsmulighed - en position i teksten, hvor browseren kan bryde en linje. Det kan være praktisk i nogle situationer - det kan bruges, når et ord er ret langt, og vi er bange for, at browseren bryder ordet på forkerte steder, for eksempel et telefonnummer.

+0043234-343234-234

07. Objektpasning

Hvis du spekulerer på, om vi kan kontrollere billedadfærd afhængigt af størrelsen på containeren, anbefaler jeg, at du tjekker objekt-fit ejendom. Denne definerer, hvordan indholdet af en eller skal ændres, så den passer til beholderen. Vi har fire muligheder: fylde , indeholde , dække over og nedskalere . For eksempel med dække over værdi, er det udskiftede indhold dimensioneret for at bevare dets formatforhold, mens elementets hele indholdsfelt udfyldes.

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

Dekorative og kreative elementer

CSS-tricks: indhold

Mens datavisualiseringsbiblioteker som d3.js tilbyder omfattende kortfunktionalitet, hvorfor skal du ikke prøve CSS for enkle cirkeldiagrammer?04.30 Billedkredit: Aga Naplocha

Lad os gå videre med at tilføje nogle nye elementer og farver til vores hjemmeside.

08. Konisk gradient

Hvis du nogensinde har spekuleret på, om du kun kunne oprette et cirkeldiagram ved hjælp af CSS, er den gode nyhed, at du faktisk kan! Og løsningen på dette bringer os til konisk gradient fungere. Det skaber et billede bestående af en gradient med indstillede farveovergange roteret omkring et centralt punkt (snarere end at stråle fra det centrale punkt, som du ville finde med et radial-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. Tællere

For at style numre på en nummereret liste skal vi lege med egenskaber kaldet CSS-tællere. Med CSS-tællere kan du justere udseendet på indholdet ud fra dets placering i et dokument.

CSS-tricks: data

huion h610 vs huion h610 pro
Med CSS-tællere kan du justere udseendet på indholdet ud fra dets placering i et dokument og tilbyde et praktisk hack til styling af nummererede lister04.30 Billedkredit: Aga Naplocha

Sådan bruges CSS-tællere:

  • Tællernes værdi kan øges eller sænkes med modforøgelse
  • Vi kan vise tællerens værdi ved hjælp af tæller () eller tællere () funktion fra en indholdsejendom
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. Skift farve til tekstvalg

For at ændre tekstvalgfarven, ::udvælgelse er et pseudo-element, der tilsidesætter på browserniveau for at erstatte tekstmarkeringsfarven med en farve, du vælger. Farven kan ses, når du vælger indholdet med markøren.

hvordan man tegner fantasivæsener trin for trin
::selection { background-color: #f3b70f; }

11. @ support

Når du vil bruge en CSS-ejendom, der ikke understøttes af alle browsere, er der en funktionsforespørgsel kaldet @support Herske. Dette giver dig mulighed for at kontrollere browsersupport for CSS-egenskab: værdipar. Koden inkluderet i @support Blok gengives kun, hvis disse betingelser er sande.

Hvis browseren ikke forstår @support , det genererer heller ikke en given del af koden.

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

Selvom nogle egenskaber stadig kan opleve problemer med browsernes kompatibilitet, tøv ikke med at lege med dem. Mens din browsersupport muligvis er begrænset nu, vil disse sandsynligvis blive mainstream-praksis i fremtiden. Det er bare et spørgsmål om tid. Hvis du vil sikre, at disse effekter kun indlæses på browsere, der kan gengive dem, skal du bruge @bakker op regel for at indpakke typografierne.

Hvis du ønsker yderligere inspiration, lancerede Jen Simmons og Mozilla en Layout Land , en YouTube-kanal fuld af videoer om webdesign og udvikling, herunder værktøjer og teknikker, hvad der er nyt og bedste praksis. Derudover kan du også finde ud af, hvordan du tester farvekontrast og simulerer farveblindhed ved hjælp af Firefox DevTools . Og mens du overvejer kompleksiteten af ​​dit websted, skal du sørge for, at din webhosting service afspejler dine ambitioner.

Dette indhold blev oprindeligt vist i netmagasinet. Se mere webdesign indhold her .

Læs mere: