tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

wtorek, 14 marca 2017

Tęczowa animacja tła w CSS

Element: HTML/JavaScript
Stopień trudności: xxxx
Czas wykonywania: ~20 minut
Ok, zdaje sobie sprawę, że migająca tęcza jako tło to może nie jest najlepszym pomysłem świata, ale szukajmy pozytywów. Cała instrukcja może pomóc Wam ( i mi ) stworzyć coś interaktywnego i zapoznać się z animacjami w CSS. Albo posłużyć jako inspiracja. Kto tam wie!

Oto efekt

Rainbow


Efekt jest bardzo prosty i sensowny. Niestety w tym tutorialu nie znajdziecie dokładnie omówionych podstaw animacji i keyframe w CSS, ale o tym możecie przeczytać tu i tu.

Krok 1 
Na początek musimy stworzyć element, który ma się “tęczować”, czyli prosty:
<div>
<p>Rainbow</p>
</div>

Krok 2 
Ustawiamy podstawowe wartości dla <div> w CSS.
div {
padding: 100px 50px;
color: #fff;
}
i dla h1
div>h1 {
font-family: sans-serif;
font-weight: 900;
color: #fff;
letter-spacing: 3px;
}
Nasz div na razie nie ma żadnej wartości, która mówi o koloru tła.

Krok 3 
Stwórzmy animację i nazwijmy ją “rainbow”:
@keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #E2571E;}
20% {background-color: #FF7F00;}
30% {background-color: #FFFF00;}
40% {background-color: #00FF00;}
50% {background-color: #96bf33;}
60% {background-color: #0000FF;}
70% {background-color: #4B0082;}
80% {background-color: #8B00FF;}
90% {background-color: #222222;}
100% {background-color: #FF0000;}
}
Procenty od 0 do 100 mówią jak będą zmieniać się kolory w trakcie animacji. W tym przypadku, gdy chcemy stworzyć tęczę potrzebujemy 10 kroków, aby to wykonać. Możliwe są również inne ustawienia kroków.
Aby przejście było delikatne, kolor czerwony jest kolorem początkowym i zamykającym.

Krok 4
Dodaj animacje do div
div {
padding: 100px 50px;
color: #fff;
animation: rainbow 5s ease-in infinite;
}
5s - odpowiada za to jak długo będzie trwać animacja;
ease-in - jest to jeden z efektów przejścia przez kolory/animację;
infinite - czyli animacja będzie się powtarzać do skutku.

Div może mnie także ustawione tło, jednak nie wpływa to na animacje. Kolor jest niewidoczny w każdym momencie animacji.

Możecie zobaczyć efekt także tutaj i spróbować się nim pobawić bez możliwości popsucia bloggera. *-*
Komentarz
Dzień dobry!
Dajcie znać co o tym sądzicie i czy macie fajny pomysł gdzie i jak można by zastosować ten efekt? W jakiej sytuacji i który element wyglądał by ciekawie? Jeśli chcielibyście bardziej złożoną instrukcję dotyczącą budowania animacji i poprawnej struktury jej kodu dajcie znać!

14 komentarzy:

  1. Jak tęczowo. :3 Superaśny efekt. ;D

    OdpowiedzUsuń
  2. KURDECZEK, REANIMACJA GT(?) <3

    OdpowiedzUsuń
  3. Skin Tonight pobrany dla bloga brak-konkretow.blogspot.com
    Pozdrawiam.

    OdpowiedzUsuń
  4. I jeszcze tu się wepchnę (bo na bilbord przydrożny nie mam wystarczających środków) z informacją, że mejlacza posłałam :P

    OdpowiedzUsuń
  5. pobrałam Tonight na zonkile-i-chryzantemy.blogspot.com

    OdpowiedzUsuń
  6. Cześć,
    mam problem z pewnym menu - dokładniej z zakręceniem stron. Chciałam napisać do Ciebie e-maila, ale nie mogę, mam jakiś kłopot. :(
    Napisz do mnie, proszę. sovbedlly@onet.pl

    Będę wdzięczna za pomoc.

    OdpowiedzUsuń
  7. Witam,
    Chciałabym poinformować, że pobrałam szablon: Dream Emporium na bloga: ethan-walker.blogspot.com
    Pozdrawiam!

    OdpowiedzUsuń
  8. Przybywam w 2018. Żyjesz Tyler jeszcze? ;>

    OdpowiedzUsuń
  9. Witam,
    Chcę tylko poinformować, że pobrałam szablon: Impossible na bloga: http://anxiety--lover.blogspot.com/

    OdpowiedzUsuń
  10. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  11. Pobieram szablon "Tonight" na blog: https://cierpkismak.blogspot.com/

    Pozdrawiam cieplutko!

    OdpowiedzUsuń
  12. From little known facts and gift guides to stories of inspirational women and the latest fashion trends of Swimwear , our blog features fun posts on Jewelry fashion and lifestyle. Of course, if you’re a Hermes handbags lover, you’ll find that our blog also features tips for caring for your Brazilian Hair, exclusive offers and promotions, and information on new product releases.

    OdpowiedzUsuń
  13. Pobieram szablonik The Lifetime of adventure na orasey.blogspot.com :)

    OdpowiedzUsuń