Slik bruker du CSS box-shadow: 13 triks og eksempler

CSS er språket utviklere bruker for å utforme en webside. Den styrer hvordan HTML-elementer vises på en skjerm, på papir eller i noen annen form for media. CSS gir full tilpasningskraft for å style nettsiden i ditt eget bilde.

Du kan endre bakgrunnsfarge, skriftstil, skriftfarge, boksskygge, margin og mange andre egenskaper ved hjelp av CSS. Vi vil lede deg gjennom noen effektive bruksområder for box-shadow i denne guiden.

Hva er CSS box-shadow?

De bokseskygge egenskap brukes til å bruke en skygge på HTML-elementer. Det er en av de mest brukte CSS-egenskapene for stylingbokser eller bilder.

CSS-syntaks:

box-shadow: [horisontal offset] [vertikal offset] [uskarphetsradius] [valgfri spredningsradius] [farge];

1. horisontal forskyvning: Hvis den horisontale forskyvningen er positiv, vil skyggen være til høyre for boksen. Og hvis den horisontale forskyvningen er negativ, vil skyggen være til venstre for boksen.
2. vertikal forskyvning: Hvis den vertikale forskyvningen er positiv, vil skyggen være under ruten. Og hvis den vertikale forskyvningen er negativ, vil skyggen være over boksen.
instagram viewer
3. uskarphetsradius: Jo høyere verdi, jo mer uskarpt blir skyggen.
4. spredningsradius: Det betyr hvor mye skyggen skal spre seg. Positive verdier øker spredningen av skyggen, negative verdier reduserer spredningen.
5. Farge: Det betyr fargen på skyggen. Den støtter også hvilket som helst fargeformat som rgba, hex eller hsla.

Uskarphet, spredning og fargeparametere er valgfrie. Den mest interessante delen av box-shadow er at du kan bruke komma til å skille box-shadow-verdier et hvilket som helst antall ganger. Dette kan brukes til å lage flere rammer og skygger på elementene.

1. Legg til en dim bokskygge til venstre, høyre og bunn av boksen

Du kan legge til veldig svake skygger til tre sider (venstre, høyre og bunn) av boksen ved å bruke følgende boksskygge-CSS med mål-HTML-elementet:

bokseskygge: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Produksjon:

2. Legg til en svak bokseskygge til alle sider

Du kan legge til lyse skygger til alle sider av boksen ved å bruke følgende boksskygge-CSS med mål-HTML-elementet:

bokseskygge: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Produksjon:

3. Legg til en tynn bokseskygge på bunnen og høyre siden

Du kan legge til skygger nederst og til høyre i boksen ved å bruke følgende CSS-bokseskygge med HTML-elementet ditt:

bokseskygge: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Produksjon:

4. Legg til en mørk boksskygge til All Sides

Du kan legge til mørk skygge til alle sider av boksen ved å bruke følgende boksskygge-CSS med mål-HTML-elementet:

bokseskygge: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Produksjon:

5. Legg Spread Shadow til alle sider

Du kan legge til spredt skygge til alle sider av boksen ved å bruke følgende kommando med mål-HTML-elementet:

bokseskygge: rgba (0, 0, 0, 0,25) 0px 54px 55px, rgba (0, 0, 0, 0,12) 0px -12px 30px, rgba (0, 0, 0, 0,12) 0px 4px 6px, rgba (0, 0, 0, 0,17) 0px 12px 13px, rgba (0, 0, 0, 0,09) 0px -3px 5px;

Produksjon:

6. Legg til en tynn kantskygge til alle sider

Du kan legge til en enkel kantskygge til alle sider av boksen ved å bruke følgende CSS med HTML-elementet ditt:

bokseskygge: rgba (6, 24, 44, 0,4) 0px 0px 0px 2px, rgba (6, 24, 44, 0,65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px innfelt;

Produksjon:

7. Legg til en bokseskygge på bunnen og venstre siden

Du kan legge til en skygge på bunnen og til venstre på boksen ved å bruke følgende CSS-bokseskygge med HTML-elementet ditt:

bokseskygge: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Produksjon:

8. Legg til en svak bokseskygge til de øverste og venstre sidene, mørk skyggen til bunnen og høyre side

Du kan legge til en lys skygge på toppen og venstre side av boksen, samt en mørk skygge på bunnen og høyre side av boksen ved å bruke følgende CSS med HTML-elementet ditt:

bokseskygge: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Produksjon:

9. Legg til en tynn, farget kantskygge til alle sider

Du kan legge til en enkel farget kantskygge til alle sider av boksen ved å bruke følgende boksskygge-CSS med mål-HTML-elementet:

bokseskygge: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Produksjon:

10. Legg til flere fargede kantskygger nederst og venstre i boksen

Du kan legge til flere fargede kantskygger nederst og til venstre på boksen ved å bruke følgende CSS med mål-HTML-elementet:

bokseskygge: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px innfelt, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px innfelt;

Produksjon:

11. Legg til flere fargede kantskygger i bunnen

Du kan legge til flere fargede kantskygger nederst i boksen ved å bruke følgende CSS-bokseskygge med HTML-elementet ditt:

bokseskygge: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Produksjon:

12. Legg til flere fargede kantskygger nederst og høyre i boksen

Du kan legge til flere fargede kantskygger nederst og til høyre på boksen ved hjelp av følgende CSS med HTML-elementet ditt:

bokseskygge: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Produksjon:

13. Legg til lyse skygger på venstre og høyre side, spred skyggen til bunnen

Du kan legge til lyse skygger på venstre og høyre side og spre skygge til bunnen av boksen ved å bruke følgende boksskygge CSS med ditt mål-HTML-element:

bokseskygge: rgba (0, 0, 0, 0,09) 0px 2px 1px, rgba (0, 0, 0, 0,09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Produksjon:

Integrer CSS med en HTML-side

Nå vet du hvordan du legger til kule skyggeeffekter ved hjelp av CSS, du kan enkelt integrere dem med HTML-elementer på flere måter.

I slekt: 11 nyttige verktøy for å kontrollere, rense og optimalisere CSS-filer

Du kan legge den inn i selve HTML-siden eller legge den til som et eget dokument. Det er tre måter å inkludere CSS i et HTML-dokument:

Intern CSS

Innebygde eller interne stilark settes inn i delen av et HTML-dokument ved hjelp av element. Du kan opprette et hvilket som helst antall elementer i et HTML-dokument, men de må være vedlagt mellom og koder. Her er et eksempel som viser hvordan du bruker intern CSS med et HTML-dokument:

Stil 4

Inline CSS

Inline CSS brukes til å legge til unike stilregler til et HTML-element. Den kan brukes med et HTML-element via stil Egenskap. Stilattributtet inneholder CSS-egenskaper i form av "Eiendomsverdi" atskilt med semikolon (;).

I slekt: Lær hvordan du bygger todimensjonale nettsteder med CSS Grid

Alle CSS-egenskapene må være i en linje, dvs. det skal ikke være linjeskift mellom CSS-egenskapene. Her er et eksempel som viser hvordan du bruker innebygd CSS med et HTML-dokument:

Stil 4

Ekstern CSS

Ekstern CSS er den mest ideelle måten å bruke stiler på HTML-dokumenter. Et eksternt stilark inneholder alle stilreglene i et eget dokument (.css-fil). Dette dokumentet blir deretter koblet til HTML-dokumentet ved hjelp av stikkord. Denne metoden er den beste metoden for å definere og bruke stiler på HTML-dokumentene ettersom den berørte HTML-filen krever minimale endringer i markeringen. Her er et eksempel som viser hvordan du bruker ekstern CSS med et HTML-dokument:

Opprett en ny CSS-fil med .css Utvidelse. Legg nå til følgende CSS-kode i den filen:

.overskrift {
tekstjustering: sentrum;
}
.image-box {
skjerm: blokk;
margin-venstre: auto;
margin-høyre: auto;
bokseskygge: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Til slutt oppretter du et HTML-dokument og legger til følgende kode i dokumentet:

Stil 4

Merk at CSS-filen er koblet til HTML-dokumentet via tag og href Egenskap.

Alle de ovennevnte tre metodene (Intern CSS, Inline CSS og Ekstern CSS) vil vise samme utgang-

Gjør websiden din elegant med CSS

Ved å bruke CSS har du full kontroll over utformingen av websiden din. Du kan tilpasse hvert HTML-element ved hjelp av forskjellige CSS-egenskaper. Devs fra hele verden bidrar til CSS-oppdateringer, og de har gjort det siden utgivelsen i 1996. Som sådan har nybegynnere mye å lære!

Heldigvis er CSS nybegynnervennlig. Du kan få god trening ved å starte med noen få enkle kommandoer og se hvor kreativiteten din tar deg.

10 enkle CSS-kodeeksempler du kan lære på 10 minutter

Vil du vite mer om bruk av CSS? Prøv disse grunnleggende CSS-kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Les Neste

Om forfatteren