Hur man använder CSS box-shadow: 13 tricks och exempel

CSS är det språk som utvecklare använder för att utforma en webbsida. Den styr hur HTML-element visas på en skärm, på papper eller i någon annan form av media. CSS tillhandahåller full anpassningsförmåga för att utforma webbsidan i din egen bild.

Du kan ändra ett elements bakgrundsfärg, teckensnittsstil, teckensnittsfärg, rutskugga, marginal och många andra egenskaper med CSS. Vi guidar dig igenom några effektiva användningar av box-shadow i den här guiden.

Vad är CSS box-shadow?

De box-skugga egenskap används för att tillämpa en skugga på HTML-element. Det är en av de mest använda CSS-egenskaperna för stylingboxar eller bilder.

CSS-syntax:

box-shadow: [horisontalförskjutning] [vertikal förskjutning] [suddighetsradie] [valfri spridningsradie] [färg];

1. horisontell förskjutning: Om den horisontella förskjutningen är positiv kommer skuggan till höger om rutan. Och om den horisontella förskjutningen är negativ kommer skuggan att vara till vänster om rutan.
2. vertikal förskjutning: Om den vertikala förskjutningen är positiv kommer skuggan att vara under rutan. Och om den vertikala förskjutningen är negativ kommer skuggan att vara ovanför rutan.
   instagram viewer
3. suddighetsradie: Ju högre värde desto suddigare blir skuggan.
4. spridningsradie: Det betyder hur mycket skuggan ska spridas. Positiva värden ökar spridningen av skuggan, negativa värden minskar spridningen.
5. Färg: Det betyder skuggans färg. Det stöder också alla färgformat som rgba, hex eller hsla.

Suddighet, spridning och färgparametrar är valfria. Den mest intressanta delen av box-shadow är att du kan använda ett komma för att separera box-shadow-värden valfritt antal gånger. Detta kan användas för att skapa flera gränser och skuggor på elementen.

1. Lägg till en dim rutskugga till vänster, höger och botten av rutan

Du kan lägga till mycket svaga skuggor till tre sidor (vänster, höger och botten) av rutan med följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:

2. Lägg till en dim rutskugga till alla sidor

Du kan lägga till ljusa skuggor på alla sidor av rutan med följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:

3. Lägg till en tunn rutskugga till botten och höger

Du kan lägga till skuggor längst ner och till höger i rutan med följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:

4. Lägg till en mörk rutskugga till alla sidor

Du kan lägga till mörk skugga på alla sidor av rutan med följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:

5. Lägg till Spread Shadow till alla sidor

Du kan lägga till spridningsskugga till alla sidor av rutan med följande kommando med ditt 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. Lägg till en tunn kantskugga till alla sidor

Du kan lägga till en enkel kantskugga till alla sidor av rutan med följande CSS med ditt 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 infälld;

Produktion:

7. Lägg till en rutskugga i botten och vänster sida

Du kan lägga till en skugga längst ner och till vänster om rutan med följande box-skugga CSS med ditt mål-HTML-element:

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

Produktion:

8. Lägg till en mörk rutskugga till de övre och vänstra sidorna, mörk skugga till botten och till höger

Du kan lägga till en ljus skugga på den övre och vänstra sidan av rutan samt en mörk skugga på den nedre och högra sidan av rutan med följande CSS med ditt 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. Lägg till en tunn, färgad kantskugga till alla sidor

Du kan lägga till en enkel färgad kantskugga till alla sidor av rutan med hjälp av följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:

10. Lägg till flera färgade kantskuggor i lådans nedre och vänstra sidor

Du kan lägga till flera färgade kantskuggor längst ner och till vänster om rutan med följande CSS med ditt HTML-element:

box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px infälld, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px infälld;

Produktion:

11. Lägg till flera färgade kantskuggor längst ner

Du kan lägga till flera färgade kantskuggor längst ner i rutan med följande box-shadow CSS med ditt 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. Lägg till flera färgade kantskuggor längst ner och till höger på rutan

Du kan lägga till flera färgade kantskuggor längst ner och till höger om rutan med följande CSS med ditt 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. Lägg till ljusa skuggor till vänster och höger sida, sprid skugga till botten

Du kan lägga till ljusa skuggor till vänster och höger sida och sprida skugga till botten av rutan med följande box-shadow CSS med ditt 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:

Integrera CSS med en HTML-sida

Nu vet du hur du lägger till coola skuggeffekter med CSS, du kan enkelt integrera dem med HTML-element på flera sätt.

Relaterad: 11 Användbara verktyg för att kontrollera, rengöra och optimera CSS-filer

Du kan bädda in den i själva HTML-sidan eller bifoga den som ett separat dokument. Det finns tre sätt att inkludera CSS i ett HTML-dokument:

Intern CSS

Inbäddade eller interna stilark infogas i avsnitt i ett HTML-dokument med hjälp av element. Du kan skapa valfritt antal element i ett HTML-dokument, men de måste bifogas mellan och taggar. Här är ett exempel som visar hur man använder intern CSS med ett HTML-dokument:

Stil 4

Inbyggd CSS

Inline CSS används för att lägga till unika stilregler till ett HTML-element. Den kan användas med ett HTML-element via stil attribut. Stilattributet innehåller CSS-egenskaper i form av "fastighetsvärde" åtskilda av ett semikolon (;).

Relaterad: Lär dig hur man bygger tvådimensionella webbplatser med CSS Grid

Alla CSS-egenskaper måste vara i en rad, dvs. det ska inte finnas några radbrytningar mellan CSS-egenskaperna. Här är ett exempel som visar hur man använder inbyggd CSS med ett HTML-dokument:

Stil 4

Extern CSS

Extern CSS är det mest idealiska sättet att tillämpa stilar på HTML-dokument. Ett externt stilark innehåller alla stilregler i ett separat dokument (.css-fil). Detta dokument länkas sedan till HTML-dokumentet med hjälp av märka. Den här metoden är den bästa metoden för att definiera och tillämpa stilar på HTML-dokumenten eftersom den berörda HTML-filen kräver minimala ändringar i markeringen. Här är ett exempel som visar hur man använder extern CSS med ett HTML-dokument:

Skapa en ny CSS-fil med .css förlängning. Lägg nu till följande CSS-kod inuti den filen:

. rubrik {
textjustera: centrum;
}
.image-box {
display: blockera;
marginal till vänster: auto;
marginal-höger: auto;
box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Slutligen skapar du ett HTML-dokument och lägger till följande kod i det dokumentet:

Stil 4

Observera att CSS-filen är länkad till HTML-dokumentet via tagg och href attribut.

Alla ovanstående tre metoder (Intern CSS, Inline CSS och Extern CSS) visar samma utdata-

Gör din webbsida elegant med CSS

Genom att använda CSS har du full kontroll över utformningen av din webbsida. Du kan anpassa alla HTML-element med olika CSS-egenskaper. Devs från hela världen bidrar till CSS-uppdateringar, och de har gjort det sedan det släpptes 1996. Som sådan har nybörjare mycket att lära sig!

Lyckligtvis är CSS nybörjarvänligt. Du kan få utmärkt träning genom att börja med några enkla kommandon och se vart din kreativitet tar dig.

10 enkla CSS-exempel som du kan lära dig på 10 minuter

Vill du veta mer om hur du använder CSS? Prova med dessa grundläggande CSS-kodexempel till att börja med och använd dem sedan på dina egna webbsidor.

Läs Nästa

Om författaren