Samouczek dotyczący projektowania i algorytmów 2025, Styczeń

Trójkąty graniczne - CSS-Tricks

Trójkąty graniczne - CSS-Tricks

Istnieją trójkątne znaki Unicode. Możesz narysować trójkąt w SVG. Ale jest inny sposób na narysowanie trójkąta w Internecie, obejmujący wyłącznie właściwość border i trochę sztuczek CSS ”.

Animacja przewijania - CSS-Tricks

Animacja przewijania - CSS-Tricks

Istnieje kilka animacji przewijania, które są możliwe w CSS bez żadnego JavaScript. Wystarczy spojrzeć na rozdział dotyczący wskaźnika przewijania, który jest wyraźnie magią CSS. Ale możemy wykonać wiele animacji przewijania bezpośrednio w CSS, używając tylko jednej informacji dostarczonej przez JavaScript: jak daleko przewinęła się strona ”.

Boxy Buttons - CSS-Tricks

Boxy Buttons - CSS-Tricks

Właściwość box-shadow jest oczywiście przydatna w przypadku jasnych cieni za elementami, zapewniając poczucie wymiarowości i separacji. Ale Box-Shadow miał kilka sztuczek w rękawie, zwłaszcza że cień w pudełku nie musi być miękki, można go układać w stos, a nawet nie musi być szczególnie blisko.

Animacja pasiasty Barberpole - CSS-Tricks

Animacja pasiasty Barberpole - CSS-Tricks

Możesz tworzyć paski tła w CSS, używając gradientu liniowego. Często myślimy o gradiencie jako przejściu z jednego koloru do drugiego, ale sztuczka z paskami polega na tym, aby w ogóle nie mieć żadnego zanikania. Zamiast tego możemy określić „przystanki koloru” w tym samym miejscu, tak aby kolor zmieniał się natychmiast z jednego (…) ”

Elastyczne siatki - CSS-Tricks

Elastyczne siatki - CSS-Tricks

Być może największą sztuczką w całej siatce CSS jest możliwość napisania układu kolumn, który nie deklaruje wyraźnie liczby wierszy lub kolumn, ale automatycznie tworzy je na podstawie nieco luźnych instrukcji i dostarczonej zawartości ”.

Elementy do przeciągania - CSS-Tricks

Elementy do przeciągania - CSS-Tricks

Przeciąganie elementu po ekranie jest dość mocno związane z JavaScriptem. Będziesz chciał mieć dostęp do zdarzeń DOM, takich jak kliknięcia i ruch myszy. Ale jesteśmy tutaj, aby omówić sztuczki CSS, więc zróbmy to tylko w HTML i CSS! ”

Wyzwalanie Kliknij wejście po kliknięciu etykiety - CSS-Tricks

Wyzwalanie Kliknij wejście po kliknięciu etykiety - CSS-Tricks

Etykiety powinny mieć atrybuty „for” zgodne z identyfikatorem danych wejściowych, które zawierają. Oznacza to, że możemy złapać ten atrybut i użyć go w selektorze, aby „