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.
