Mini trening animacji

Dzisiaj w ramach treningu zrobiłem sobie 20 mini ćwiczeń. Tak powstał mini zbiorek loadingów wszelakich.
Dołączam tutaj też paczkę z plikami, by w razie czego łatwiej wam się zmieniało css (chociaż CodePen też daje radę). Działa ona z wykorzystaniem Gulpa, który ma ustawioną prostą konfigurację.

Dla kolorów sekcji użyłem własnego rozwiązania. Jakiś czas temu szukałem listy nazw kolorów w css i trafiłem na stronę https://htmlcolorcodes.com/color-names/. Ładna – nie powiem. Ale ja potrzebowałem czegoś szybszego. Zaznaczyłem więc po chamsku wszystkie nazwy, skopiowałem do edytora i dostałem praktycznie gotowy obiekt z pogrupowanymi danymi dla kolorów. Za pomocą multikursora i Alt + F3 w sublimie dokonałem szybkiej korekty tych danych, a potem po kilkunastu linijkach kodu stworzyłem omawiane narzędzie. Co mi po nim skoro poza podstawowymi i tak pamiętam tylko jeden kolor – „tomato”…

A tutaj inna animacja – też w ramach treningu. Nie jest to może żaden loading, ale też stworzona w podobnej technice – z wykorzystaniem jednostki em.

W sumie całkiem ciekawa zabawa. Coś jak rozwiązywanie łamigłówek. Jak ugryźć dany problem, by uzyskać wybrany efekt.

Visual Studio Code

Jakiś czas temu w warsztacie webmastera pisałem, że używam 2 edytorów: PHPStorm i Sublime Text Editor.
Prowadząc zajęcia staram się nie wyskakiwać z edytorami, których nie używają kursanci.
Idąc za ciosem od jakiegoś czasu zacząłem używać Visual Studio Code – darmowy edytor od Microsoftu.
W tym mini artykule podzielę się z wami kilkoma trikami, które umilą wam pracę z tym narzędziem.

Urodzinowy tort

W ramach urodzin przeprowadziłem mini eksperyment na temat filtrów CSS. Tak sobie szczerze mówiąc.
Nie jest to bynajmniej danie dla mobilek i nędznych przeglądarek. Wiatrak w laptopie daje znać, że chyba ciut przesadziłem. Bywa…

Baner animowany

Jak niektórzy wiedzą, od jakiegoś czasu zajmuję się nauczaniem frontendu.
Z wczorajszą grupą kończyliśmy temat sass, i między innymi animacji css, czyli tego o czym pisałem ostatnim razem.
Nie ukrywam – bardzo lubię te tematy, bo pozwalają trochę poczarować.
Zawsze po skończeniu takiego działu zabieramy się za jakiś mini projekt, który zbiera i podsumowuje poznane techniki.
Tym razem przygotowałem dla kursantów baner, który miał służyć do poćwiczenia animacji.
Niestety bardzo mało czasu spowodowało, że zamiast wykonać całość od początku do końca, zdążyliśmy tylko omówić jakie techniki zastosować na danych składowych tego banera. Całość zostawiłem im do samodzielnego wykonania.

Dzisiaj rano wstałem i stwierdziłem, że takie zadanie to fajny materiał na tutorial. Nie teoria, a praktyka.
No to co? Zaczynamy?

Animacje css

Ah animacje, piękne animacje. Ileż to można o nich pisać. Całe książki. Wbrew pozorom jednak wcale aż tyle tego nie ma. Przynajmniej w teorii, bo w praktyce można całkiem fajnie poczarować.