Kawałek Kodu

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

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

Cykliści jednak wszystkiemu niewinni, czyli o cycle button, elemencie, który (nie)istnieje w HTML.

Niektórzy mówią, że cokolwiek by się nie stało, winni są temu cykliści. To o czym dziś piszę wiąże się z cyklistami wyłącznie poprzez etymologię. Oczywiście nie ponoszą oni jakiejkolwiek winy w tej sprawie, więc jeśli i Ty jesteś zapalonym rowerzystą, a jednocześnie fanem programowania, to myślę, że bez obaw i z przyjemnością zapoznasz się z wpisem. Pompuj dętkę i zaczynamy!

Czytaj dalej

Unboxing, czyli element wizualnie szerszy niż jego kontener (na przykładzie Bootstrap).

Ten kto chodził do przedszkola ma pewnie zdjęcie grupowe, na którym stojąc przed przebierańcem w stroju Św. Mikołaja, szczerzył zęby w stroju wróżki lub prężył pierś w stroju kowboja robiąc za mistrza pierwszego planu. Dziś już jako trochę starsi zajmiemy się podobnym efektem - sprawiania wrażenia, że mniejszy element zajmuje całą szerokość strony, pomimo, że mieści się w rodzicu i obydwoje wcale tacy szerocy nie są.

Czytaj dalej