wtorek, 14 marca 2017

Tęczowa animacja tła w CSS

2 komentarze:
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ć!
2

poniedziałek, 28 marca 2016

Silence

38 komentarzy:



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

38

niedziela, 20 marca 2016

Gadżety nad postem cz. 1

10 komentarzy:
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
10
+
Szablon wykonany przez Tyler