Efekt 3D tekst w CSS3.

31 stycznia 2012

minuta

138 Wyświetleń

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,
               5px 6px #fe4902;
}

Artykuł. napisany na podstawie https://css-tricks.com/3d-text-tower/

Tagi:

css3 porady

Follow Me Poczynił

Przemysław Sobolewski

Lead Software Engineer | Mentor | Trener. Moje początki programowania sięgają '98 r. W trakcie wielu projektów zdobywałem doświadczenie, rozwijając nie tylko umiejętności techniczne, ale także kompetencje miękkie. Jestem autorem bestsellera: Rekrutacyjny skarbnik. Entuzjasta fizyki kwantowej i AI.