Hvordan lage en skygge med CSS

Selv om designtrender varierer hvert år, kan du stole på bruken av stifte skyggeeffekter som boks-skygge og drop-shadow å bidra positivt til et nettsteds estetikk. Du kan bruke skygger for å skape behagelige, vakkert gjengitte effekter uten å fremstå som cheesy.

La oss se nærmere på CSS drop-shadow eiendom.

Hva er CSS drop-shadow?

drop-shadow( ) er en CSS-effekt som viser en skygge rundt formen til et spesifisert objekt. Her er syntaksen for å bruke en CSS drop-shadow.

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

Det finnes et bredt spekter av filterfunksjoner gjelder også uklarhet( ), lysstyrke ( ), og drop-shadow( ).

offset-x bestemmer den horisontale avstanden og offset-y bestemmer den vertikale avstanden. Merk at negative verdier plasserer skyggen til venstre (offset-x) og over (offset-y) objektet.

De to siste parameterne er valgfrie. Du kan spesifisere uskarphetsradiusen til skyggen som en lengde. Som standard er den satt til 0. Du kan ikke ha en negativ uskarphet.

Fargen på skyggen er spesifisert som. Hvis du ikke har spesifisert en farge, følger den verdien av farge eiendom.

Når er CSS drop-shadow nyttig?

Det vet du kanskje allerede boks-skygge gjør jobben ganske bra. Så, tenker du kanskje, hvorfor trenger vi drop-shadow i det hele tatt? Det er mange tilfeller der drop-shadow( ) funksjon er en livredder. La oss ta en titt på noen av dem:

Ikke-rektangulære former

I motsetning til en boks-skygge, kan du legge til en drop-shadow til ikke-rektangulære former. For eksempel har vi en gjennomsiktig SVG eller PNG med en ikke-rektangulær form – for eksempel en stjerne. Her kan det å legge til en skygge som tilsvarer selve objektet fullføres med enten boks-skygge eller drop-shadow. Vurder begge scenariene:

HTML

CSS

.star-img img {
display: inline-blokk;
høyde: 15em;
bredde: 25em;
}
.box-shadow {
fargen rød;
boks-skygge: 0,60em 0,60em 0,2em;
}
.drop-shadow {
filter: drop-shadow (0.60em 0.60em 0.2em);
}

Produksjon:

Når man sammenligner begge effektene, er det tydelig at en boks-skygge gir en rektangulær skygge; Det spiller heller ingen rolle om bildet er gjennomsiktig eller allerede har en bakgrunn. På den andre siden, drop-shadow lar deg lage en skygge som samsvarer med formen på selve bildet.

De begrensende faktorene er at drop-shadow( ) funksjonen aksepterer alle parametere av typen bortsett fra innfelt nøkkelord og spre parameter.

Grupperte elementer

Det er flere tilfeller der du kanskje må bygge komponenter ved å overlappe visse elementer. Hvis du bruker boks-skygge, vil du møte problemet med å prøve å kaste en skygge på riktig måte. Slik fungerer det når du grupperer et bilde og en tekstkomponent:

HTML

Leve i øyeblikket

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.

Grunnleggende CSS

kropp {
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øyde: 17rem;
bredde: 50em;
}
.image-container img {
bredde: 15em;
posisjon: absolutt;
z-indeks: 1;
topp: 2em;
venstre: 1,5 em;
}
.text-container {
farge: rgb (255, 236, 236);
bakgrunnsfarge: rgb (141 0 35);
bredde: 30rem;
polstring: 3rem;
align-self: flex-end;
stilling: pårørende;
}

Bruk nå boks-skygge og drop-shadow for å se forskjellen.

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

Produksjon:

Som du kan se, er boks-skygge påføres på hvert element individuelt mens drop-shadow grupperer dem begge og bruker skyggen.

Avklippede elementer

Du kan bruke klipp-bane egenskap for å klippe et bestemt område som bestemmer hvilke deler av et bilde eller element som skal vises. De drop-shadow filter lar oss lage en drop-shadow på det klippede elementet ved å bruke det på det overordnede elementet:

HTML

CSS

.parent-container {
filter: drop-shadow (0rem 0rem 1,5rem rødbrun);
}
.clipped-element {
bredde: 50em;
høyde: 50em;
margin: 0 auto;
bakgrunnsbilde: url (smiling-girl.jpg);
klipp-bane: sirkel (50%);
bakgrunnsstørrelse: cover;
bakgrunns-gjenta: ikke-gjenta;
}

Produksjon:

Vi har klippet 50 % av bildet med en sirkulær bane. derfor drop-shadow filter brukes bare på den synlige delen av bildet. Er det ikke kjempebra?

Begrensninger og forskjeller

Som vi diskuterte ovenfor, drop-shadow støtter ikke spre parameter. Dette betyr at det ikke ville være mulig å lage en kontureffekt ved å bruke drop-shadow( ) funksjon fordi den blir drept overalt. Dessuten gjengir den forskjellige skyggeeffekter fra boks-skygge og tekst-skygge (med samme parametere). Du kan føle at forskjellene mellom boks-skygge og drop-shadow koke ned til CSS-boksmodell. Den ene følger den mens den andre ikke gjør det. Her er et eksempel:

HTML

Hver MUO-artikkel vil bringe deg ett skritt nærmere.


Hver MUO-artikkel vil bringe deg ett skritt nærmere.



Hver MUO-artikkel vil bringe deg ett skritt nærmere.

Grunnleggende CSS

kropp {
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;
font-stil: fet;
}

Bruk av 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;
}

Produksjon:

Du kan se at boks-skygge gir en tyngre, mørkere skygge enn tekst-skygge og drop-shadow. Dessuten er det en liten forskjell i skyggens plassering mellom tekst-skygge og drop-shadow. Likevel kan du foretrekke forskjellige skyggeeffekter i henhold til dine behov.

Nettleserstøtte

De drop-shadow( ) funksjonen støttes i alle moderne nettlesere unntatt eldre nettlesere som Internet Explorer. Selv om det ikke er noe som seriøst vil hemme brukeropplevelsen, kan du legge til en funksjonsspørring med en boks-skygge falle tilbake.

Eksperimenter med forskjellige skyggeeffekter

Populariteten til boks-skygge er ganske åpenbart på grunn av mangfoldet av brukstilfeller. Imidlertid drop-shadow( ) funksjonen er svært underutnyttet. Vi håper at du vil eksperimentere med forskjellige skyggeeffekter og prøve å implementere drop-shadow i dine fremtidige prosjekter.

Pseudo-klasser legger til en helt ny rekke funksjoner til CSS og ditt personlige nettutviklingsrepertoar. Lær mer om dem for å bli en mer dyktig og effektiv nettutvikler.

Hvordan bruke CSS box-shadow: 13 triks og eksempler

Blide bokser ser kjedelige ut. Piff dem opp med CSS-boksskyggeeffekten!

Les Neste

Om forfatteren