Opvallende koppen met CSS VI

Extruderen

Hierboven staat een kop in een mooi lettertype. Als je er met de muis overheen gaat lijkt het of de tekst door het papier wordt geduwd. Dat heet extruderen.
Het effect werkt niet op een aanraakscherm.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
De code bestaat uit CSS en wat HTML. Er komt geen JavaScript aan te pas.
De HTML is een enkele <h1>-tag met de klasse extruded. Hierin staat de tekst van de kop, hier is dat dus "Extruderen".
De CSS maak de <h1>-tag op: positionering in het document en in de regel, alsmede het letterttype
Het font heet "Lobster". Het wordt gehaald uit de lettertype-bibliotheek van Google. Zie het item Niet-standaard fonts gebruiken uit externe bronnen voor meer informatie.
De schaduw van de tekst is opgebouwd uit 7 laagjes, elk afwisselend blauw en wit van kleur. Door er met de muis overheen te gaan veranderen de tekst en de schaduw van kleur. Dat gebeurt met een eenvoudige transition, die 1 seconde duurt.
Toepassen in je eigen site
Download de code en bouw de HTML en CSS op zoals hier onder is aangegeven.
Pas de kleuren aan in de CSS. Pas d tekst aan in de HTML.
Het is mogelijk om het aantal laagjes van de schaduw kleiner of groter te maken. Ook leuk is om ze allemaal dezelfde kleur te geven. Dat geeft een mooi vloeiend effect.

Gebruik:

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

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet";>
<style>
h1 {
text-align:center;
font-size:3.5em;
font-family: lobster;
margin:0;
}
.extruded {
color: #09c;
text-shadow: blue 1px 1px,
white 2px 2px,
blue 3px 3px,
white 4px 4px,
blue 5px 5px,
white 6px 6px;
blue 7px 7px;
position: relative;
transition: text-shadow 1s, color 1s;
}
.extruded:hover {
text-shadow: #ffdc82 1px 1px;
color: #008080;
}
</style>

(Zet dit in de <BODY> op de plaats waar de kop moet verschijnen).

<h1 class="extruded">Extruderen</h1>

Downloaden:

Druk op de knop: File: voorb517.zip, 523 bytes.