11 lipca 2015

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.
Designed by Blokotek. All rights reserved.