Sådan bruges CSS box-shadow: 13 tricks og eksempler

CSS er det sprog, som udviklere bruger til at style en webside. Det styrer, hvordan HTML-elementer vises på en skærm, på papir eller i enhver anden form for medier. CSS giver den fulde tilpasningskraft til at style websiden i dit eget billede.

Du kan ændre et elements baggrundsfarve, skrifttypestil, skrifttypefarve, boksskygge, margen og mange andre egenskaber ved hjælp af CSS. Vi leder dig gennem nogle effektive anvendelser af box-shadow i denne vejledning.

Hvad er CSS box-shadow?

Det box-shadow egenskab bruges til at anvende en skygge på HTML-elementer. Det er en af ​​de mest anvendte CSS-egenskaber til styling af kasser eller billeder.

CSS-syntaks:

box-shadow: [vandret forskydning] [lodret forskydning] [sløringsradius] [valgfri spredningsradius] [farve];

1. vandret forskydning: Hvis den vandrette forskydning er positiv, vil skyggen være til højre for feltet. Og hvis den vandrette forskydning er negativ, vil skyggen være til venstre for feltet.
2. lodret forskydning: Hvis den lodrette forskydning er positiv, vil skyggen være under feltet. Og hvis den lodrette forskydning er negativ, vil skyggen være over feltet.
   instagram viewer
3. sløringsradius: Jo højere værdien er, jo mere sløret bliver skyggen.
4. spredningsradius: Det betyder, hvor meget skyggen skal sprede sig. Positive værdier øger spredningen af ​​skyggen, negative værdier mindsker spredningen.
5. Farve: Det betyder farven på skyggen. Det understøtter også ethvert farveformat som rgba, hex eller hsla.

Slørings-, sprednings- og farveparametrene er valgfri. Den mest interessante del af box-shadow er, at du kan bruge et komma til at adskille box-shadow-værdier et vilkårligt antal gange. Dette kan bruges til at skabe flere grænser og skygger på elementerne.

1. Tilføj en dæmpet boksskygge til venstre, højre og bund af boksen

Du kan tilføje meget svage skygger til tre sider (venstre, højre og nederste) af feltet ved hjælp af følgende CSS med box-shadow med dit mål-HTML-element:

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

Produktion:

2. Føj en dæmpet boksskygge til alle sider

Du kan tilføje lyse skygger til alle sider af boksen ved hjælp af følgende CSS-bokseskygge med dit mål-HTML-element:

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

Produktion:

3. Tilføj en tynd boksskygge til bunden og højre side

Du kan tilføje skygger til bunden og højre side af feltet ved hjælp af følgende CSS med box-shadow med dit mål-HTML-element:

box-shadow: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Produktion:

4. Føj en mørk boksskygge til alle sider

Du kan tilføje mørk skygge til alle sider af boksen ved hjælp af følgende CSS med bokseskygge med dit mål-HTML-element:

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

Produktion:

5. Føj Spread Shadow til alle sider

Du kan tilføje spredt skygge til alle sider af feltet ved hjælp af følgende kommando med dit mål-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;

Produktion:

6. Tilføj en tynd kantskygge til alle sider

Du kan tilføje en simpel kantskygge til alle sider af feltet ved hjælp af følgende CSS med dit mål-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 indsats;

Produktion:

7. Tilføj en boksskygge til bunden og venstre side

Du kan tilføje en skygge til bunden og venstre side af boksen ved hjælp af følgende CSS med bokseskygge med dit mål-HTML-element:

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

Produktion:

8. Føj en dæmpet boksskygge til de øverste og venstre sider, mørk skygge til bunden og højre side

Du kan tilføje en lys skygge til toppen og venstre side af feltet samt en mørk skygge til bunden og højre side af feltet ved hjælp af følgende CSS med dit mål-HTML-element:

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

Produktion:

9. Tilføj en tynd, farvet kantskygge til alle sider

Du kan tilføje en simpel farvet kantskygge til alle sider af feltet ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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

Produktion:

10. Tilføj flere farvede kantskygger til bunden og venstre side af kassen

Du kan tilføje flere farvede kantskygger til bunden og venstre side af feltet ved hjælp af følgende CSS med dit mål-HTML-element:

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

Produktion:

11. Tilføj flere farvede kantskygger til bunden

Du kan tilføje flere farvede kantskygger i bunden af ​​feltet ved hjælp af følgende CSS med box-shadow med dit mål-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;

Produktion:

12. Tilføj flere farvede kantskygger til bunden og højre side af kassen

Du kan tilføje flere farvede kantskygger til bunden og højre side af feltet ved hjælp af følgende CSS med dit mål-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;

Produktion:

13. Tilføj lette skygger til venstre og højre side, spred skygge til bunden

Du kan tilføje lysskygger til venstre og højre side og sprede skygge til bunden af ​​feltet ved hjælp af følgende boksskygge-CSS med dit mål-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;

Produktion:

Integrer CSS med en HTML-side

Nu ved du, hvordan du tilføjer cool box-shadow effekter ved hjælp af CSS, du kan nemt integrere dem med HTML-elementer på flere måder.

Relaterede: 11 Nyttige værktøjer til at kontrollere, rense og optimere CSS-filer

Du kan integrere det i selve HTML-siden eller vedhæfte det som et separat dokument. Der er tre måder at inkludere CSS i et HTML-dokument:

Intern CSS

Indlejrede eller interne stilark indsættes i sektion af et HTML-dokument ved hjælp af element. Du kan oprette et vilkårligt antal elementer i et HTML-dokument, men de skal vedlægges mellem og tags. Her er et eksempel, der viser, hvordan du bruger intern CSS med et HTML-dokument:

Stil 4

Integreret CSS

Inline CSS bruges til at tilføje unikke stilregler til et HTML-element. Det kan bruges med et HTML-element via stil attribut. Stilattributten indeholder CSS-egenskaber i form af "ejendom: værdi" adskilt af et semikolon (;).

Relaterede: Lær, hvordan du bygger todimensionelle websteder med CSS-gitter

Alle CSS-egenskaber skal være i en linje, dvs. der skal ikke være linjeskift mellem CSS-egenskaberne. Her er et eksempel, der viser, hvordan man bruger inline CSS med et HTML-dokument:

Stil 4

Ekstern CSS

Ekstern CSS er den mest ideelle måde at anvende typografier på HTML-dokumenter på. Et eksternt stilark indeholder alle stilreglerne i et separat dokument (.css-fil). Dette dokument linkes derefter til HTML-dokumentet ved hjælp af tag. Denne metode er den bedste metode til at definere og anvende typografier på HTML-dokumenterne, da den berørte HTML-fil kræver minimale ændringer i markeringen. Her er et eksempel, der viser, hvordan man bruger ekstern CSS med et HTML-dokument:

Opret en ny CSS-fil med .css udvidelse. Tilføj nu følgende CSS-kode i den fil:

.overskrift {
tekstjustering: center;
}
.image-box {
display: blok;
margen til venstre: auto;
margen-højre: auto;
box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Til sidst skal du oprette et HTML-dokument og tilføje følgende kode inde i dette dokument:

Stil 4

Bemærk, at CSS-filen er linket til HTML-dokumentet via tag og href attribut.

Alle de ovennævnte tre metoder (Intern CSS, Inline CSS og Ekstern CSS) viser den samme output-

Gør din webside elegant med CSS

Ved at bruge CSS har du fuld kontrol over stylingen af ​​din webside. Du kan tilpasse hvert HTML-element ved hjælp af forskellige CSS-egenskaber. Devs fra hele verden bidrager til CSS-opdateringer, og de har gjort det siden udgivelsen i 1996. Som sådan har begyndere meget at lære!

Heldigvis er CSS nybegyndervenlig. Du kan få nogle fremragende øvelser ved at starte med et par enkle kommandoer og se, hvor din kreativitet fører dig.

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

Vil du vide mere om brug af CSS? Prøv disse grundlæggende CSS-kodeeksempler til at begynde med, og anvend dem derefter på dine egne websider.

Læs Næste

Om forfatteren