Tęczowa animacja tła w CSS

wtorek, 14 marca 2017

Tęczowa animacja tła w CSS

15 komentarzy Napisane przez Karol

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ć!

Czytaj dalej

Silence

poniedziałek, 28 marca 2016

Silence

38 komentarzy Napisane przez Karol

Dope

stworzony: 22 czerwca 2015

Autor: Tyler

Baza: Szablon Simple;

Podgląd: 1

Grafiki i zdjęcia wykorzystane w podglądzie są przykładowe i nie są one częścią szablonu.

• szablon jednokolumnowy;
• Poszczególne ustawienia gadżetów:
  • brak

Czytaj dalej

Gadżety nad postem cz. 1

niedziela, 20 marca 2016

Gadżety nad postem cz. 1

11 komentarzy Napisane przez Karol

Element: HTML/JavaScript
Stopień trudności: xxxx
Czas wykonywania: ~20 minut

Robiłam ostatnio szablon bazując trochę na drugim szablonie głównym, jaki pojawił się dawno temu na Graphical Thoughts. Szablon ten miał 4 gadżety nad postem 2x2. Dokładnie pamiętam jak męczyłam się, aby je stosownie ustawić i po paru godzinach męk w końcu się udało ( Całość jednak była słodko gorzka, bo gadżety rozjeżdzały się przy innych rozdzielczościach ). Od tamtej pory minęło jakieś 4 lata i w ciągu tego czasu udało mi się znaleźć dwa proste rozwiązania tego problemu! Dzisiaj o opcji numer 1, która jest użyta na blogu w tej chwili.

Opcja numer jeden ma jednak pewną wadę. Nie ma możliwości dodawania gadżetów proponowanych/stworzonych przez bloggera. Jedyne co możemy zrobić to stworzyć nasz własny content.

Krok 0 - towrzenie tabeli 

Do stworzenia, w tym przypadku, trzech kolumn, będziemy używać table. Być może część z Was się z tym spotkała, część nie. Do rzeczy.
Przykład tabeli, źródło

<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

table - tworzy tabelę
tr - tworzy nam rzędy
td - tworzy kolumny
Czyli powyższa tabela ma dwa rzędy i po 3 kolumny  w każdym z nich. Co wygląda mniej więcej tak.

Jill	Smith	50
Eve	Jackson	94

#easy

Krok 1 - tabela w gadżecie / podgląd

Na początku tworzymy gadżet HTML/JavaScript i dodajemy kod ( jako przykład użyję części kodu użytego na GT ).

<table cellspacing='10'>
<tr>
<td valign='top'><span class='dat'>Pytania</span> - Jeśli macie jakieś pytania lub uwagi, to zapraszam na <a href='http://ask.fm/sleepingtyler'>nasz profil ask.fm.</a> Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować.</td>
<td valign='top'><span class='dat'><a href='http://graphical-thoughts.blogspot.dk/p/propozycje_30.html'>Propozycje</a></span> - 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: <b><a href='http://graphical-thoughts.blogspot.com/p/propozycje_30.html'>Propozycje</a></b>
</td>
<td valign='top'><span class='dat'>Pomoc</span> - 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</td>
</tr>
</table>

Przy pomocy table tworzymy tabelę, tr - daje nam możliwość stworzenia jednego rzędu kolumn i na końcu 3 kolumny dzięki td. Tekst szary to tekst przykładowy, to co znajdzie się w tekście kolumn.

Krok 2 - pozycjonowanie gadżetu / podgląd

Na podglądzie, tło białe pod blogiem stworzone jest za pomocą content-inner i nie było dokonywanych tam większych zmian. Jednak widzimy, że gadżet nieco przechyla się na prawą stronę. Duża jest prawdopodobność, że tak będzie w większości przypadków, jeśli ktoś będzie probówał korzystać z instrukcji. Rozwiązaniem na to jest:

#HTML2 {
margin-top:40px;
margin-left:-0px;
margin-right:40px;}

margin-top gwarantuje nam przestrzeń 'od góry', margin-left:0px - jest nieruszony, bo chciałam stworzyć wrażenie 'paddingu' dla całego gadżetu i zrównoważyć trochę masę tekstu w tabeli przez dużo miejsca naokoło. Margin-right:40px sprawia, że prawa granica gadżety jest dalej od prawej strony.

Krok 3 - style / podgląd

Content został stworzony, teraz czas na stylowanie całej tabeli. Chcemy stworzyć efekt gadżetu, więc nasz kod będzie opierać się na td, czyli każdej z kolumn ( w tym przypadku również gadżetów ).

#HTML2 td {border:1px solid #ccc; margin-right:10px;  padding:10px 10px 10px 10px;   font:8px 'roboto'; text-transform:uppercase; font-weight:normal; text-align:center; letter-spacing:2px; color:#777;background:#f5f5f5;}

Krok 4 - Ostatnie poprawki

Jeśli w tabeli umieścicie linki, tytuły każdego z gadżetów, je również elegancko wystylizujcie, używając td a, td i czy td b! Mój końcowy efekt znajdziecie tutaj.

Komentarz

Cześć Miśki!
Instrukcja ta weszła mi w plan przygotowany wcześniej, ale robiąc tutorialowe szablony zauważyłam, że dość często korzystam z tego sposobu, więc może komuś się przyda! Opcja numer dwa już niedługo, niestety tam troszkę grzebania w kodzie.
I szablony przy okazji instrukcji wychodzą tak szybko i płynnie, że zaraz nazbiera mi się tego pokaźna suma i cóż tym potem zrobić....#thuglife

Czytaj dalej