Kawałek Kodu

Co tu się odskryptala?! Czyli programistyczne porady na luzie

Skąd się biorą kółka na wodzie, czyli o efekcie water ripple w JS, S01E01.

Ostatnio trochę deszczowo i mokro się zrobiło, więc podejmiemy temat na czasie. Pokażę Ci skąd się biorą kółka na wodzie, a może dowiemy się również dlaczego cegła wrzucona do wody tworzy kręgi. A to wszystko w efektownej formie ubranej w JS oraz Canvas. I co najważniejsze, każdy z Was będzie mógł takie kółka tworzyć na ekranie własnego komputera bez potrzeby oczekiwania na deszcz. Chcesz być Rainman'em? Czytaj dalej!

Czytaj dalej

La giustificazione è mobile! Czyli o zmiennym wyrównaniu tekstu, zależnym od jego długości.

Dziś odcinek dla wymagających. I to podwójnie, a nawet potrójnie będą spełnione ich oczekiwania, bo oprócz osiągnięcia dwóch korzyści jednym rozwiązaniem, takowe będzie przedstawione w wyjątkowo krótki sposób. Wyrównanie zmiennym jest! Właśnie o tym, bez sztywniactwa, zaraz pogadamy.

Czytaj dalej

Etykietka na haczyku, czyli label hack - efekt hover pomiędzy dwoma niespokrewnionymi elementami.

Kiedyś słowo "hack" w aspekcie CSS kojarzyło się raczej z kombinowaniem i męczarniami, aby strona wyglądała na wszystkich przeglądarkach tak samo, również na wszystkich wersjach IE. Obecnie na całe szczęście słowo zyskało przyjemniejsze znaczenie. Teraz każdy lubi hacki, bo hacki rozwiązują pewne problemy w sprytny i prosty sposób. Mamy checkbox hack, mamy radio hack, mamy również inne efekty, które jeśli nie całe w sobie, to częściowo używają jakichś innych hacków. Apetyty rośnie w miarę jedzenia i chciałoby się poznać kolejny hack, skoro tak, to niech tak się stanie.

Czytaj dalej

Misiu, ładniej mi w tej niebieskiej czy w zielonej? Czyli o comparison slider.

Kilka miesięcy wstecz trafiłem na... efekt, plugin, kontrolkę, w sumie trudno nazwać czym jest comparison slider. Jego działanie objawia się tym, że w jego oknie widzimy dwa obrazy, które rozdzielone są suwakiem. Po lewej stronie suwaka widzimy lewy obraz, a po prawej... W zależności od przesunięcia suwaka wyłania się większa część danej połówki. Tak więc trafiłem i zapomniałem. Parę dni temu przypomniałem sobie o tym efekcie i postanowiłem go odtworzyć w CSS, wpierw wyszukując czy ktoś już tego nie dokonał.

Czytaj dalej

Jeden obraz wart tysiąca obrazów, czyli o tym czy IMG może mieć tło oraz o karuzeli opartej o jeden plik graficzny.

Nie wiem kto jest autorem chińskiego przysłowia sparafrazowanego w tytule wpisu, ale gdyby żył dziś, w epoce komputerów, minimalizacji i wszędobylskiej optymalizacji, to pewnie właśnie takie zmodyfikowane powiedzenie przyszłoby mu do głowy. Pogadamy dziś o background-image dla obrazka, pseudometodzie na złodziei oraz karuzeli, czyli nieskończenie przewijanym sliderze.

Czytaj dalej

Sortowanie na ekranie, czyli o sortowaniu rekordów tabeli w... CSS.

Dzisiejszy wpis będą sponsorować dwa powiedzenia: "Kto pierwszy ten lepszy" oraz "Last but not least". Choć są raczej antagonistami, to jak mawiają ludzie: punkt widzenia zależy od punktu siedzenia, więc obydwa będą dziś wiodły prym. Może nie jednocześnie, ale raz jedno, a raz drugie. Będzie o sortowaniu wierszy tabeli, ale nie takim zwykłym - przecież byłoby nudno.

Czytaj dalej