2015/07/11

Animowane efekty tekstowe

  


  Witam po dłuższej przerwie , dzisiaj mam dla was parę ciekawych efektów dla tekstu z wykorzystaniem kodu CSS. Moim zdaniem wyglądają one świetnie , a przy tym można je modyfikować według własnych potrzeb.Z pewnością nadadzą się na logo strony lub inny jej element. Każdy z przedstawionych poniżej tekstów ma własny kod HTML i CSS.Ten pierwszy należy wkleić na dowolną podstronę na blogu , lub w dodatku "html/javascript" .Natomiast drugi nad tagiem ]]</b:skin> w edytorze html na bloggerze.
   Niestety nie miałem zbyt dużo czasu na redagowanie posta , dlatego dla tych efektów nie przygotowałem demka , więc macie tylko grafiki i opis działania.

1. Tekst z animowanym tłem




<div class="textanimation1">Blokotek</div>





@-webkit-keyframes slide {
0% { background-position:0 0; opacity:0; }
2% { background-position:2% 2%; opacity:1; }
99% { background-position:99% 99%; }
100% { background-position:100% 100%; opacity:0; }
}


.textanimation2 {
text-align:center;
letter-spacing:-.08em;
font:700 9.4em helvetica, sans-serif;
background:url(http://hanrosepewter.co.za/wp-content/uploads/2015/03/The-best-top-desktop-green-wallpapers-green-wallpaper-green-background-hd-21-1000x300.jpg);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:slide 60s linear infinite;
-moz-background-clip:text;
-moz-text-fill-color:transparent;
-moz-animation:slide 60s linear infinite;
text-shadow: 0 1px 1px transparent;
}




   W miejsce linku zaznaczonego żółtym kolorem możecie użyć własnego adresu obrazu , co spowoduje ,że będzie on pokazywany zamiast tego co teraz.Pomarańczowym kolorem jest wskazany napis jaki ma być wyświetlany.Grafika , którą zamieścicie zostanie przewijana i wykorzystywana jako tło tekstu (najlepiej żeby była długa).Animacja tutaj polega na ruchomym obrazie oraz jego przyciemnieniu.


2. Tekst z zmieniającym się kolorem



      Na grafice powyżej nie widać zmiany kolory , ale w zastosowaniu praktycznym ten efekt doskonale się prezentuje.Aby go wprowadzić na swojego bloga trzeba skopiować kod HTML i CSS oraz później wkleić w miejsce wskazane we wstępie posta.


<div class="textanimation2">Blokotek</div>



.textanimation2{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text6 10s linear infinite;
height: 100px;
text-shadow: 0 1px 1px transparent;
}

@-webkit-keyframes text6 {
0% {color:#74015A;}
25% {color:#FF005E;}
50% {color:#FC537D;}
75% {color:#FBB185;}
90% {color:#FDF9DB;}
100% {color:#74015A;}
}

@-moz-keyframes text6 {
0% {color:#74015A;}
25% {color:#FF005E;}
50% {color:#FC537D;}
75% {color:#FBB185;}
90% {color:#FDF9DB;}
100% {color:#74015A;}
}


  Kolorem żółtym zaznaczone są przejścia barw w tekstcie  , natomiast zielonym wartość początkowa koloru.Warto sobie popróbować różne kombinacje , jeśli chcecie dobrać sobie napis w desing bloga.

3. Rozmazany tekst

Na stronie w naszym blogu te logo będzie rozmazane , lecz po najechaniu nim kursorem nastąpi efekt przejścia i tekst będzie czysty.Natomiast jeśli "odjedziemy" wskaźnikiem to znowu pojawi się efekt rozmazania (ang. blur).


<div class="textanimation3">Blokotek</div>



.textanimation3 {
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 100, 90, 0.3 );
font:700 9.4em helvetica, sans-serif;
height: 100px;
text-shadow: 0 1px 1px transparent;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}
.textanimation3:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}


Tym razem zielone podkreślenie tekstu oznacza kolor napisu ,  turkusowy wielkość czcionki a żółty wartość rozmazania (im więcej px tak bardziej rozmazany jest nasz element).

4. Tekst z rozmazanym tłem

  Tu także mamy taki sam efekt jak w poprzednim napisie , jedynym wyjątkiem jest obrazowe tło.Według mnie znacznie lepiej wygląda z nim tekst.



<div class="textanimation4">Blokotek</div>



.textanimation4 {
text-align:center;
letter-spacing:-.08em;
background:url(
http://hanrosepewter.co.za/wp-content/uploads/2015/03/The-best-top-desktop-green-wallpapers-green-wallpaper-green-background-hd-21-1000x300.jpg)

font:700 9.4em helvetica, sans-serif;
height: 200px;
text-shadow: 0 1px 1px transparent;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}
.textanimation3:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}


Kolorem czerwonym zaznaczyłem adres url obrazu , który będzie tłem tekstu.

5. Trzęsący się tekst


     Trudno było mi opisać ten ostatni efekt , dlatego macie tutaj demo . Cała animacja polega na tym , że po najechaniu kursorem tekst "trzęsie się".



<div class="textanimation5">Blokotek</div>



.textanimation5 {
letter-spacing:-.08em;
color: rgba(0, 100, 90, 0.3 );
font:700 9.4em helvetica, sans-serif;
height: 100px;
text-shadow: 0 1px 1px transparent;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.textanimation5:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}


Myślę , że spodobają wam się wam te loga wykonane w CSS'sie , narazie opisałem ich tylko pięć , ale co jakiś czas będę dodawał więcej.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.