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.