Schaduw-generator

Hoe je dit gebruikt Schaduw-generator

1. Stel verschuiving, vervaging, uitbreiding en kleur in.
2. Voeg lagen toe voor een realistischer schaduw.
3. Kopieer de resulterende CSS.

De vijf waarden

De syntaxis is box-shadow: verschuiving-x verschuiving-y vervaging uitbreiding kleur.

Alleen de twee verschuivingen zijn verplicht. De rest heeft standaardwaarden, dus box-shadow: 0 2px rgba(0,0,0,.2) is geldig.

Een negatieve uitbreiding is nuttiger dan het lijkt: die verkleint de schaduw zodat hij niet aan de zijkanten uitsteekt, wat bij zachte, lage schaduwen heel natuurlijk oogt.

Het sleutelwoord inset maakt er een binnenschaduw van. Handig om een invoerveld te verdiepen of een ingedrukte toestand aan te geven.

En je kunt meerdere schaduwen achter elkaar zetten gescheiden door komma's, wat de basis is van de volgende sectie.

Eén schaduw is bijna nooit geloofwaardig

Dit is het praktische verschil tussen een sjabloonschaduw en een ontworpen schaduw.

In werkelijkheid heeft een schaduw meerdere componenten: een donkere, smalle zone vlak bij het object, en een diffuse, brede zone veel verder weg.

Eén CSS-schaduw kan die twee niet allebei weergeven, dus moet je ze stapelen. Twee of drie lagen volstaan: de eerste kort en wat dekkender, de volgende langer, vager en transparanter.

Een voorbeeldopbouw: een laag op 1px met 2px vervaging, een op 4px met 8px, en een op 10px met 20px, elk minder dekkend dan de vorige.

Tweede regel: gebruik geen zuiver zwart. Een zwarte schaduw op een gekleurde achtergrond oogt vuil. Neem een donkere tint van de achtergrondkleur, of een heel donker blauw, en met transparantie.

Derde regel: houd de richting consistent door de hele interface. Komt het licht van boven, dan gaan alle schaduwen omlaag. Schaduwen in verschillende richtingen op één scherm vallen op, ook als je niet weet waarom.

Prestaties en alternatieven

Een paar dingen om te weten voordat je overal schaduwen zet.

Sterk vervaagde schaduwen zijn duur om te renderen, vooral op mobiel. De vervaging rechtstreeks animeren geeft haperingen.

De gebruikelijke truc om een hoogteverschil te animeren is twee schaduwen over elkaar leggen en hun dekking animeren, of de grote schaduw op een pseudo-element zetten en daarvan de opacity animeren. Dat wordt wel door de hardware versneld.

Wil je een schaduw die de silhouetvorm van een transparante afbeelding volgt in plaats van de rechthoek van het element, dan werkt box-shadow niet: dan is filter: drop-shadow() de juiste eigenschap.

Voor een simpel randlijntje is een border of outline beter dan een schaduw zonder vervaging, en goedkoper om te tekenen.

En in de donkere modus verliezen schaduwen het grootste deel van hun effect, omdat er weinig ruimte is om nog donkerder te worden. Dan geef je hoogte meestal aan met een iets lichtere achtergrond.

Veelgestelde vragen