15 krásnych textových efektov vytvorených pomocou CSS
Nádherný text alebo typografia prinesie váš dizajn atraktívny. V dizajne webových stránok CSS pomáha pri vytváraní štýlu vrátane rôznych efektov v texte alebo typografii. Pomocou služby CSS môžete použiť orezávanie a pridať animáciu do textu, aby ste mali trochu korení.
A aby sme to ilustrovali, zhromaždili sme sa 15 ohromujúcich a chladných textových efektov, ktoré sú možné pomocou CSS (niektorí s malou pomocou kódov Javascript).
Pre viac vecí, ktoré môžete urobiť so službou CSS, skontrolujte:
- 18 cool veci, ktoré nebudete veriť, boli postavené pomocou CSS
- 30 jQuery knižnice textových efektov, ktoré potrebujete vedieť
- Ako vytvoriť tvar srdca pomocou CSS
- Animate.css - CSS3 knižnica ľahko vytvorí animáciu
Elastický ťah Animácia
Yoksel oživuje mŕtvolu textu s chladnou farebnou schémou. Tento efekt sa dosahuje pomocou CSS a SVG. Výsledok je úžasný!
SVG Glitch
Chcete urobiť efekty, ktoré vyzerajú ako rozbitá analógová televízia? Dirk Weber urobil tento úžasný efekt závady pomocou filtrov CSS a SVG.
Logo obchodu Shop Talk
Logo značky Shop Talk je vytvorené spoločnosťou Hugo pomocou len CSS. Logo vyzerá podobne ako originál, kompletný s správnou textúrou.
Znížený efekt
Táto myšlienka spoločnosti Robet Messerle prináša efekt nôžového rezu, ktorý sa vykonáva s menej ako 70 riadkami CSS.
Elegantný tieňový efekt
Dlhý tieň efekt prichádza do textu, pomocou CSS. Tvorca, Juan Brujo urobil ďalšie 4 efekty, ale to je jednoducho najpôsobivejší.
Foggy textový efekt
Andreas vytvára úžasný filmový hmlový efekt. Platí len pre prehliadače Webkit.
SVG textová maska
Design od Marca Barrieho ukazuje elegantný efekt maskovania textu na veľkom pozadí.
Animácia textu
Yoann vytvoril úžasný ticker efekt s touto textovou animáciou. Sledujte, ako sa druhé slovo strieda medzi troma slovami.
Hit Floor
Tento 3D efekt od TheGuySam je jednoduchá hra na textových tieňoch, ale s úžasným výsledkom.
Text pozadia na klip
Jintos si zahrával s klipom na pozadí Webkitu a pridal obrázok pozadia do textu. Pri tejto metóde urobil 16 skvelých výtvorov.
CSS Text-FX
Moklik dodal textu stlmený svetelný efekt a dodával vám prerušované záblesky, ktoré varujú pred nebezpečenstvom z diaľky.
Animované podpisovanie podpisu
Gary Hepting vytvoril animáciu v reálnom čase. To funguje tak, že na cestu SVG použijete Javascript, aby ste podnietili podpisovanie.
Farebné Glitchy 404
Môžete počuť zvuk tejto chyby a cítiť vibrácie vo vnútri vašej hlavy? Taký je dobrý efekt závady. mistic100 z CSS plus trochu Javascript.
kozmos
Teraz je to elegantné a inšpiratívne logo. Je tiež vhodný na použitie “kozmos”, pretože obežnice, dostať to?
Načítava
Chladný zaťažovací efekt, ktorý jednoducho skrýva a zobrazuje písmená.
