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/
Nikt jeszcze nie komentował. Bądź pierwszy!