3D-tekst met CSS II: met een kleurverloop
De bedoeling van deze pagina is zonder toelichting wel duidelijk. Op deze bladzijde wordt uitgelegd hoe je zo'n kop maakt.
De code van het voorbeeld staat onderaan deze bladzijde. Je kunt hem downloaden om zelf te gebruiken.
Dit effect is op dezelfde manier gemaakt als 3D-tekst met CSS.
Raadpleeg dat item voor een uitgebreide bespreking van de code.
Dit item is niet meer dan een variant daar van. Daarom is de bespreking van dit effect heel summier gehouden.
- Verschillen t.o.v. het item 3D-tekst met CSS
- De naam van de class is anders. Dit is slechts cosmetisch.
- De Y-richting van de schaduw is positief genomen in plaats van negatief. Daardoor staat de schaduw schuin naar beneden in plaats van schuin naar boven.
- Per schaduw verloopt de kleur.
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>).
(Zet dit in de <BODY>, op de plaats waar de kop moet verschijnen).<style>
.drieDc {
margin:0;
padding:0;
font-size: 40px;
font-weight:bold;
color: maroon;
line-height: 60px;
letter-spacing: 2px;
text-align:center;
text-shadow: #999 1px 1px 0,
#888 2px 2px 0,
#777 3px 3px 0,
#666 4px 4px 0,
#555 5px 5px 0,
#444 6px 6px 0,
#333 7px 7px 0,
#222 8px 8px 0,
#111 9px 9px 0,
#000 10px 10px 0;
}
</style>
<p class="drieDc">3D-tekst met CSS II: met een kleurverloop</p>
Downloaden:
Druk op de knop:
File: voorb092.zip, 489 bytes.
