Ben's Hobbyhoekje -- Lichtgevende schaduwen met CSS

"Lichtgevende" schaduwen met CSS

Beweeg de muis hier of tik erop / ernaast

De bedoeling van deze pagina is zonder verdere inleiding wel duidelijk. Op deze bladzijde wordt uit de doeken gedaan hoe je het plaatje hiernaast kunt maken, hoe je de schaduw maakt en hoe je de schaduw en de tekst animeert.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. Het maken van de schaduw
2. Het animeren van de schaduw en de tekst
Het maken van de schaduw
De lichtgroene rechthoek is een <div>-tag, met de class NeonBlock.
De schaduw wordt gemaakt met behulp van de CSS-eigenschap box-shadow, die wordt toegepast op een rechthoekige <div>-tag.
De kleur van de tekst in de <div>-tag is color:maroon (steenrood).
De schaduw wordt in eerste instantie op 0px breed ingesteld (feitelijk: geen schaduw). De schaduw wordt verbreed tot 10px en een verloop van 80px als de muis boven de <div>-tag zweeft.
De CSS-code is: box-shadow:0 0 0 0 #f06.
Waarden die je aan de CSS-eigenschap box-shadow moet/kunt meegeven, staan in de tabel hieronder.

*parameter*		*Betekenis*
h-shadow		Horizontale verschuiving. Deze parameter is verplicht. Je geeft h-shadow op in px, em, etc., zie ook het item Afmetingen van letters en toepassing met CSS. Je kunt hier zowel positieve (naar links) als negatieve (naar rechts) getallen opgeven.
v-shadow		Verticale verschuiving. Deze parameter is verplicht. Je geeft v-shadow op in px, em, etc., zie ook het item Afmetingen van letters en toepassing met CSS. Je kunt hier zowel positieve (naar beneden) als negatieve (naar boven) getallen opgeven.
blur		Breedte van het verloop van schaduw naar achtergrond. Deze parameter is optioneel, mag dus worden weggelaten. Je geeft blur op in px, em, etc., net als bij h-shadow en v-shadow. Als je blur weglaat, krijgt je een slagschaduw, dus een schaduw met scherpe randen.
spread		Breedte van het deel van de schaduw dat niet geblurred wordt. Deze parameter is optioneel, mag dus worden weggelaten. Je geeft spread op in px, em, etc., net als bij h-shadow en v-shadow. Als je spread weglaat, begint het verloop van de de schaduw direct tegen de <div>-tag aan.
color		Kleur van de schaduw. Deze parameter is optioneel. Je kunt hier elke geldige CSS-kleuraanduiding gebruiken, zie het item Kleuren in CSS. Als je color weglaat, wordt `color:black` (zwart) gebruikt.
inset		Hiermee keer je de "richting" van de schaduw om. Normaal zit die aan de buitenkant van het HTML-element dat een schaduw heeft. Als je inset opgeeft, zit de schaduw aan de binnenkant.

Het animeren van de schaduw en de tekst
De term "animeren" betekent hier: De beweging laten uitvoeren.
De CSS verzorgt hier het reageren op de plaats van de muis: al of niet boven de div-tag.
Om de overgang van geen schaduw naar volledige schaduw vloeiend te laten verlopen, wordt de CSS-eigenschap transition gebruikt. Deze staat in de class NeonBlock en wordt geactiveerd in de pseudo-class NeonBlock:hover.
De CSS-eigenschap transition wordt ook gebruikt om de tekstkleur te laten verlopen van steenrood naar blauw.
De CSS-code is: transition:box-shadow .8s ease-in, color .8s ease-in;.
Waarden die je aan de CSS-eigenschap transition moet/kunt meegeven, staan in de tabel hieronder.

*parameter*		*Betekenis*
transition-property		De CSS-eigenschap waarop het effect moet werken. In dit geval is dat box-shadow. Je kunt hier ook all (alle eigenschappen binnen deze class, id of HTML-element worden geanimeerd) of none (geen enkele eigenschap binnen deze class, id of HTML-element wordt geanimeerd.
transition-duration		Hier geef je aan hoe lang de overgang duurt, in seconden (s) of miliseconden (ms). Deze parameter is optioneel. Als je niets opgeeft wordt 0s genomen (= abrupte overgang).
transition-timing- function		Hier geef je aan op welke manier de overgang gaat. De overgang verloopt altijd via een derdegraads Bezier-kromme. Dit is een parametrische kromme. Je geeft dus vier getallen (parameters) op, waarvoor geldt: 0 ≤ getal ≤ 1. De code: `cubic-bezier(p1x,p1y,p2x,p2y)`. Het vergt aardig wat oefening om op deze manier een mooi verloop in te stellen. Gelukkig voorziet CSS in vijf voorgedefinieerde waarden, waarmee je prima resultaten haalt: `linear`. De snelheid is constant gedurende de overgang. equivalent aan `cubic-bezier(0,0,1,1)` `ease`. De overgang start en eindigt langzaam, maar verloopt snel. Dit is de default instelling. equivalent aan `cubic-bezier(0.25,0.1,0.25,1)` `ease-in`. De overgang start langzaam en verloopt sneller. equivalent aan `cubic-bezier(0.42,0,1,1)` `ease-out`. De overgang start snel en eindigt langzamer. equivalent aan `cubic-bezier(0,0,0.58,1)` `ease-in-out`. Combinatie van ease-in en ease-out. equivalent aan `cubic-bezier(0.42,0,0.58,1)` Meer informatie over `cubic-bezier` vind je in het item Bezier-krommen gebruiken in CSS-animaties.
transition-delay		Hiermee geef je op, in seconden (s) of milliseconden (ms) hoe lang er wordt gewacht voor dat het effect wordt gestart. Deze parameter is optioneel. Als je niets opgeeft wordt 0 genomen (= niet wachten).

Als de muis boven de <div>-tag zweeft, wordt de pseudo-class NeonBlock:hover actief.
In deze pseudo-class staat dat de spread 10px breed moet zijn en dat de blur 80px breed moet zijn. De CSS-code daarvoor luidt: box-shadow:0 0 80px 10px #f06;.
De transition, opgegeven in class NeonBlock wordt uitgevoerd.
Als de muis de <div>-tag verlaat wordt de transition weer uitgevoerd, waarbij de schaduw verdwijnt.
De kleurverandering van de tekst (van steenrood naar blauw) gaat op dezelfde manier.
Tenslotte:
Zorg voor voldoende ruimte om het plaatje heen, zodat er voldoende plaats is voor het effect. Hier is dat bereikt met margin in combinatie met float:right. In de praktijk is dat een kwestie van een beetje proberen en testen in diverse browsers.
Om het goed te laten werken met iPad en iPhone, is de Vendor-prefix -webkit- noodzakelijk.
Op aanraakschermen verschijnt het effect pas als je de <div>-tag aantikt. Dat komt om dat voor dit type schermen de pseudo-class :hover niet is gedefinieerd. Aanraakschermen gaan dus anders met :hover om.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
.NeonBlock { /* Eerst de DIV met de tekst */
width:120px; height:50px;
float:right;
margin:10px 50px 10px 60px; padding:25px;
background:#dfd; color:maroon;
font-weight:bold; font-size:16px; text-align:center;
/* Schaduweffect en tekstkleur die verandert */
box-shadow:0 0 0 0 #f06;
transition:box-shadow .8s ease-in, color .8s ease-in;
}
.NeonBlock:hover {
box-shadow:0 0 80px 10px #f06;
color:#00f;
}
</style>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).

<div class="NeonBlock">Beweeg de muis hier</div>

Downloaden:

Druk op de knop: File: voorb396.zip, 519 bytes.

Opmerking:

Omdat hier speciaal wordt gereageerd wordt op de muis-pointer die zich al of niet boven een <div>-tag bevindt, werkt dit niet op mobiele apparaten die immers een aanraakscherm hebben.

Inspiratie: Webdesigner Magazine 54, pag. 29.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.