CSS är full av alternativ för att förbättra utseendet på dina webbplatser; text- och boxskuggor är utmärkta exempel. De ger liknande resultat som skuggorna som finns i bildredigeringsprogram som Photoshop.

Men hur fungerar CSS-skuggor? Låt oss dyka direkt in.

Hur man använder CSS Box Shadow

Du kan använda en CSS-boxskugga med en enda rad CSS som innehåller ett intervall på upp till sex värden. Ordningen på värden är avgörande för att din CSS-boxskugga ska fungera, och den ser ut så här:

box-shadow: offset-x offset-y oskärpa spridning färg insättning;

Låt oss ta en titt på var och en av värdena i ordning.

CSS Box Shadow Position

Offset-x- och offset-y-värdena styr positionen för din boxskugga. Offset-x-värdet representerar skuggans horisontella position, medan offset-y är den vertikala offseten.

 box-skugga: 10px 10px;

Positiva värden resulterar i en skugga under och till höger om elementet.

Du kan också använda negativa värden för h-offset och v-offset:

 box-shadow: -10px -10px;

En negativ h-offset flyttar skuggan till vänster, medan en negativ v-offset flyttar den uppåt:

instagram viewer

CSS Box Shadow Blur

Som du kan se skapar du en solid skugga utan fjädring om du lägger till h-offset och v-offset till din skugga. Oskärpvärdet suddar din CSS-boxskugga och träder i kraft om du anger ett tredje värde:

box-skugga: 10px 10px 20px;

Ju högre siffra du lägger till oskärpavärdet, desto suddigare blir din CSS-boxskugga. Detta värde kan inte vara negativt.

CSS Box Shadow Spread

Spridningsvärdet låter dig ändra storleken på din skugga utan att ändra dess position.

 box-shadow: 10px 10px 20px 30px;

Ett positivt spridningsvärde kommer att göra din CSS-boxskugga större, medan ett negativt värde gör den mindre.

CSS Box Shadow Color

CSS-rutaskuggor har som standard elementets textfärg, men du kan åsidosätta det genom att lägga till en färg:

box-skugga: 10px 10px 20px 10px #0000ff;

Färgen du använder måste vara i ett lagligt CSS-färgformat, som en hex-kod, RGB-kod eller fördefinierad färg. Du kan lär dig om hex-koder och andra lagliga CSS-färgalternativ innan du börjar med dina skuggor.

CSS Box Shadow Inset

CSS-boxskuggor faller som standard utanför deras tilldelade element. Genom att lägga till en insättning i egenskapen box-shadow kan du visa skuggan på insidan av elementet.

box-skugga: 10px 10px 20px 10px #0000ff infälld;

Detta är ett fördefinierat textvärde; lägg bara till eller ta bort det för att ställa in värdet.

Hur man använder CSS Text Shadow

CSS-textskuggor är som boxskuggor, även om de har färre värden att ändra. Syntaxen för en CSS-textskugga ser ut så här:

text-shadow: offset-x offset-y blur-radius färg;

Men hur fungerar dessa värderingar?

CSS Text Shadow Position

CSS-textskuggförskjutningar fungerar mycket på samma sätt som samma boxskuggvärden:

text-shadow: 10px 10px;

Positiva värden kommer att placera skuggan under och till höger om texten.

Negativa värden gör det motsatta, placerar skuggan ovanför och till vänster om texten.

 text-shadow: -10px -10px;

Du kan blanda negativa och positiva värden för att placera din CSS-textskugga perfekt.

CSS Text Shadow Blur Radie

CSS text skuggoskärpa radie gör att du kan sudda ut skuggan bakom din text.

text-shadow: 10px 10px 10px;

Standardvärdet för detta värde är 0 (ingen oskärpa).

CSS Text Shadow Color

Som standard matchar CSS-textskuggor färgen på texten. Du kan ändra färgen på din text genom att lägga till den i slutet av egenskapen CSS text shadow.

text-skugga: 10px 10px 10px #0000ff;

Liksom CSS box shadow colors måste du använda en CSS legal färg för detta.

CSS Box och Text Shadow Design Exempel

Du kan börja experimentera med din användning av CSS-ruta och textskuggor när du förstår grunderna. Idéerna nedan bör inspirera dig att komma på dina egna kreativa sätt att använda dessa CSS-egenskaper.

Tvåfärgade kanter med två CSS-boxskuggor

Du kan lägga till mer än en boxskugga eller textskugga till ett HTML-element. Så länge de har kommatecken mellan sig kan du lägga till nya skuggor till en enskild egenskap.

box-skugga: 30px 30px#0000ff, -30 pixlar-30 pixlar 0px#00ff00;

Denna dubbelfärgade kant är ett bra exempel på detta. Två CSS-boxskuggor med motsatta positioner och ingen oskärpa/spridning ger en utmärkt kreativ kant.

Dubbla CSS-textskuggor för dramatisk effekt

På samma sätt som idén ovan kan du lägga till och placera text i flera textskuggor för intressanta resultat.

text-shadow: 35px 20px 4px mörkgrå, -35px -20px 4px mörkgrå;

Det här exemplet visar en textrad med en skugga över och en skugga under, som båda har textbaserade färgvärden.

Flerfärgade Bakgrunder Med Infällda CSS Box Skuggor

CSS är kraftfull nog att skapa unika och intressanta tillgångar utan några externa filer. Att använda en infälld CSS-boxskugga som bakgrund är ett bra exempel på detta.

box-skugga: 20px 10px 10px 40px #000000 infälld, -50px -30px 8px 60px grå infälld, 30px 20px 6px 90px ljusgrå insättning;

Denna låda har en vit bakgrund, tillsammans med tre infällda skuggor i olika färger. Skuggorna överlappar varandra för att skapa en unik bakgrund.

Att förstärka denna effekt ytterligare är en enkel fråga om lägga till en snygg CSS-bakgrundsgradient till ditt element.

CSS Box Shadows & Text Shadows för kreativ webbdesign

CSS-ruta och textskuggor är lätta att använda när du vet hur man arbetar med dem. Du har nu verktygen du behöver för att börja arbeta med din egen design, men du bör fortsätta att undersöka CSS för att förbättra dina färdigheter.