15 Krásné textové efekty vytvořené pomocí CSS
Krásný text nebo typografie učiní váš design atraktivním. Ve web designu, CSS pomáhá dát styl designu včetně různých efektů v textu nebo typografii. Pomocí CSS můžete použít oříznutí a přidat animaci do textu, aby se věci trochu zjemnily.
A abychom to ilustrovali, shromáždili jsme 15 úžasných a chladných textových efektů, které jsou možné díky CSS (některé s malou pomocí z kódů Javascript).
Více informací o CSS můžete zjistit na adrese:
- 18 cool věcí, kterým nebudete věřit, byly postaveny pomocí CSS
- 30 jQuery textové efektové knihovny, které potřebujete znát
- Jak vytvořit tvar srdce s CSS
- Animate.css - CSS3 knihovna vytvořit animaci snadno
Elastický zdvih animace
Yoksel animuje úder textu chladným barevným schématem. Tento efekt se provádí pomocí CSS a SVG. Výsledek je úžasný!
SVG Glitch
Chcete vytvořit efekty, které vypadají jako rozbitá analogová televize? Dirk Weber provedl tento úžasný efekt závady pomocí CSS a SVG filtru.
Logo společnosti Shop Talk
Logo Shop Talk je vytvořeno společností Hugo pouze pomocí CSS. Logo vypadá podobně jako původní, doplněné správnou strukturou.
Slashed Effect
Tato myšlenka Robet Messerle dává efekt řezu nožem, provedený s méně než 70 řádky CSS.
Elegantní stínový efekt
Dlouhý stínový efekt přichází do textu, vytvořený pomocí CSS. Tvůrce, Juan Brujo udělal 4 další efekty, ale to je nejpůsobivější.
Foggy text efekt
Andreas vytváří úžasný filmový mlhavý efekt. Platí pouze pro prohlížeče Webkit.
Maska textu SVG
Design Marco Barria ukazuje elegantní efekt maskování textu na velkém pozadí.
Animace textu
Yoann vytvořil úžasný efekt tiketu s touto animací textu. Sledujte, jak se druhé slovo mění mezi třemi slovy.
Hit The Floor
Tento 3D efekt ThatGuySam je jednoduchá hra na textové stíny, ale s úžasným výsledkem.
Text na pozadí klipu
Jintos si hrál s klipem na pozadí Webkitu, aby do textu přidal obrázek na pozadí. Pomocí této metody vytvořil 16 skvělých výtvorů.
CSS Text-FX
Moklik přidal do textu tlumený světelný efekt, který vám dává přerušované záblesky, které varují před nebezpečím z dálky.
Animovaný podpis podpisu
Gary Hepting vytvořil animaci v reálném čase. To funguje tak, že na cestu SVG použijete Javascript k animaci podepisování.
Barevné Glitchy 404
Slyšíte zvuk této závady a pociťujete vibrace v hlavě? Tak dobrý je tento závada. mistic100 s CSS a trochu Javascript.
Kosmos
Nyní je to elegantní a inspirativní logo. Je také vhodný pro použití “Kosmos”, protože orbity, dostat to?
načítání
Chladící efekt, který je jednoduše skrývání a zobrazování písmen.