Mājas lapa » Kodēšana » 15 Skaisti teksta efekti, kas izveidoti ar CSS

    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.