Kawałek Kodu

Programistyczne porady na luzie

Counter and content are kings, czyli zmienna CSS jako wartość dla właściwości content.

Mówią, że kluczem do uwiarygodnienia treści w oczach czytelnika jest zasada "content is king". Aby przyciągnąć czytelników należy zadbać o content. Skoro tak, to dziś zajmiemy się właśnie właściwością content. Zadbajmy o nią!

Czytaj dalej

It came with the frame, czyli border inaczej.

Dzisiejszy wpis nie jest kierowany wyłącznie do koneserów sztuki, bo chyba każdy zawieszając na ścianie zdjęcie z wakacji stara się dobrać do niego jak najoryginalniejszą i gustowną zarazem ramkę. Szukamy swego rodzaju "cutting edge" ramki, która w idealny sposób "odetnie" zdjęcie od ściany.

Czytaj dalej

Kulturysta, czyli animacja CSS z jedną klatką.

Wszystko we wszechświecie ma swój odpowiednik. Mamy kolor czarny i biały, jest ciepłe i zimne, jest dziura i korek. Wszystko jest binarne i nie może istnieć bez swojego odpowiednika. Czy tworząc animację z jedną klatką uzyskamy jakiś efekt? Co będzie stanowić tą jedną klatkę?

Poszukajmy drugiej połówki.

Czytaj dalej

Rodzinna stylizacja, czyli o zmianie stylu rodzica przy :hover na jego dziecku.

Od niepamiętnych czasów starsze pokolenia zajmowały się dobieraniem ubrań dla swojej latorośli. Złamiemy dziś tą zasadę, choć tylko w aspekcie CSS. Będziemy zmuszać rodzica, aby nie zmieniał wyglądu przy najechaniu myszy, a zmieniał się wtedy, kiedy będziemy straszyć myszą jego dziecko.

Czytaj dalej

Kolorowa papuga, czyli o wartości currentColor w CSS

Jak widać na powyższym fragmencie filmu, w życiu też można dzielić te same kolory. Jeden z obiektów ma czarne tło i czerwone V, drugi czarną ramkę i zapożyczone czerwone tło. Dziś omawiana wartość zachowuje się podobnie.

Czytaj dalej

Wszystko od początku! Czyli o resetowaniu animacji CSS.

Jeśli jesteś pasjonatem zjawisk paranormalnych, to te w dzisiejszym wpisie powinny Cię ogromnie zainteresować. Będziemy poruszać problem restartu animacji CSS. Poruszać również dosłownie. I oczywiście zrobimy to bez wykorzytania JavaScript!

Zakasajmy rękawy! Za nasz przykład posłuży prosty HTML zawierający obiekt SVG oraz efekt bujania oparty o animację CSS. Oczywiście animacja może być inna, obiekt również.

Czytaj dalej