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:

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

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

.shadow {
   text-shadow: 1px 1px 0 black,
                2px 2px 0 black;
}

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

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

.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;
}

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