[CSS] Jak uzyskać efekt 3D w tekście?

Ten wpis będzie dość krótki i będzie dotyczył sposobu uzyskania efektu trójwymiarowości w tekście za pomocą najnowszej wersji języka CSS. Nie będzie do tego potrzebna ani jedna grafika. Wszystko zostanie uzyskane za pomocą kilku linijek kodu.

Muszę wspomnieć, że efekt ten nie będzie widoczny w przeglądarkach Inernet Explorer (no chyba, że masz zainstalowane IE10 Developer Preview). Niestety, na tą chwilę nie można tego obejść w żaden sposób. Owszem, istnieją odpowiednie filtry w przeglądarce Microsoftu, ale one dodają cień lecz nie są w stanie utworzyć efektu 3D.

Na początek zdefiniujemy element, który będziemy przerabiać na 3D. W moim przypadku będzie to element p:

1

<p id="txt3D">Tekst w 3D</p>

Powyższy element będzie opisany następującym kodem CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#txt3D {
	font-size: 72px;
	color: #fff;
	text-shadow: 
		0px 0px 0 rgb(193,193,193),
		-1px -1px 0 rgb(182,182,182),
		-2px -2px 0 rgb(172,172,172),
		-3px -3px 0 rgb(162,162,162),
		-4px -4px 0 rgb(151,151,151),
		-5px -5px 0 rgb(141,141,141),
		-6px -6px 0 rgb(131,131,131),
		-7px -7px 6px rgba(0,0,0,0.8),
		-7px -7px 1px rgba(0,0,0,0.5),
		0px 0px 6px rgba(0,0,0,.2);
}

Jak widać, atrybut text-shadow jest bardzo rozbudowany i obsługuje kilka warstw cienia. Jeśli nie chcesz tworzyć takiego kodu ręcznie, to istnieje w Internecie odpowiedni generator, który wspomoże proces tworzenia takich efektów: generator 3D.

Wpis jest bardzo krótki i mam nadzieję, że będzie użyteczny.
Demo z tego artykułu jest dostępne tutaj: tekst w 3D CSS