CSS zit vol met opties om het uiterlijk van uw websites te verbeteren; tekst- en kaderschaduwen zijn goede voorbeelden. Ze bieden vergelijkbare resultaten als de schaduwen in beeldbewerkingssoftware zoals Photoshop.
Maar hoe werken CSS-schaduwen? Laten we er meteen in duiken.
Hoe CSS Box Shadow te gebruiken
U kunt een CSS-vakschaduw toepassen met een enkele regel CSS die een bereik van maximaal zes waarden bevat. De volgorde van waarden is cruciaal voor de werking van uw CSS-vakschaduw, en het ziet er als volgt uit:
box-shadow: offset-x offset-y vervagen uitgespreide kleurinzet;Laten we elk van de waarden in volgorde bekijken.
CSS-vakschaduwpositie
De offset-x- en offset-y-waarden bepalen de positie van uw doosschaduw. De offset-x-waarde vertegenwoordigt de horizontale positie van de schaduw, terwijl offset-y de verticale offset is.
vakschaduw: 10px 10px;Positieve waarden resulteren in een schaduw onder en rechts van het element.
U kunt ook negatieve waarden gebruiken voor h-offset en v-offset:
vakschaduw: -10px -10px;Een negatieve h-offset verplaatst de schaduw naar links, terwijl een negatieve v-offset deze naar boven verplaatst:
CSS Box Schaduwvervaging
Zoals je kunt zien, zorgt het toevoegen van de h-offset en v-offset aan je schaduw voor een solide schaduw zonder enige bevedering. De vervagingswaarde vervaagt de schaduw van uw CSS-vak en wordt van kracht als u een derde waarde opgeeft:
vakschaduw: 10px 10px 20px;Hoe hoger het getal dat u toevoegt aan de vervagingswaarde, hoe vager uw CSS-vakschaduw zal zijn. Deze waarde kan niet negatief zijn.
CSS Box Shadow Spread
Met de spreidingswaarde kunt u de grootte van uw schaduw wijzigen zonder de positie te wijzigen.
vakschaduw: 10px 10px 20px 30px;Een positieve spreidingswaarde maakt de schaduw van uw CSS-box groter, terwijl een negatieve waarde deze kleiner maakt.
CSS-vakschaduwkleur
CSS-vakschaduwen zijn standaard ingesteld op de tekstkleur van het element, maar u kunt dat overschrijven door een kleur toe te voegen:
doosschaduw: 10px 10px 20px 10px #0000ff;De kleur die u gebruikt, moet een wettelijk CSS-kleurformaat hebben, zoals een hex-code, RGB-code of vooraf gedefinieerde kleur. Jij kan meer te weten komen over hex-codes en andere legale CSS-kleuropties voordat u aan de slag gaat met uw schaduwen.
CSS Box Shadow Inzet
CSS-vakschaduwen vallen standaard buiten hun toegewezen element. Door een inzet toe te voegen aan de eigenschap box-shadow, kunt u de schaduw aan de binnenkant van het element weergeven.
doosschaduw: 10px 10px 20px 10px #0000ff inzet;Dit is een vooraf gedefinieerde tekstwaarde; voeg het gewoon toe of verwijder het om de waarde in te stellen.
CSS-tekstschaduw gebruiken
CSS-tekstschaduwen zijn als kaderschaduwen, hoewel ze minder waarden hebben om te wijzigen. De syntaxis voor een CSS-tekstschaduw ziet er als volgt uit:
tekstschaduw: offset-x offset-y vervagingsradiuskleur;Maar hoe werken deze waarden?
CSS-tekstschaduwpositie
CSS-tekstschaduwverschuivingen werken op dezelfde manier als dezelfde schaduwwaarden voor vakken:
tekstschaduw: 10px 10px;Positieve waarden plaatsen de schaduw onder en rechts van de tekst.
Negatieve waarden doen het tegenovergestelde en plaatsen de schaduw boven en links van de tekst.
tekstschaduw: -10px -10px;U kunt negatieve en positieve waarden combineren om uw CSS-tekstschaduw perfect te positioneren.
CSS Tekst Schaduw Blur Radius
CSS-tekstschaduwvervagingsradius stelt u in staat om de schaduw achter uw tekst te vervagen.
tekstschaduw: 10px 10px 10px; De standaardwaarde voor deze waarde is 0 (geen vervaging).
CSS-tekstschaduwkleur
CSS-tekstschaduwen komen standaard overeen met de kleur van de tekst. U kunt de kleur van uw tekst wijzigen door deze toe te voegen aan het einde van de eigenschap CSS-tekstschaduw.
schaduw tekst: 10px 10px 10px #0000ff;Net als CSS-vakschaduwkleuren, moet u hiervoor een CSS-legale kleur gebruiken.
Voorbeelden van CSS Box- en tekstschaduwontwerpen
U kunt beginnen te experimenteren met uw gebruik van CSS-box en tekstschaduwen zodra u de basis begrijpt. De onderstaande ideeën zouden u moeten inspireren om uw eigen creatieve manieren te bedenken om deze CSS-eigenschappen te gebruiken.
Randen in twee kleuren met twee CSS-vakschaduwen
U kunt meer dan één vakschaduw of tekstschaduw toevoegen aan een HTML-element. Zolang er komma's tussen staan, kunt u nieuwe schaduwen toevoegen aan een enkele eigenschap.
doos-schaduw: 30px 30px#0000ff, -30px-30px 0px#00ff00;Deze tweekleurige rand is daar een goed voorbeeld van. Twee CSS-boxschaduwen met tegengestelde posities en geen vervaging/verspreiding produceren een uitstekende creatieve rand.
Dubbele CSS-tekstschaduwen voor een dramatisch effect
In dezelfde geest als het bovenstaande idee, kunt u tekst met meerdere tekstschaduwen toevoegen en positioneren voor interessante resultaten.
tekstschaduw: 35px 20px 4px donkergrijs, -35px -20px 4px donkergrijs;Dit voorbeeld toont een regel tekst met een schaduw erboven en een schaduw eronder, die beide op tekst gebaseerde kleurwaarden hebben.
Veelkleurige Achtergronden Met Ingezette CSS-vakschaduwen
CSS is krachtig genoeg om unieke en interessante middelen te creëren zonder externe bestanden. Het gebruik van een inzet-CSS-vakschaduw als achtergrond is hier een goed voorbeeld van.
doosschaduw: 20px 10px 10px 40px #000000 inzet, -50px -30px 8px 60px grijze inzet, 30px 20px 6px 90px lichtgrijze inzet;Dit vak heeft een witte achtergrond, samen met drie inzetschaduwen in verschillende kleuren. De schaduwen overlappen elkaar om een unieke achtergrond te creëren.
Dit effect verder versterken is een kwestie van een stijlvol CSS-achtergrondverloop toevoegen naar je element.
CSS Box Shadows & Text Shadows voor creatief webdesign
CSS-vak- en tekstschaduwen zijn eenvoudig te gebruiken als u eenmaal weet hoe u ermee moet werken. Je hebt nu de tools die je nodig hebt om aan je eigen ontwerpen te gaan werken, maar je moet CSS blijven onderzoeken om je vaardigheden te verbeteren.
