search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

  • Szybko, prosto i łatwo 🙂 Pamiętam jak robiłem pierwszy napis 3D w gimipie. Podobna zabawa tyle, że z warstwami 🙂

  • Masz błędy w kolorowaniu składni czy tylko mi się tak wydaje?

  • Piotr Nalepa

    wiesz co, nie zwróciłem uwagi na taki szczegół. Piszę zazwyczaj za pomocą czystego HTML zamiast edytora WYSIWYG i tego nie widać czy jest ok czy nie. Lecz chyba wygląda na to, że jest ok wedle wtyczki.