Efekt 3D tekst w CSS3.

Dzisiaj zajmiemy się cieniami do tekstu. Zastosujemy w tym celu CSS3. Poniżej możesz przetestować bądź ściągnąć gotowy przykład.

CSS3 daje nam wiele możliwości wśród dodawania cieni tekstowi (text-shadow).
Zazwyczaj definiowane jest to tak:

[code lang=”css”]
.shadow {
text-shadow: 2px 2px 4px #000; //[X] [Y] [rozmiar cienia] [kolor]
}
[/code]

Można również zastosować wiele cieni do tego samego tekstu:

[code lang=”css”]
.shadow {
text-shadow: 1px 1px 0 black,
2px 2px 0 black;
}
[/code]

Wszystkie cienie oddzielamy przecinkami tak jak powyższym przykładzie.

Poniżej zastosowanie cieni wraz z akcjami :hover ( po najechaniu na element):

[code lang=”css”]
.shadow {
color: white;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902;
}
.shadow:hover {
position: relative;
top: -3px;
left: -3px;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902,
4px 4px #fe4902,
5px 5px #fe4902,
6px 6px #fe4902;
}
[/code]

Artyk. napisany na podstawie http://css-tricks.com/3d-text-tower/