10 utrolige CSS-tricks til at transformere dine weblayouts

Enhver med erfaring i webdesign, uanset om du har brugt gør-det-selv-webstedsbyggere eller lavet et websted fra bunden, har sandsynligvis hørt om CSS før. Dette utroligt kraftfulde værktøj kan bruges til at transformere dine weblayouts, hvilket giver dig magten til at tage kontrol over din hjemmeside og opnå din kreative vision. Men hvordan kan du bruge cascading style sheets til at frigøre potentialet for din næste hjemmeside?

Denne guide vil kun beskrive en række CSS-egenskaber, der alle er blevet brugt til at oprette den header, du kan se på billedet ovenfor. Du kan finde dette projekt her CodePen, hvilket giver dig chancen for at prøve det selv.

CSS billedmanipulation

Det første skridt, vi skal tage for at bygge vores overskriftssektion, er at tilføje billeder til siden. Du kan bruge en række metoder til at nå dette mål, så vi har dækket de mest populære sammen med et par tricks til at hjælpe dig med at manipulere dine billeder.

1. CSS baggrundsbillede

Vi ønsker at have et fuldskærms baggrundsbillede til vores header, og baggrundsbillede CSS-egenskaben er ideel. Først skal vi oprette en beholder til vores billede (og resten af ​​elementerne i overskriften).

Vi startede med at tilføje et div-tag med "header" som sin klasse, efterfulgt af at indstille dens højde til 100vh ogdet er bredde til 100vw; dette giver os en boks, der har nøjagtig samme størrelse som viewporten. Vi har også tilføjet en CSS-regel for sidens brødtekst med dens overløb sat til skjult ogdet er marginer sat til 0px.

Med beholderen på plads kan vi tilføje et baggrundsbillede, og der er tre forskellige CSS-regler, vi skal bruge for at nå dette mål. Det første, baggrundsbillede, har brug for en URL for at fungere som kilden til baggrundsbilledet, og vi har brugt det praktiske Unsplash-katalog til dette. Vi skal også indstille baggrundsstørrelse til at dække og baggrundsposition til bund, men du vil måske eksperimentere med disse for at få de bedste resultater.

2. CSS-baggrund-blandingstilstand

CSS-blandingstilstande gør det muligt at blande billeder og tekst, ligesom blandingsfunktionen i software som Adobe Photoshop. For at få blandingstilstande til at fungere med vores baggrundsbillede, indstiller vi baggrundsfarve til halvgennemsigtig hvid før vi tilføjede den blandingstilstand, vi ønskede at bruge.

Efter dette, baggrundsblandingstilstand blev indstillet til blødt lys, hvilket giver os mulighed for at blødgøre billedet.

3. CSS klippesti

Til vores næste trick vil vi bruge en regel kaldet clip-path. Når du bruger img HTML-tags, kan du indstille en sti, der skjuler dele af de billeder, du arbejder med. Du kan vælge at bruge generelle former til dette, men du kan også bruge en SVG-genererende app til at skabe et mere indviklet design.

Vi tilføjede et div-tag med "flex_image_box" for at fungere som en beholder for tre billeder, ved at bruge egenskaben display CSS til at omdanne den til en flexbox (vi vil tale om dette senere). Tre img-tags blev tilføjet inde i div-tagget, med ID'er sat som "img1", "img2" og "img3". Indstilling af bredden af ​​hvert billede til 600px, vi er i stand til lad højdeegenskaben stå tom uden at ændre billedformatet; nu er det tid til at tilføje vores clip-path!

For at skabe vores tre trekanter brugte vi den samme polygon clip-path for img1 og img3, med en omvendt version på plads for img2. Vi skulle også lege med placeringen af ​​vores flex-box container for at sikre, at billederne sidder i den rigtige position på skærmen. Vores clip-path regler kan ses nedenfor.

4. CSS Opacitet

Opacitet angiver niveauet af gennemsigtighed for ethvert HTML-element. Vi indstiller opacitet af vores billeder til 90 %, hvilket gør dem lidt uigennemsigtige, så de smelter fint sammen med baggrunden.

CSS responsive tekst og billeder

Vi har allerede udforsket kunsten at skabe fantastiske responsive hjemmesider ved hjælp af HTML, CSS og JavaScript tidligere, men vi kan bygge på de principper, du allerede forstår, og give et dybere indblik i de færdigheder, du har brug for for at mestre dine hjemmesidelayouts.

1. CSS Responsive/Relative Units

CSS-enheder som px, pt og cm er absolutte enheder, og det betyder, at en webbrowser vil gengive dem i samme størrelse, uanset bredden og højden af ​​det vindue, de optager. Relative enheder er forskellige og producerer højder og længder, der er i forhold til andre mål, såsom browservinduet eller et overordnet element. De relative enheder nedenfor er almindeligt anvendte og essentielle for responsivt webdesign.

• em: Denne enhed bruges normalt sammen med tekst. Det er i forhold til skriftstørrelsen af ​​det aktuelle element, hvilket gør 4em fire gange så stor som den indstillede skriftstørrelse.
• rem: Ligesom em er rem i forhold til skriftstørrelsen af ​​et element; rodelementet i et hierarki bruges til at definere outputstørrelsen.
• vw/vh: Bestemmelse af bredde og højde baseret på størrelsen af ​​visningsporten, 2vw er lig med 2% af browserens bredde, mens 2vh er lig med 2% af browserhøjden.
• %: Enheden % beregner dimensioner baseret på størrelsen af ​​et elements overordnede.
• vmin/vmax: Disse enheder producerer dimensioner i forhold til 1 % af visningsportens mindste eller største dimensioner, hvilket giver elementerne mulighed for at reagere direkte på størrelsen af ​​et browservindue.

2. CSS-skriftstørrelse

Denne egenskab kan indstilles ved hjælp af standardværdier, der er foruddefineret af enten webstedets hovedstilark eller brugerens webbrowser. Disse værdier inkluderer medium, xx-small, x-small, small, large, x-large og xx-large, hvor medium er indstillet som standard for enhver tekst, der mangler et CSS-tag i skriftstørrelse. Alternativt kan relative værdier anvendes ved brug af CSS-egenskaben font-size, og dette er metode, som vi har brugt for at sikre, at teksten i vores overskriftssektion er tilpasset størrelsen til evt viewport.

Vi har tilføjet to overskrifts-tags til vores HTML, så vi kan tilføje tekst til projektet. Den ene er en stor hovedoverskrift, mens den anden er en underoverskrift, og de bruger begge relative enheder.

Relaterede: Sådan ændres HTML-skriftstørrelse i CSS

3. CSS bredde og højde

Alle HTML-elementer kommer med højde- og breddedimensioner, uanset om de er div, img, a eller en hvilken som helst anden type tag. Disse dimensioner kan automatisk indstilles til standardværdier, men de kan også dikteres af webdesignere, der bruger de korrekte regler; vi har brugt begge disse metoder til denne header.

Der er brugt responsive enheder til baggrundsbilledet, med højden sat til 100vh og bredden sat til 100vw, men vi har også brugt absolutte enheder til vores tre billeder. Det er værd at udforske og eksperimentere med CSS-bredde- og højdeenheder, med muligheder som "arve" betyder at adoptere dimensionerne af et overordnet element, og der er masser af andre tricks som dette, du kan bruge.

4. CSS Mix-Blend-tilstand

CSS mix-blend-tilstand er meget lig baggrundsblandingstilstand, kun den kan anvendes på ethvert element i stedet for udelukkende at være til baggrunde. Vi har brugt denne egenskab på vores H1-overskrift for at tilføje tekstur og gøre projektet mere interessant. Vi startede med at indstille vores tekstfarve til sort, efterfulgt af indstilling af mix-blend-tilstand til overlejring.

Det er værd at udforske de forskellige blandingsmuligheder, du har, når du beskæftiger dig med tekst, da baggrunde med unikke farveprofiler vil reagere forskelligt på de indstillinger, du bruger.

5. CSS-tekst-transform

CSS-teksttransform er en smart egenskab, der gør det muligt for designere at ændre tekstens størrelse på deres websteder uden at påvirke den måde, søgemaskinerne læser den på. Det har vi f.eks sæt tekst-transform til store bogstaver på vores H1-overskrift, hvilket gør hvert bogstav til et stort, uanset hvordan vi indtaster det i vores HTML.

CSS-overløbsegenskaber

HTML kan ofte virke som en stiv ramme, der sætter strenge grænser for indholdet på dine hjemmesider, men dette er ikke tilfældet, når der anvendes overløbsegenskaber.

CSS-overløb og tekstoverløb

Overløb og tekstoverløb er meget ens CSS-egenskaber. Overflow kan anvendes på ethvert element, hvilket giver dig kontrol over indholdet, der er i stand til at undslippe dets grænser. Tekstoverløb ligner, selvom det kun gælder for tekst og giver dig mulighed for at tilføje yderligere parametre til dine regler. Vi har kun brugt overløb til dette projekt (vi brugte det til at begrænse størrelsen af ​​vores sides krop), men du kan læse om tekstoverløb på W3 Skoler internet side.

Brug af CSS til dine weblayouts

CSS er et utroligt kraftfuldt værktøj, der gør det muligt for webdesignere og udviklere at skabe fantastiske websteder ved hjælp af kode. Vi opfordrer dig til at tage et kig på den CodePen, vi leverede i begyndelsen af ​​artiklen, da dette vil give dig et endnu dybere indblik i, hvordan alle disse værktøjer fungerer. Derudover kan du lege med den header, vi har lavet, for at tilføje din egen prikken over i'et.

8 essentielle CSS-tip og tricks, som enhver udvikler bør kende

Bruger du disse centrale CSS-metoder til en hurtig arbejdsgang og et smukt webdesign?

Læs Næste

Om forfatteren