Úvodná » kódovanie » 15 krásnych textových efektov vytvorených pomocou CSS

    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á.