Mini trening animacji CSS

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.