10 utrolige CSS-triks for å transformere nettoppsettene dine

Alle med erfaring innen webdesign, enten du har brukt DIY-nettstedbyggere eller laget et nettsted fra bunnen av, har sannsynligvis hørt om CSS før. Dette utrolig kraftige verktøyet kan brukes til å transformere nettoppsettene dine, og gir deg muligheten til å ta kontroll over nettstedet ditt og oppnå din kreative visjon. Men hvordan kan du bruke overlappende stilark for å frigjøre potensialet til ditt neste nettsted?

Denne veiledningen vil kun beskrive en rekke CSS-egenskaper som alle har blitt brukt til å lage overskriften du kan se i bildet ovenfor. Du finner dette prosjektet her CodePen, noe som gir deg sjansen til å prøve det selv.

CSS bildemanipulering

Det første trinnet vi må ta for å bygge vår overskriftsseksjon er å legge til bilder på siden. Du kan bruke en rekke metoder for å oppnå dette målet, så vi har dekket de mest populære, sammen med et par triks for å hjelpe deg med å manipulere bildene dine.

1. CSS bakgrunnsbilde

Vi ønsker å ha et fullskjermsbakgrunnsbilde for overskriften vår, og CSS-egenskapen for bakgrunnsbilde er ideell. Først må vi lage en beholder for bildet vårt (og resten av elementene i overskriften).

Vi startet med å legge til en div-tag med "header" som sin klasse, etterfulgt av å sette den høyde til 100vh og dets bredde til 100vw; dette gir oss en boks som har nøyaktig samme størrelse som visningsporten. Vi har også lagt til en CSS-regel for brødteksten på siden, med dens overløp satt til skjult og dets marginer satt til 0px.

Med beholderen på plass kan vi legge til et bakgrunnsbilde, og det er tre forskjellige CSS-regler vi trenger for å nå dette målet. Det første, bakgrunnsbildet, trenger en URL for å fungere som kilden til bakgrunnsbildet, og vi har brukt den hendige Unsplash-katalogen til dette. Vi må også stille inn bakgrunnsstørrelse for å dekke og bakgrunnsposisjon til bunnen, men det kan være lurt å eksperimentere med disse for de beste resultatene.

2. CSS Bakgrunn-Blend-modus

CSS-blandingsmoduser gjør det mulig å blande bilder og tekst, omtrent som blandingsfunksjonen i programvare som Adobe Photoshop. For å få blandingsmoduser til å fungere med bakgrunnsbildet vårt, stiller vi inn bakgrunnsfarge til halvgjennomsiktig hvit før du legger til blandingsmodusen vi ønsket å bruke.

Etter dette, bakgrunnsblandingsmodus ble satt til mykt lys, slik at vi kan myke opp bildet.

3. CSS Clip-Path

For vårt neste triks vil vi bruke en regel kalt klippbane. Når du bruker img HTML-tagger, kan du angi en bane som skjuler deler av bildene du jobber med. Du kan velge å bruke generelle former for dette, men du kan også bruke en SVG-genererende app for å lage en mer intrikat design.

Vi la til en div-tag med "flex_image_box" for å fungere som en beholder for tre bilder, ved å bruke display CSS-egenskapen for å gjøre den om til en flexbox (vi skal snakke om dette senere). Tre img-tagger ble lagt til inne i div-taggen, med IDer satt som "img1", "img2" og "img3". Innstilling av bredden på hvert bilde til 600px, vi er i stand til la høydeegenskapen stå tom uten å endre sideforholdet til bildene; nå er det på tide å legge til klippbanen vår!

For å lage de tre trekantene våre brukte vi den samme polygon-klippbanen for img1 og img3, med en invertert versjon på plass for img2. Vi måtte også leke med plasseringen av flex-box-beholderen vår for å sikre at bildene sitter i riktig posisjon på skjermen. Klippbanereglene våre kan sees nedenfor.

4. CSS-opasitet

Opasitet angir gjennomsiktighetsnivået for ethvert HTML-element. Vi setter opasitet på bildene våre til 90 %, noe som gjør dem litt ugjennomsiktige slik at de smelter godt sammen med bakgrunnen.

CSS-responsiv tekst og bilder

Vi har allerede utforsket kunsten lage fantastiske responsive nettsteder ved hjelp av HTML, CSS og JavaScript tidligere, men vi kan bygge på prinsippene du allerede forstår, og gi en dypere innsikt i ferdighetene du trenger for å mestre nettstedets layout.

1. CSS Responsive/Relative Units

CSS-enheter som px, pt og cm er absolutte enheter, og dette betyr at en nettleser vil gjengi dem i samme størrelse uansett bredde og høyde på vinduet de opptar. Relative enheter er forskjellige, og produserer høyder og lengder som er i forhold til andre mål, som nettleservinduet eller et overordnet element. De relative enhetene nedenfor er ofte brukt og avgjørende for responsiv webdesign.

• em: Denne enheten brukes vanligvis med tekst. Det er i forhold til skriftstørrelsen til det gjeldende elementet, noe som gjør 4em fire ganger så stor som skriftstørrelsen som er angitt.
• rem: Som em, er rem relativt til skriftstørrelsen til et element; rotelementet i et hierarki brukes til å definere utdatastørrelsen.
• vw/vh: Bestemmer bredde og høyde basert på størrelsen på visningsporten, 2vw tilsvarer 2% av nettleserens bredde mens 2vh tilsvarer 2% av nettleserhøyden.
• %: %-enheten beregner dimensjoner basert på størrelsen på et elements overordnede.
• vmin/vmax: Disse enhetene produserer dimensjoner i forhold til 1 % av visningsportens minste eller største dimensjoner, og gir elementene muligheten til å svare direkte på størrelsen på et nettleservindu.

2. CSS-skriftstørrelse

Denne egenskapen kan settes ved å bruke standardverdier som er forhåndsdefinert av enten nettstedets hovedstilark eller brukerens nettleser. Disse verdiene inkluderer medium, xx-small, x-small, small, large, x-large og xx-large, med medium som standard for all tekst som mangler en CSS-tag i fontstørrelse. Alternativt kan relative verdier brukes når du bruker font-size CSS-egenskapen, og dette er metode som vi har brukt for å sikre at teksten i overskriftsdelen vår har en passende størrelse for evt viewport.

Vi la til to overskriftstagger i HTML-en vår, slik at vi kunne legge til tekst i prosjektet. Den ene er en stor hovedoverskrift, mens den andre er en underoverskrift, og begge bruker relative enheter.

I slekt: Hvordan endre HTML-skriftstørrelse i CSS

3. CSS Bredde og Høyde

Alle HTML-elementer kommer med høyde- og breddedimensjoner, enten de er div, img, a eller en annen type tag. Disse dimensjonene kan automatisk settes til standardverdier, men de kan også dikteres av webdesignere som bruker de riktige reglene; vi har brukt begge disse metodene for denne overskriften.

Det er brukt responsive enheter for bakgrunnsbildet, med høyden satt til 100vh og bredden satt til 100vw, men vi har også brukt absolutte enheter for våre tre bilder. Det er verdt å utforske og eksperimentere med CSS-bredde- og høydeenheter, med alternativer som "arve" som gir betyr å ta i bruk dimensjonene til et overordnet element, og det er mange andre triks som dette du kan bruke.

4. CSS Mix-Blend-modus

CSS-blandings-blandingsmodus er veldig lik bakgrunnsblandingsmodus, bare den kan brukes på ethvert element, i stedet for å være utelukkende for bakgrunner. Vi har brukt denne egenskapen på vår H1-overskrift for å legge til tekstur og gjøre prosjektet mer interessant. Vi startet med å sette vår tekstfarge til svart, etterfulgt av å stille inn blande-blanding-modus for å overlegge.

Det er vel verdt å utforske de forskjellige blandingsalternativene du har når du arbeider med tekst, siden bakgrunner med unike fargeprofiler vil reagere annerledes på innstillingene du bruker.

5. CSS-teksttransform

CSS text-transform er en smart egenskap som gjør det mulig for designere å endre størrelsen på teksten på nettsidene sine uten å påvirke måten søkemotorer leser den på. For eksempel har vi sett tekst-transform til store bokstaver på vår H1-overskrift, gjør hver bokstav til en stor bokstav uansett hvordan vi legger den inn i HTML-en vår.

CSS Overflow-egenskaper

HTML kan ofte virke som et stivt rammeverk som setter strenge grenser for innholdet på nettsidene dine, men dette er ikke tilfellet når overløpsegenskaper brukes.

CSS-overflyt og tekstoverflyt

Overflyt og tekstoverflyt er svært like CSS-egenskaper. Overflow kan brukes på ethvert element, og gir deg kontroll over innholdet som er i stand til å unnslippe sine grenser. Tekstoverflyt er likt, selv om det bare gjelder tekst, og gir deg muligheten til å legge til flere parametere til reglene dine. Vi har kun brukt overflyt for dette prosjektet (vi brukte det for å begrense størrelsen på sidens kropp), men du kan lese om tekstoverflyt på W3-skoler nettsted.

Bruk av CSS for dine weboppsett

CSS er et utrolig kraftig verktøy som gjør det mulig for webdesignere og utviklere å lage fantastiske nettsteder ved hjelp av kode. Vi oppfordrer deg til å ta en titt på CodePen vi ga i begynnelsen av artikkelen, da dette vil gi deg en enda dypere innsikt i hvordan alle disse verktøyene fungerer. I tillegg kan du leke med headeren vi har laget for å legge til dine egne prikker.

8 essensielle CSS-tips og triks alle utviklere bør vite

Bruker du disse viktige CSS-metodene for en rask arbeidsflyt og et vakkert webdesign?

Les Neste

Om forfatteren