15 CSS-tel létrehozott gyönyörű szöveghatások

A szép szöveg vagy tipográfia vonzóvá teszi a designját. A webes tervezésben a CSS segít a stílus kialakításában, beleértve a szöveges vagy tipográfiai különböző hatásokat. A CSS használatával a vágás és az animáció hozzáadható a szöveghez, hogy kicsit megpróbálja a dolgokat.

És ennek illusztrálására összegyűjtöttük 15 lenyűgöző és hűvös szöveghatások, amelyek lehetővé teszik a CSS használatát (néhány kis segítség a Javascript kódokból).

Ha többet szeretne megtudni a CSS-lel, nézze meg:

• 18 hűvös dolog, amit nem hiszek a CSS használatával
• 30 jQuery szöveghatáskönyvtárak, amiket tudnia kell
• Hogyan készítsünk szívformát a CSS segítségével
• Animate.css - CSS3 könyvtár az animáció könnyen létrehozásához

Elasztikus stroke animáció

A Yoksel hűvös színsémával animálja a szöveg ütését. Ez a hatás a CSS és az SVG-vel történik. Az eredmény félelmetes!

SVG Glitch

Szeretne olyan effekteket hozni, amelyek egy törött analóg TV-nek tűnnek? Dirk Weber a CSS és az SVG szűrő használatával ezt a lenyűgöző csillogást eredményezte.

Shop Talk logó

A Shop Talk logót a Hugo csak a CSS segítségével hozza létre. A logó az eredetihez hasonlít, a megfelelő textúra.

Slashed Effect

Ez a Robet Messerle ötlete a kés szeletelt hatását adja, kevesebb mint 70 sor CSS-vel.

Elegáns árnyékhatás

A hosszú árnyék hatás a CSS használatával jön létre. Juan Brujo, az alkotó 4 további hatást tett, de ez a leginkább lenyűgöző.

Ködös szöveghatás

Andreas fantasztikus filmszerű ködös hatást hoz létre. Csak Webkit böngészőkben alkalmazható.

SVG szövegmaszk

A Marco Barria designja elegáns szöveges maszkoló hatást mutat nagy háttérképre.

Szöveg animáció

Ezzel a szöveges animációval a Yoann félelmetes ticker-effektust hozott létre. Nézze meg, hogy a második szó felváltja a három szót.

Hit a padlóra

Ez a 3D-s effektus ezGuySam segítségével egyszerű szöveges árnyékok, de félelmetes eredmény.

Háttér klipszöveg

A Jintos Webkit háttér klipszel játszott, hogy a szövegben háttérképet adjon. Ezzel a módszerrel 16 hűvös alkotást készített.

CSS szöveg-FX

A Moklik hozzáadta a fényes fényhatást a szöveghez, így időnként villog, ami távolról figyelmezteti a veszélyt.

Az aláírás animált aláírása

Gary Hepting valós idejű aláíró animációt hozott létre. Ez úgy működik, hogy a Javascript-et az SVG elérési útjára használja az aláírás animálásához.

Színes Glitchy 404

Hallhatod-e ennek a zavarnak a hangját, és érezheted a rezgést a fejedben? Ez az, hogy ez milyen jó hatással van. mistic100 készült CSS és egy kis Javascript.

Világegyetem

Most ez egy elegáns és inspiráló logó. Alkalmas a használatra “Világegyetem”, mert kering, keresse meg?

Betöltés

Hűvös terhelési hatás, ami egyszerűen a betűk elrejtése és megjelenítése.