Hur man skapar en skugga med CSS

Även om designtrenderna varierar varje år kan du räkna med att använda skuggeffekter som t.ex box-skugga och skugga att positivt bidra till en webbplatss estetik. Du kan använda skuggor för att skapa behagliga, vackert återgivna effekter utan att framstå som ostliknande.

Låt oss ta en närmare titt på CSS skugga fast egendom.

Vad är CSS-skugga?

skugga( ) är en CSS-effekt som visar en skugga runt formen av ett angivet objekt. Här är syntaxen för att tillämpa en CSS skugga.

Syntax:
filter: skugga (offset-x offset-y blur-radie färg);

Det finns ett brett utbud av filterfunktioner Inklusive blur( ), ljusstyrka ( ), och skugga( ).

offset-x bestämmer det horisontella avståndet och offset-y bestämmer det vertikala avståndet. Observera att negativa värden placerar skuggan till vänster (offset-x) och ovan (offset-y) objektet.

De två sista parametrarna är valfria. Du kan ange skuggans oskärpa radie som en längd. Som standard är den inställd på 0. Du kan inte ha en negativ oskärpa radie.

Färgen på skuggan anges som. Om du inte har angett en färg följer den värdet på Färg fast egendom.

När är CSS drop-shadow användbar?

Du kanske redan vet det box-skugga gör jobbet ganska bra. Så, kanske du tänker, varför behöver vi skugga alls? Det finns många fall där skugga( ) funktion är en livräddare. Låt oss ta en titt på några av dem:

Icke-rektangulära former

Till skillnad från en box-skugga, kan du lägga till en skugga till icke-rektangulära former. Till exempel har vi en transparent SVG eller PNG med en icke-rektangulär form - en stjärna till exempel. Här kan lägga till en skugga som motsvarar själva objektet kompletteras med antingen box-skugga eller skugga. Tänk på båda scenarierna:

HTML

CSS

.star-img img {
display: inline-block;
höjd: 15 em;
bredd: 25em;
}
.box-shadow {
färgen röd;
box-skugga: 0,60em 0,60em 0,2em;
}
.drop-shadow {
filter: skugga (0.60em 0.60em 0.2em);
}

Produktion:

När man jämför båda effekterna är det uppenbart att en box-skugga ger en rektangulär skugga; det spelar heller ingen roll om bilden är genomskinlig eller redan har en bakgrund. Å andra sidan, skugga låter dig skapa en skugga som överensstämmer med formen på själva bilden.

De begränsande faktorerna är att skugga( ) funktion accepterar alla parametrar av typ förutom infälld nyckelord och spridning parameter.

Grupperade element

Det finns flera tillfällen då du kan behöva bygga komponenter genom att överlappa vissa element. Om du använder box-skugga, kommer du att möta problemet med att försöka kasta en skugga på rätt sätt. Så här fungerar det när du grupperar en bild och en textkomponent:

HTML

Lev i nuet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

Grundläggande CSS

kropp {
stoppning: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, sans-serif;
}
h2 {
teckenstorlek: 2rem;
}
p {
teckenstorlek: 0,8rem;
}
.parent-container {
display: flex;
flex-riktning: kolumn;
höjd: 17rem;
bredd: 50em;
}
.image-container img {
bredd: 15em;
position: absolut;
z-index: 1;
topp: 2em;
vänster: 1,5em;
}
.text-container {
färg: rgb (255, 236, 236);
bakgrundsfärg: rgb (141 0 35);
bredd: 30rem;
stoppning: 3rem;
align-self: flex-end;
position: relativ;
}

Nu, tillämpa box-skugga och skugga för att se skillnaden.

.drop-shadow {
filter: skugga (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.låda,
.box img {
box-skugga: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Produktion:

Som du kan se box-skugga appliceras på varje element individuellt medan skugga grupperar båda och applicerar skuggan.

Klippta element

Du kan använda klippbana egenskap för att klippa ett visst område som bestämmer vilka delar av en bild eller ett element som ska visas. De skuggfilter tillåter oss att skapa en skugga på det klippta elementet genom att applicera det på det överordnade elementet:

HTML

CSS

.parent-container {
filter: skugga (0rem 0rem 1,5rem rödbrun);
}
.clipped-element {
bredd: 50em;
höjd: 50em;
marginal: 0 auto;
bakgrundsbild: url (smiling-girl.jpg);
klippbana: cirkel (50%);
bakgrundsstorlek: omslag;
bakgrundsupprepning: ingen upprepning;
}

Produktion:

Vi har klippt 50 % av bilden med en cirkulär bana. Därför skuggfilter tillämpas endast på den synliga delen av bilden. Är det inte fantastiskt?

Begränsningar och skillnader

Som vi diskuterade ovan, skugga stöder inte spridning parameter. Detta innebär att det inte skulle vara möjligt att skapa en kontureffekt med hjälp av skugga( ) fungerar eftersom det dödas överallt. Dessutom återger den olika skuggeffekter från box-skugga och text-skugga (med samma parametrar). Du kanske känner att skillnaderna mellan box-skugga och skugga koka ner till CSS Box modell. Den ena följer den medan den andra inte gör det. Här är ett exempel:

HTML

Varje MUO-artikel tar dig ett steg närmare.


Varje MUO-artikel tar dig ett steg närmare.



Varje MUO-artikel tar dig ett steg närmare.

Grundläggande CSS

kropp {
stoppning: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, sans-serif;
}
.parent-container {
bredd: 72rem;
}
p {
teckenstorlek: 3em;
teckensnittsstil: fet;
}

Applicera skuggeffekter

.drop-shadow {
filter: skugga (0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.text-shadow {
text-shadow: 0.5em 0.5em 0.1em #555;
}

Produktion:

Du kan se att box-skugga ger en tyngre, mörkare skugga än text-skugga och skugga. Det finns också en liten skillnad i skuggans placering mellan text-skugga och skugga. Ändå kanske du föredrar olika skuggeffekter enligt dina krav.

Webbläsarstöd

De skugga( ) Funktionen stöds i alla moderna webbläsare förutom äldre webbläsare som Internet Explorer. Även om det inte är något som allvarligt skulle hindra UX, kan du lägga till en funktionsfråga med en box-skugga Retirera.

Experimentera med olika skuggeffekter

Populariteten av box-skugga är ganska uppenbart på grund av de många användningsfallen. Men den skugga( ) Funktionen är mycket underutnyttjad. Vi hoppas att du kommer att experimentera med olika skuggeffekter och försöka implementera skugga i dina framtida projekt.

Pseudo-klasser lägger till ett helt nytt utbud av funktioner till CSS och din personliga webbutvecklingsrepertoar. Lär dig mer om dem för att bli en mer skicklig och effektiv webbutvecklare.

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

Intetsägande lådor ser tråkiga ut. Piffa upp dem med CSS-box-skuggeffekten!

Läs Nästa

Om författaren