Pagrindinis » Kodavimas » 15 Gražus teksto efektas sukurtas su CSS

    15 Gražus teksto efektas sukurtas su CSS

    Gražus tekstas ar tipografija padarys jūsų dizainą patrauklų. Web dizainas CSS padeda kurti stilių, įskaitant įvairius teksto ar tipografijos efektus. Naudodami CSS, galite naudoti iškirpimą ir pridėti animaciją prie teksto, kad šiek tiek prieskonių.

    Ir tai iliustruojame 15 nuostabių ir vėsių teksto efektų, kuriuos galima atlikti su CSS (kai kurie su nedideliu „JavaScript“ kodų pagalba).

    Daugiau dalykų, kuriuos galite padaryti su CSS, patikrinkite:

    • 18 vėsių dalykų, kurių netikite, buvo pastatyti naudojant CSS
    • 30 jQuery teksto efektų bibliotekos, kurias reikia žinoti
    • Kaip sukurti širdies formą su CSS
    • Animate.css - CSS3 biblioteka, kuria galima lengvai kurti animaciją

    Elastinė insulto animacija

    Yoksel sušvelnina teksto smūgį vėsioje spalvų schemoje. Šis efektas daromas su CSS ir SVG. Rezultatas yra nuostabus!

    SVG Glitch

    Norite padaryti efektus, kurie atrodo kaip pažeistas analoginis televizorius? Dirk Weber padarė šį apsvaiginimo efektą naudojant CSS ir SVG filtrą.

    „Shop Talk“ logotipas

    „Shop Talk“ logotipą „Hugo“ atkuria naudojant tik CSS. Logotipas panašus į originalą, su tinkama tekstūra.

    Slashed Effect

    Ši „Robet Messerle“ idėja suteikia peiliu pjaustytą efektą, padarytą mažiau nei 70 CSS linijų.

    Elegantiškas šešėlių efektas

    „Long Shadow“ efektas atsiranda teksto, sukurto naudojant CSS. Kūrėjas Juanas Brujo padarė 4 kitus efektus, tačiau tai yra lengvai įspūdingiausias.

    Rūkas teksto efektas

    Andreas sukuria nuostabų kinematinį rūko efektą. Taikoma tik „Webkit“ naršyklėse.

    SVG teksto kaukė

    „Marco Barria“ dizainas rodo elegantišką teksto maskavimo efektą dideliam fono vaizdui.

    Teksto animacija

    Su šia teksto animacija Yoann sukūrė nuostabų atspalvį. Stebėkite, kaip antrasis žodis keičiasi tarp trijų žodžių.

    Paspauskite grindis

    Šis 3D efektas, kurį daro „ThisGuySam“, yra paprastas teksto šešėliai, bet su nuostabiu rezultatu.

    Fono klipo tekstas

    Jintos grojo aplink Webkit fono klipą, kad pridėtų teksto vidinį foną. Naudodamas šį metodą jis sukūrė 16 atvėsti kūrinių.

    CSS teksto FX

    Moklik pridėjo teksto šviesos efektą, suteikdamas jums pertrūkius, kurie perspėja apie pavojų iš tolo.

    Animuotas parašo pasirašymas

    Gary Hepting sukūrė realiu laiku pasirašytą animaciją. Tai veikia naudojant „JavaScript“ SVG keliui, kad būtų galima animuoti pasirašymą.

    Spalvinga Glitchy 404

    Ar galite išgirsti šio trikdymo garsą ir pajusti vibraciją, galvos viduje? Štai kaip gerai šis glitch efektas. mistic100 pagamintas su CSS ir šiek tiek Javascript.

    Kosmosas

    Dabar tai elegantiškas ir įkvepiantis logotipas. Jis taip pat tinka naudoti “Kosmosas”, nes orbitos, gauti?

    Įkeliama

    Šaltas pakrovimo efektas, kuris yra tiesiog laiškų slepimas ir rodymas.