Výukový program pro design a algoritmy 2025, Leden

Hraniční trojúhelníky - Triky CSS

Hraniční trojúhelníky - Triky CSS

Existují trojúhelníkové znaky unicode. V SVG můžete nakreslit trojúhelník. Existuje ale i jiný způsob, jak nakreslit na web trojúhelník, který nezahrnuje nic jiného než vlastnost border a malou triku s CSS. “

Scroll Animation - Triky CSS

Scroll Animation - Triky CSS

V CSS jsou možné některé animace posouvání bez jakéhokoli JavaScriptu. Stačí se podívat na kapitolu Scroll Indicator, která je jasně kouzlem CSS. Můžeme ale udělat hodně práce s rolovací animací přímo v CSS pouze s trochou informací poskytovaných JavaScriptem: jak daleko se stránka posunula. “

Hranatá tlačítka - Triky CSS

Hranatá tlačítka - Triky CSS

Vlastnost box-shadow je zjevně užitečná pro světelné stíny za prvky poskytujícími pocit rozměrnosti a oddělení. Stín boxu však měl v rukávu nějaké triky, zejména pokud jde o to, jak stín boxu nemusí být měkký, stohovatelný a nemusí být ani zvlášť nablízku. “

Pruhovaná animace Barberpole Triky CSS

Pruhovaná animace Barberpole Triky CSS

Pruhy pozadí můžete vytvořit v CSS pomocí lineárního přechodu. Gradient si často představujeme jako slábnutí z jedné barvy na druhou, ale trik s pruhy spočívá v tom, že vůbec nevybledne. Místo toho můžeme určit „zarážky barev“ na stejném místě, takže se barva okamžitě změní z jednoho (...) “

Flexibilní mřížky - Triky CSS

Flexibilní mřížky - Triky CSS

Snad největším trikem v celé mřížce CSS je schopnost napsat rozložení sloupce, které výslovně nedeklaruje počet řádků nebo sloupců, ale automaticky je vytvoří na základě poněkud volných pokynů a obsahu, který poskytnete. “

Tažné prvky - Triky CSS

Tažné prvky - Triky CSS

Přetažení prvku po obrazovce je něco, co je na území JavaScriptu docela pevné. Budete potřebovat přístup k událostem DOM, jako jsou kliknutí a pohyb myši. Ale jsme tu, abychom si promluvili o tricích s CSS, takže to udělejme pouze v HTML a CSS! “

Spustit klepnutí na vstup, když kliknete na štítek - Triky CSS

Spustit klepnutí na vstup, když kliknete na štítek - Triky CSS

Štítky by měly mít atributy „pro“, které odpovídají ID vstupu, který označují. To znamená, že můžeme tento atribut zachytit a použít jej v selektoru k