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.

 

ZOBACZ DEMO ŚCIĄGNIJ 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/

Podziel się :
  • Facebook
  • Twitter
  • email
  • Drukuj
  • PDF

Może Ci się również spodoba

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.