Wszystkie posty z kategori "CSS"

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.

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

Float i inline-block

W dzisiejszym artykule mała powtórka z przeszłości.
Sporo młodych webmasterów twierdzi, że nie ma sensu uczyć się technik związanych z floatami i display:inline-block, bo w dzisiejszych czasach są inne techniki.
Moje zdanie jest odmienne. Dobry webmaster nie musi używać tych technik. Ale musi je znać, bo pewnego dnia może na nie natrafić. I wtedy co powie? Wie pan – ja panu tego nie zrobię, bo ja umiem tylko nowe…

Chart.js – wykresy

Tym razem weźmiemy pod warsztat tworzenie wykresów z wykorzystaniem biblioteki ChartJS. Jest darmowa biblioteka umożliwiająca umieścić na naszej stronie wykresy wszelakiego typu. Nie ma może możliwości jak profesjonalne biblioteki (jak chociażby Highcharts), ale w wielu miejscach w zupełności wystarcza.
W poniższym tekście nagniemy jej domyśle ustawienia tak by były bardziej uniwerstalne.