Een slagschaduw maken met CSS

Hoewel ontwerptrends elk jaar variëren, kunt u rekenen op het gebruik van nietjesschaduweffecten zoals doos-schaduw en slagschaduw om een ​​positieve bijdrage te leveren aan de esthetiek van een website. Je kunt gebruiken slagschaduwen om aangename, prachtig weergegeven effecten te creëren zonder als cheesy over te komen.

Laten we de CSS eens nader bekijken slagschaduw eigendom.

Wat is CSS slagschaduw?

slagschaduw( ) is een CSS-effect dat een schaduw weergeeft rond de vorm van een opgegeven object. Hier is de syntaxis voor het toepassen van een CSS slagschaduw.

Syntaxis:
filter: slagschaduw (offset-x offset-y blur-radius kleur);

Er is een breed scala aan filterfuncties inclusief vervagen ( ), helderheid( ), en slagschaduw( ).

offset-x bepaalt de horizontale afstand en offset-y bepaalt de verticale afstand. Merk op dat negatieve waarden de schaduw naar links plaatsen (offset-x) en hoger (offset-y) het object.

De laatste twee parameters zijn optioneel. U kunt de vervagingsstraal van de schaduw opgeven als een lengte. Standaard is deze ingesteld op 0. U kunt geen negatieve vervagingsstraal hebben.

De kleur van de schaduw wordt gespecificeerd als. Als u geen kleur hebt opgegeven, volgt deze de waarde van de kleur eigendom.

Wanneer is CSS slagschaduw nuttig?

Dat weet je misschien al doos-schaduw doet het werk vrij goed. Dus, denk je misschien, waarom hebben we nodig? slagschaduw überhaupt? Er zijn talloze gevallen waarin de slagschaduw( ) functie is een redder in nood. Laten we er een paar bekijken:

Niet-rechthoekige vormen

In tegenstelling tot een doos-schaduw, je kunt een toevoegen slagschaduw tot niet-rechthoekige vormen. We hebben bijvoorbeeld een transparante SVG of PNG met een niet-rechthoekige vorm, bijvoorbeeld een ster. Hier kan het toevoegen van een schaduw die overeenkomt met het object zelf worden voltooid met ofwel doos-schaduw of slagschaduw. Overweeg beide scenario's:

HTML

CSS

.star-img img {
weergave: inline-blok;
hoogte: 15em;
breedte: 25em;
}
.box-schaduw {
kleur rood;
doosschaduw: 0.60em 0.60em 0.2em;
}
.slagschaduw {
filter: slagschaduw (0.60em 0.60em 0.2em);
}

Uitgang::

Bij het vergelijken van beide effecten blijkt dat a doos-schaduw geeft een rechthoekige schaduw; het maakt ook niet uit of de afbeelding transparant is of al een achtergrond heeft. Anderzijds, slagschaduw kunt u een schaduw maken die overeenkomt met de vorm van de afbeelding zelf.

De beperkende factoren zijn dat de slagschaduw( ) functie accepteert alle parameters van het type behalve de inzet trefwoord en spreiding parameter.

Gegroepeerde elementen

Er zijn verschillende gevallen waarin u mogelijk componenten moet bouwen door bepaalde elementen te overlappen. Als je gebruikt doos-schaduw, zul je worden geconfronteerd met het probleem van het proberen een schaduw op de juiste manier te werpen. Zo werkt het bij het groeperen van een afbeelding en een tekstcomponent:

HTML

Leef in het moment

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.

Basis CSS

lichaam {
vulling: 5em 1em;
font-familie: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, schreefloos;
}
h2 {
lettergrootte: 2rem;
}
P {
lettergrootte: 0.8rem;
}
.ouder-container {
weergave: flexibel;
flex-richting: kolom;
hoogte: 17rem;
breedte: 50em;
}
.image-container img {
breedte: 15em;
positie: absoluut;
z-index: 1;
boven: 2em;
links: 1.5em;
}
.text-container {
kleur: rgb (255, 236, 236);
achtergrondkleur: rgb (141 0 35);
breedte: 30rem;
vulling: 3rem;
align-self: flex-end;
positie: relatief;
}

Pas nu de doos-schaduw en slagschaduw om het verschil te zien.

.slagschaduw {
filter: slagschaduw (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.doos,
.box img {
box-schaduw: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Uitgang:

Zoals je kunt zien, is de doos-schaduw wordt op elk element afzonderlijk toegepast, terwijl de slagschaduw groepeert ze allebei en past de schaduw toe.

Geknipte elementen

U kunt de clip-path eigenschap om een ​​bepaald gebied te knippen dat bepaalt welke delen van een afbeelding of element moeten worden weergegeven. De slagschaduwfilter stelt ons in staat om een slagschaduw op het geknipte element door het toe te passen op het bovenliggende element van dat element:

HTML

CSS

.ouder-container {
filter: slagschaduw (0rem 0rem 1.5rem kastanjebruin);
}
.clipped-element {
breedte: 50em;
hoogte: 50em;
marge: 0 automatisch;
achtergrondafbeelding: url (smiling-girl.jpg);
clip-path: cirkel (50%);
achtergrondformaat: omslag;
achtergrondherhaling: geen herhaling;
}

Uitgang:

We hebben 50% van de afbeelding bijgesneden met een cirkelvormig pad. Daarom, de slagschaduwfilter wordt alleen toegepast op het zichtbare deel van de afbeelding. Is het niet geweldig?

Beperkingen en verschillen

Zoals we hierboven hebben besproken, slagschaduw ondersteunt niet de spreiding parameter. Dit betekent dat het niet mogelijk zou zijn om een ​​omtrekeffect te creëren met de slagschaduw( ) functioneren omdat het overal wordt gedood. Het geeft ook verschillende schaduweffecten weer van de doos-schaduw en schaduw tekst (met dezelfde parameters). U kunt het gevoel hebben dat de verschillen tussen de doos-schaduw en slagschaduw inkoken tot de CSS-boxmodel. De een volgt het, de ander niet. Hier is een voorbeeld:

HTML

Elk MUO-artikel brengt je een stap dichterbij.


Elk MUO-artikel brengt je een stap dichterbij.



Elk MUO-artikel brengt je een stap dichterbij.

Basis CSS

lichaam {
vulling: 5em 1em;
font-familie: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, schreefloos;
}
.ouder-container {
breedte: 72rem;
}
P {
lettergrootte: 3em;
lettertype-stijl: vet;
}

Schaduweffecten toepassen

.slagschaduw {
filter: slagschaduw (0.5em 0.5em 0.1em #555);
}
.box-schaduw {
doosschaduw: 0,5em 0,5em 0,1em #555;
}
.schaduw tekst {
tekstschaduw: 0.5em 0.5em 0.1em #555;
}

Uitgang:

Je kunt zien dat de doos-schaduw geeft een zwaardere, donkerdere schaduw dan de schaduw tekst en slagschaduw. Er is ook een klein verschil in de positionering van de schaduw tussen de schaduw tekst en slagschaduw. Desalniettemin kunt u, afhankelijk van uw vereisten, de voorkeur geven aan verschillende schaduweffecten.

Browserondersteuning

De slagschaduw( ) functie wordt ondersteund in alle moderne browsers behalve oudere browsers zoals Internet Explorer. Hoewel het niet iets is dat de UX ernstig zou belemmeren, kun je een functiequery toevoegen met a doos-schaduw terugvallen.

Experimenteer met verschillende schaduweffecten

De populariteit van doos-schaduw is vrij duidelijk vanwege de veelheid aan use-cases. echter, de slagschaduw( ) functie wordt sterk onderbenut. We hopen dat je zult experimenteren met verschillende schaduweffecten en probeert te implementeren slagschaduw in uw toekomstige projecten.

Pseudo-klassen voegen een geheel nieuwe reeks functionaliteit toe aan CSS en uw persoonlijke webontwikkelingsrepertoire. Leer er meer over om een ​​bekwamere en efficiëntere webontwikkelaar te worden.

Hoe CSS box-shadow te gebruiken: 13 trucs en voorbeelden

Flauwe dozen zien er saai uit. Verfraai ze met het CSS-box-schaduweffect!

Lees volgende

Over de auteur