V moderním web designu jsou gradienty neodmyslitelnou součástí, která přidává hloubku, vizuální zájem a dynamiku do designu webových stránek. CSS (Cascading Style Sheets) nabízí dva základní typy gradientů: lineární a radiální. Tyto gradienty mohou být použity na pozadí prvků, textů nebo i jako součást složitějších vizuálních efektů. V tomto článku si podrobně popíšeme, jak tyto dva typy gradientů v CSS použít.
Lineární gradienty
Definice a syntax
Lineární gradient vytváří přechod mezi dvěma nebo více barvami podél přímky. Syntax pro vytvoření lineárního gradientu v CSS je následující:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction určuje směr gradientu. Může být definován jako úhel (např. 45deg) nebo pomocí klíčových slov (to top, to bottom, to left, to right).color-stop jsou barvy, mezi kterými probíhá přechod. Každý color-stop může být libovolná barva (např. red, #FF0000, rgba(255,0,0,0.5)) a může být doplněn o pozici (např. 50%).
Příklady použití
- Jednoduchý lineární gradient z horní části dolů:
background-image: linear-gradient(to bottom, red, yellow);
- Lineární gradient pod úhlem 45 stupňů:
background-image: linear-gradient(45deg, red, yellow, green);
Radiální gradienty
Definice a syntax
Radiální gradient vytváří přechod mezi dvěma nebo více barvami, které se rozšiřují kruhově nebo elipticky z jednoho bodu. Syntax pro radiální gradient v CSS je:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape určuje tvar gradientu (circle pro kruh, ellipse pro elipsu).size specifikuje velikost gradientu (např. closest-side, farthest-corner).position určuje pozici středu gradientu (např. center, top left).- Barvy a jejich pozice fungují podobně jako u lineárního gradientu.
Příklady použití
- Jednoduchý kruhový radiální gradient:
background-image: radial-gradient(circle, red, yellow, green);
- Eliptický radiální gradient s explicitní pozicí:
background-image: radial-gradient(ellipse at top left, red, yellow, green);
Gradienty jsou mocným nástrojem v CSS, který umožňuje vytvářet složité vizuální efekty s minimálním úsilím. Jak lineární, tak radiální gradienty nabízejí široké možnosti použití od jednoduchých přechodů mezi barvami až po složité vizuální kompozice. Vyzkoušejte různé kombinace barv, směrů a tvarů, abyste objevili nekonečné možnosti, které gradienty nabízejí pro oživení vašich webových designů.
