Het toevoegen van schaduw aan de website is klein maar subtiel detail dat zeker een groot verschil kan maken. De details die je in de website gebruikt maken uiteindelijk het verschil. Schaduw toevoegen doe ik zelf altijd met CSS box shadow.
CSS box shadow
Met CSS box shadow kun je gemakkelijk een schaduw toevoegen aan een class of id. Zelf vind ik het altijd mooi om onder de webpagina nog een kleine schaduw te leggen.
Bij gewone HTML websites bestaat de pagina zelf meestal uit de #container. Hier zou je een kleine schaduw onder kunnen leggen door deze code te gebruiken:
#container {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
Deze code voeg je meestal toe aan de style.css.
(Geen idee wat CSS is? Lees dan ook dit blog eens: Wat is CSS)
De code voor het maken van de schaduw ken ik niet uit mijn hoofd hoor! Hier gebruik ik een handige website voor: https://www.cssmatic.com/box-shadow. Daar kun je ook meteen zien hoe je schaduw er uitkomt te zien. Links kun je de verschillende eigenschappen aanpassen en dan zie je rechts meteen het resultaat. Helemaal handig!
WordPress
Wil je een box shadow plaatsen in WordPress? Zorg er dan eerst voor dat je een child theme hebt aangemaakt.
Bij WordPress zijn de ID’s en classes al aangemaakt dus hier moet je een class of ID kiezen die al gemaakt is. Dit zijn mijn meest gebruikte ID’s:
#page {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
Of de .site-inner als je de binnenkant een schaduw wilt geven:
.site-inner
{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
Deze gebruik ik ook wel eens:
.wrap {
max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
}
Kom je er niet uit welke ID of class je moet gebruiken? Laat hieronder dan een reactie achter of neem contact op en dan help ik je snel verder!
Less is more
Je kunt deze schaduw ook plaatsen onder andere elementen van de website maar onthoud wel: Less is more! Het moet niet teveel worden. Het belangrijkste is dat het vooral niet op valt en dat het geheel in balans blijft.
Met de juiste schaduw kun je echt een verschil maken 🙂 Succes!