15 Skaisti teksta efekti, kas izveidoti ar CSS
Skaists teksts vai tipogrāfija padarīs jūsu dizainu pievilcīgu. Tīmekļa dizainā CSS palīdz veidot stilu, tostarp dažādus teksta vai tipogrāfijas efektus. Izmantojot CSS, varat izmantot izgriešanu un pievienot animāciju tekstam, lai mazliet uzkrātu lietas.
Un, lai to ilustrētu, mēs esam savākuši 15 apdullināšanas un atdzist teksta efekti, kas ir iespējami ar CSS (daži ar nelielu palīdzību no Javascript kodiem).
Lai iegūtu vairāk informācijas, ko varat darīt ar CSS, izbraukšana:
- 18 atdzist lietas, kas netiks uzskatītas par CSS
- 30 jQuery teksta efektu bibliotēkas jums jāzina
- Kā izveidot sirds formu ar CSS
- Animate.css - CSS3 bibliotēka, lai viegli izveidotu animāciju
Elastīga insulta animācija
Yoksel atdzīvina teksta triecienu ar vēsu krāsu shēmu. Šis efekts tiek veikts ar CSS un SVG. Rezultāts ir awesome!
SVG Glitch
Vēlaties veikt efektus, kas izskatās kā šķelts analogais TV? Dirk Weber veica šo apdullināšanas efektu, izmantojot CSS un SVG filtru.
Veikala sarunu logotips
Veikals Talk logo tiek atjaunots, izmantojot Hugo, izmantojot tikai CSS. Logotips ir līdzīgs oriģinālam, ar pareizu tekstūru.
Slashed Effect
Šī Robet Messerle ideja dod nazi sagrieztu efektu, kas izdarīts ar mazāk nekā 70 rindām CSS.
Elegants ēnu efekts
Long Shadow efekts nonāk tekstā, izmantojot CSS. Radītājs Juan Brujo veica 4 citas sekas, taču tas ir viegli iespaidīgs.
Miglains teksts
Andreas rada fantastisku kinematogrāfisku miglas efektu. Piemēro tikai Webkit pārlūkprogrammās.
SVG teksta maska
Marco Barria dizains parāda elegantu teksta maskēšanas efektu uz liela fona attēla.
Teksta animācija
Ar šo teksta animāciju Yoann radīja fantastisku svārstību efektu. Skatieties, kā otrais vārds mainās starp trim vārdiem.
Atsisties pret grīdu
Šis 3D efekts, ko rada tasGuySam, ir vienkārša spēle uz teksta ēnām, bet ar lielisku rezultātu.
Fona klipa teksts
Jintos spēlēja ar Webkit fona klipu, lai tekstā pievienotu fona attēlu. Viņš, izmantojot šo metodi, veica 16 atdzistus darbus.
CSS teksta-FX
Moklik pievienoja tekstam gaišus gaismas efektus, sniedzot jums neregulāru mirgošanu, kas brīdina par briesmām no tālienes.
Animēta paraksta parakstīšana
Gary Hepting radīja reāllaika parakstīšanas animāciju. Tas darbojas, lietojot Javascript SVG ceļam, lai aktivizētu parakstu.
Krāsains Glitchy 404
Vai jūs varat dzirdēt šīs glitch skaņas un sajust vibrāciju galvas iekšpusē? Tas ir labs šis glitch efekts. mistic100 izgatavots ar CSS un mazliet Javascript.
Cosmos
Tagad tas ir elegants un iedvesmojošs logotips. Tas ir piemērots arī lietošanai “Cosmos”, jo orbītas, saņem to?
Notiek ielāde
Auksts iekraušanas efekts, kas ir vienkārši burtu slēpšana un attēlošana.