Kawałek Kodu

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

Rzeczy niemożliwe załatwiam od ręki, na cuda też nie trzeba czekać, czyli o błyskawicznym ditheringu... w CSS.

Mam taką książkę z roku 1989 o grafice komputerowej. Jest to jedna z tych książek, której treść jest aktualna również dziś, a jednocześnie rzadko spotykana w nowych pozycjach. Jest tam przedstawiona twarz w porównaniu dwóch rozdzielczości - niskiej i wysokiej. Aby grafika odwzorowywała realny obraz użyto ditheringu. W tamtych czasach przy ograniczeniach, metoda robiła na mnie ogromne wrażenie. Ostatnio wróciłem do niej i zrobiła jeszcze większe wrażenie.

Czytaj dalej

Miarka się przebrała, czyli o wskaźniku przewinięcia strony jeszcze inaczej (spin-off).

Jeśli nie odróżniasz metra od centymetra, albo masz problem z procentami, to dzisiejszy wpis jest dla Ciebie. Nawet jeśli masz miarkę w oku, to również. I choćbyś był krawcem i zmierzył tysiąc mankietów. Wtedy też.

Czytaj dalej

Asertywny CSS, czyli o pseudoklasie :not.

O... nie pogadamy dziś! Oj, przepraszam. O "nie" dziś pogadamy. Oczywiście wpis nie będzie naszpikowany negatywnymi treściami. Pobajerowałem też trochę w tytule i nie będę wcielał się w osobistego kołcza nauczającego jak być asertywnym. Pogadamy o "nie", czyli o pseudoklasie :not. Choć nadającej pejoratywny wydźwięk selektorom w CSS, to czasem bardzo pomocnej, niczym game changer. Ale dziś o jej mniej typowych rolach.

Czytaj dalej

Font shui, czyli o równomiernym rozłożeniu tekstów tam gdzie flex nie da rady.

Pamiętasz czasy przygotowywania prac do szkoły lub na studia? Justowanie to było coś! Każdy chciał mieć wyjustowaną pracę. Wszystko było ładnie pięknie dopóki nie zdarzyła się sytuacja, kiedy cztery wyrazy rozstrzeliły się na szerokość całej strony. Wtedy nie było to zjawisko pożądane. Dziś wręcz przeciwnie - z pełną premedytacją wykorzystamy właściwości dziur.

Czytaj dalej

Czym jest błąd matrixa, czyli o efekcie glitch w dwóch wariantach.

Pomysł na stworzenie efektu glitch chodził po mojej głowie od dawna. Co prawda za mgłą, ale chodził. Widziałem efekty na CSS-Tricks oraz na Tympanus, ale nie do końca mi odpowiadały. Zresztą opierają się o właściwość clip-path, która nie jest obsługiwana na Edge. Chciałem stworzyć coś...jakby to nazwać, mniej drętwego. Czy się udało, sam ocenisz. Tak więc dziś znów o filtrach w SVG. Wygląda na to, że wpadliśmy w pułapkę matrixa. Ale skoro już tu jesteśmy, to możemy bardziej obadać jego działanie. Przyjrzymy się pochodzeniu błędów matrixa. Będziemy Architektami! Albo raczej Psujami!

Czytaj dalej

"Moje przygody w kadrach", czyli o background-image dla obrazka oraz jak poprawić kadr rodem z filmów YouTube S01E01.

W dzisiejszym wpisie będziesz mógł posmakować zawodu YouTubera. Nie będziemy tworzyć co prawda niegrzecznych streamów ani zbierać miliona subskrypcji, ale przygotujemy efekt podobny do amatorskich filmów z telefonu gdzie w części kadru, której nie zajmuje obraz widzimy ten sam obraz, ale rozmyty. Przyznam, że to chyba pierwszy wpis, dla którego trudno mi było wybrać odpowiedni tytuł. "Rozmycie tła dla obrazu, który ma inne proporcje niż kadr"? A może jak film ze wstępu: "Jak naprawić pionowe wideo"? Treść chyba jednak wszystko wyjaśni i od razu rozpoznasz ten efekt. No to łapka w górę i zabieraj się do czytania!

Czytaj dalej