Působivé obarvení textu pomocí gradientu
Zajímavým způsobem, jakým zpestřit vizuální vzhled našeho webového projektu, může být použití gradientu. V tomto článku popíšeme, jak nastavit gradient jako barvu textu, a také jak jej rozhýbat pomocí animace.
Použití gradientu jako barvy textu
K nastavení barvy textu obvykle používáme CSS vlastnost color, kterou ale nelze použít pro nastavení gradientu. Využijeme proto tohoto triku za použití těchto CSS vlastností:
- background-image pro nastavení gradientu na pozadí textu
- background-clip pro inverzi gradientu tak, aby se vykreslil v textu, místo za ním
- color pro nastavení barvy textu na transparentní, aby bylo nastavené gradientové pozadí textu vidět.
Vlastnost background-image definujeme pomocí hodnoty linear-gradient, jehož první hodnota definuje směr gradientu (v příkladu jej máme nastaven na 45°), a následující hodnoty definují barvy použité v gradientu.
Vlastnosti background-clip definujeme hodnotu text.
Nakonec nastavíme vlastnost color: transparent.
See the Pen gradient 1 by webnode.dev (@WebnodeDev) on CodePen.
Nastavení změny gradientu na hover
Barvu textu obvykle můžeme animovat pomocí vlastnosti transition s hodnotou color. Pro gradient ale toto řešení použít nemůžeme, protože pro vlastnost background-image vlastnost transition nefunguje. Můžeme ale animovat pozici gradientu.
Budeme postupovat takto:
- nejdříve pomocí vlastnosti background-size: 400% zvětšíme velikost gradientu
- nastavíme pozici gradientu na jednu stranu pomocí background-position: left
- definujeme transition: background-position, čímž řekneme, že budeme chtít animovat pozadí textu.
- pro hover na prvek změníme pozici gradientu z levé strany na pravou, pomocí background-position: right
See the Pen gradient 2 by webnode.dev (@WebnodeDev) on CodePen.
Nastavení změny gradientu pomocí časované animace
Pro takto definovaný gradient můžeme nastavit i časovanou animaci.
- stejně jako v předchozím příkladu zvětšíme pozadí pomocí background-size: 400%
- definujeme animaci pozice gradientu pomocí keyframes a vlastnosti animation s těmito hodnotami:
název animace
doba běhu animace
klíčové slovo infinite, které zajistí, že se animace bude opakovat do nekonečna
klíčové slovo alternate, které vyřeší přeskakování mezi stavy animace.
See the Pen gradient 3 by webnode.dev (@WebnodeDev) on CodePen.
Podpora prohlížečů
U vlastnosti background-clip si musíme pohlídat podporu prohlížečů. Jak je vidět na screenshotu níže, podpora této vlastnosti v běžných prohlížečích je vysoká. Ve Firefoxu ji můžeme použít bez problému, pro prohlížeče Chrome a Edge stačí použít prefix -webkit. Jen v prohlížeči Internet Explorer vlastnost nebude fungovat, ale to už nás trápit nemusí 😁😎🤗
Za Webnode Jana Urbanková