Sådan opretter du en drop Shadow med CSS

Selvom designtendenserne varierer hvert år, kan du regne med brugen af ​​faste skyggeeffekter som kasse-skygge og skygge at bidrage positivt til en hjemmesides æstetik. Du kan bruge skygger at skabe behagelige, smukt gengivne effekter uden at komme til at virke osteagtig.

Lad os se nærmere på CSS skygge ejendom.

Hvad er CSS drop-shadow?

drop-shadow( ) er en CSS-effekt, der viser en skygge omkring formen af ​​et specificeret objekt. Her er syntaksen for at anvende en CSS skygge.

Syntaks:
filter: drop-shadow (offset-x offset-y blur-radius farve);

Der er en bred vifte af filterfunktioner inklusive sløring ( ), lysstyrke ( ), og drop-shadow( ).

offset-x bestemmer den vandrette afstand og offset-y bestemmer den lodrette afstand. Bemærk, at negative værdier placerer skyggen til venstre (offset-x) og over (offset-y) objektet.

De sidste to parametre er valgfrie. Du kan angive sløringsradius for skyggen som en længde. Som standard er den sat til 0. Du kan ikke have en negativ sløringsradius.

Farven på skyggen er angivet som. Hvis du ikke har angivet en farve, følger den værdien af

farve ejendom.

Hvornår er CSS drop-shadow nyttig?

Det ved du måske allerede kasse-skygge klarer arbejdet ret godt. Så tænker du måske, hvorfor har vi brug for det skygge overhovedet? Der er talrige tilfælde, hvor drop-shadow( ) funktion er en livredder. Lad os tage et kig på et par af dem:

Ikke-rektangulære former

I modsætning til en kasse-skygge, kan du tilføje en skygge til ikke-rektangulære former. For eksempel har vi en gennemsigtig SVG eller PNG med en ikke-rektangulær form - for eksempel en stjerne. Her kan tilføjelse af en skygge, der svarer til selve objektet, afsluttes med enten kasse-skygge eller skygge. Overvej begge scenarier:

HTML

CSS

.star-img img {
display: inline-blok;
højde: 15em;
bredde: 25em;
}
.box-shadow {
farve: rød;
box-shadow: 0,60em 0,60em 0,2em;
}
.drop-shadow {
filter: drop-shadow (0.60em 0.60em 0.2em);
}

Produktion:

Når man sammenligner begge effekter, er det tydeligt, at en kasse-skygge giver en rektangulær skygge; det er heller ikke ligegyldigt, om billedet er gennemsigtigt eller allerede har en baggrund. På den anden side, skygge giver dig mulighed for at skabe en skygge, der passer til formen på selve billedet.

De begrænsende faktorer er, at drop-shadow( ) funktion accepterer alle parametre af typen undtagen indsat søgeord og spredning parameter.

Grupperede elementer

Der er flere tilfælde, hvor du muligvis skal bygge komponenter ved at overlappe visse elementer. Hvis du bruger kasse-skygge, vil du stå over for problemet med at prøve at kaste en skygge på den rigtige måde. Sådan fungerer det, når du grupperer et billede og en tekstkomponent:

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æggende CSS

krop {
polstring: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, sans-serif;
}
h2 {
skriftstørrelse: 2rem;
}
p {
skriftstørrelse: 0,8rem;
}
.parent-container {
display: flex;
flex-retning: kolonne;
højde: 17rem;
bredde: 50em;
}
.image-container img {
bredde: 15em;
position: absolut;
z-indeks: 1;
top: 2em;
venstre: 1,5em;
}
.text-container {
farve: rgb (255, 236, 236);
baggrundsfarve: rgb (141 0 35);
bredde: 30rem;
polstring: 3rem;
align-self: flex-ende;
stilling: relativ;
}

Anvend nu kasse-skygge og skygge at se forskellen.

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

Produktion:

Som du kan se, er kasse-skygge påføres på hvert element individuelt, mens skygge grupperer dem begge og anvender skyggen.

Afklippede elementer

Du kan bruge klippesti egenskab til at klippe et bestemt område, der bestemmer, hvilke dele af et billede eller element, der skal vises. Det drop-shadow filter giver os mulighed for at skabe en skygge på det afklippede element ved at anvende det på det overordnede element:

HTML

CSS

.parent-container {
filter: drop-shadow (0rem 0rem 1,5rem rødbrun);
}
.clipped-element {
bredde: 50em;
højde: 50em;
margin: 0 auto;
baggrundsbillede: url (smilende pige.jpg);
clip-path: cirkel (50%);
baggrundsstørrelse: cover;
baggrund-gentag: ingen gentagelse;
}

Produktion:

Vi har klippet 50 % af billedet med en cirkulær bane. Derfor er drop-shadow filter anvendes kun på den synlige del af billedet. Er det ikke fantastisk?

Begrænsninger og forskelle

Som vi diskuterede ovenfor, skygge understøtter ikke spredning parameter. Dette betyder, at det ikke ville være muligt at skabe en kontureffekt ved at bruge drop-shadow( ) funktion, fordi den bliver dræbt overalt. Det gengiver også forskellige skyggeeffekter fra kasse-skygge og tekst-skygge (med samme parametre). Du kan føle, at forskellene mellem kasse-skygge og skygge koges ned til CSS Box Model. Den ene følger den, mens den anden ikke gør. Her er et eksempel:

HTML

Hver MUO-artikel bringer dig et skridt nærmere.


Hver MUO-artikel bringer dig et skridt nærmere.



Hver MUO-artikel bringer dig et skridt nærmere.

Grundlæggende CSS

krop {
polstring: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, sans-serif;
}
.parent-container {
bredde: 72rem;
}
p {
skriftstørrelse: 3em;
skrifttype: fed;
}

Anvendelse af skyggeeffekter

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

Produktion:

Du kan se, at kasse-skygge giver en tungere, mørkere skygge end tekst-skygge og skygge. Der er også en lille forskel i skyggens placering mellem tekst-skygge og skygge. Ikke desto mindre foretrækker du måske forskellige skyggeeffekter i henhold til dine krav.

Browser support

Det drop-shadow( ) funktion er understøttet i alle moderne browsere undtagen ældre browsere som Internet Explorer. Selvom det ikke er noget, der alvorligt ville hæmme UX, kan du tilføje en funktionsforespørgsel med en kasse-skygge Falde tilbage.

Eksperimenter med forskellige skyggeeffekter

Populariteten af kasse-skygge er ret indlysende på grund af de mange use cases. Imidlertid drop-shadow( ) Funktionen er meget underudnyttet. Vi håber, at du vil eksperimentere med forskellige skyggeeffekter og prøve at implementere skygge i dine fremtidige projekter.

Pseudo-klasser tilføjer en helt ny række funktioner til CSS og dit personlige webudviklingsrepertoire. Lær mere om dem for at blive en mere dygtig og effektiv webudvikler.

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

Intetsigende kasser ser kedelige ud. Pift dem op med CSS box-shadow-effekten!

Læs Næste

Om forfatteren