Laman » Pengekodan » 15 Kesan Teks Cantik Dicipta dengan CSS

    15 Kesan Teks Cantik Dicipta dengan CSS

    Teks cantik atau tipografi akan menjadikan reka bentuk anda kelihatan menarik. Dalam reka bentuk web, CSS membantu memberikan gaya kepada reka bentuk termasuk pelbagai kesan dalam teks atau tipografi. Dengan CSS, anda boleh menggunakan kliping dan menambah animasi ke teks untuk membuat perkara rempah sedikit.

    Dan untuk menggambarkan ini, kami telah mengumpul 15 kesan teks yang menakjubkan dan sejuk yang dimungkinkan dengan CSS (beberapa dengan sedikit bantuan daripada kod Javascript).

    Untuk lebih banyak perkara yang boleh anda lakukan dengan CSS, lihat:

    • 18 perkara keren yang anda tidak akan percaya dibina menggunakan CSS
    • 30 jQuery kesan teks perpustakaan yang perlu anda ketahui
    • Bagaimana untuk mewujudkan bentuk hati dengan CSS
    • Animate.css - perpustakaan CSS3 untuk membuat animasi dengan mudah

    Animasi strok elastik

    Yoksel menghidupkan strok teks dengan skema warna yang sejuk. Kesan ini dibuat dengan CSS dan SVG. Hasilnya mengagumkan!

    SVG Glitch

    Ingin membuat kesan yang kelihatan seperti TV analog yang pecah? Dirk Weber membuat kesan glitch yang menakjubkan ini menggunakan penapis CSS dan SVG.

    Logo kedai bercakap

    Logo Kedai Bicara dicipta oleh Hugo hanya menggunakan CSS. Logo kelihatan sama dengan yang asli, lengkap dengan tekstur yang betul.

    Kesan lancip

    Idea ini oleh Robet Messerle memberikan kesan pisau yang dihiris, dilakukan dengan kurang daripada 70 baris CSS.

    Kesan Bayangan Elegant

    Kesan Panjang Shadow datang kepada teks, dibuat menggunakan CSS. Pencipta, Juan Brujo membuat 4 kesan lain tetapi ini adalah yang paling mengesankan.

    Kesan teks berkabut

    Andreas mencipta kesan berkilat sinematik yang luar biasa. Terpakai pada penyemak imbas Webkit sahaja.

    Topeng teks SVG

    Reka bentuk oleh Marco Barria menunjukkan kesan penutupan teks yang elegan pada imej latar belakang yang besar.

    Animasi Teks

    Yoann mencipta kesan ticker hebat dengan animasi teks ini. Tonton bagaimana perkataan kedua bergantian antara tiga perkataan.

    Jatuh ke lantai

    Kesan 3D ini oleh ThatGuySam adalah permainan yang mudah di bayang-bayang teks, tetapi dengan hasil yang luar biasa.

    Teks Klip Latar Belakang

    Jintos sedang bermain-main dengan klip latar belakang Webkit untuk menambah imej latar belakang di dalam teks. Dia membuat 16 ciptaan sejuk menggunakan kaedah ini.

    CSS Text-FX

    Moklik menambah kesan cahaya yang redup kepada teks, memberikan anda kilauan sekejap yang memberi amaran bahaya dari jauh.

    Tandatangan tanda tangan animasi

    Gary Hepting mencipta animasi menandatangani masa nyata. Ini berfungsi dengan menerapkan Javascript ke laluan SVG untuk menghidupkan penandatanganan.

    Glitchy berwarna-warni 404

    Bolehkah anda mendengar bunyi gangguan ini dan merasakan getaran, di dalam kepala anda? Begitu baiknya kesan glitch ini. mistic100 dibuat dengan CSS ditambah sedikit Javascript.

    Cosmos

    Sekarang ini adalah logo elegan dan inspirasi. Ia juga sesuai digunakan untuk “Cosmos”, kerana orbit, dapatkannya?

    Memuatkan

    Kesan memuatkan sejuk yang hanya bersembunyi dan memaparkan huruf.