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

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

CSS er språket utviklerne bruker for å style 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 elementets bakgrunnsfarge, skriftstil, skriftfarge, bokseskygge, margin og mange andre egenskaper ved hjelp av CSS. Vi vil lede deg gjennom noen effektive bruksområder for bokseskygge i denne guiden.



Hva er CSS box-shadow?

De boks-skygge egenskapen brukes til å bruke en skygge på HTML -elementer. Det er en av de mest brukte CSS -egenskapene for styling av bokser eller bilder.





CSS -syntaks:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  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 boksen. Og hvis den vertikale forskyvningen er negativ, vil skyggen være over boksen.
  3. uskarphet radius: Jo høyere verdi, jo mer uskarp 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å alle fargeformater som rgba, hex eller hsla.

Uklarhet, spredning og fargeparametere er valgfrie. Den mest interessante delen av boksskygge er at du kan bruke et komma til å skille boksskyggeverdier et hvilket som helst antall ganger. Dette kan brukes til å lage flere grenser og skygger på elementene.



1. Legg til en dim-boks-skygge til venstre, høyre og bunn av boksen

Du kan legge til veldig svake skygger på tre sider (venstre, høyre og bunn) av boksen ved å bruke følgende boks-skygge CSS med målet HTML-element:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Produksjon:



2. Legg til en Dim-boks-skygge på Alle sider

Du kan legge til lyse skygger på alle sider av boksen ved å bruke følgende boks-skygge CSS med målet HTML-element:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Produksjon:

3. Legg til en tynn bokseskygge på undersiden og høyre side

Du kan legge til skygger nederst og på høyre side av boksen ved å bruke følgende boks-skygge-CSS med målet HTML-element:

gratis tekstmeldingsprogrammer for Android -nettbrett
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Produksjon:

4. Legg en mørk boksskygge til alle sider

Du kan legge til mørk skygge på alle sider av boksen ved å bruke følgende boks-skygge CSS med målet HTML-element:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Produksjon:

5. Legg Spread Shadow på alle sider

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

box-shadow: 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 en tynn kantskygge til alle sider

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

box-shadow: 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 inset;

Produksjon:

7. Legg til en bokseskygge på undersiden og venstre side

Du kan legge til en skygge på bunnen og venstre side av boksen ved å bruke følgende boks-skygge CSS med målet HTML-element:

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

Produksjon:

8. Legg til en dim-boks-skygge på topp- og venstresidene, mørk skygge til undersiden 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 målet HTML -element:

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

Produksjon:

9. Legg en tynn, farget kantskygge til alle sider

Du kan legge til en enkel farget kantskygge på alle sider av boksen ved å bruke følgende boks-skygge CSS med målet HTML-element:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Produksjon:

10. Legg til flere fargede kantskygger på boksens nederste og venstre side

Du kan legge til flere fargede kantskygger på bunnen og venstre side av boksen ved å bruke følgende CSS med ditt HTML -element:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Produksjon:

hvordan vite om facebooken din ble hacket

11. Legg til flere fargede kantskygger i bunnen

Du kan legge til flere fargede kantskygger nederst i boksen ved å bruke følgende boks-skygge-CSS med målet HTML-element:

box-shadow: 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 på boksens nederste og høyre side

Du kan legge til flere fargede kantskygger på bunnen og høyre side av boksen ved å bruke følgende CSS med målet HTML -element:

box-shadow: 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 til venstre og høyre side og spre skygge til bunnen av boksen ved å bruke følgende boks-skygge CSS med målet HTML-element:

box-shadow: 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å som du vet hvordan du legger til kule boks-skyggeeffekter ved hjelp av CSS, kan du 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 lage et hvilket som helst antall elementer i et HTML -dokument, men de må være vedlagt mellom og tagger. Her er et eksempel som viser hvordan du bruker intern CSS med et HTML -dokument:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Innebygd CSS

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

Relatert: Lær hvordan du bygger todimensjonale nettsteder med CSS-rutenett

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





CSS box-shadow



Style 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 kobles deretter 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:

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

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

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

hvordan kom ccleaner på datamaskinen min




CSS box-shadow




Style 4





Vær oppmerksom på at CSS -filen er koblet til HTML -dokumentet via tag og href Egenskap.

Alle de tre metodene ovenfor (intern CSS, innebygd CSS og ekstern CSS) vil vise den samme utgangen-

Gjør websiden din elegant med CSS

Ved å bruke CSS har du full kontroll over utformingen av nettsiden din. Du kan tilpasse hvert HTML -element ved hjelp av forskjellige CSS -egenskaper. Utviklere 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 praksis ved å starte med noen få enkle kommandoer og se hvor kreativiteten tar deg.

Dele Dele kvitring E -post 10 enkle CSS -kodeeksempler du kan lære på 10 minutter

Trenger du hjelp med CSS? Prøv disse grunnleggende CSS -kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Les neste Relaterte temaer
  • Programmering
  • Webdesign
  • CSS
Om forfatteren Yuvraj Chandra(60 artikler publisert)

Yuvraj er en informatikkstudent ved University of Delhi, India. Han brenner for Full Stack webutvikling. Når han ikke skriver, utforsker han dybden i forskjellige teknologier.

Mer fra Yuvraj Chandra

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere