15 Efek Teks Cantik Dibuat dengan CSS
Teks atau tipografi yang indah akan membuat desain Anda terlihat menarik. Dalam desain web, CSS membantu memberi gaya pada desain termasuk berbagai efek pada teks atau tipografi. Dengan CSS, Anda dapat menggunakan kliping dan menambahkan animasi ke teks untuk sedikit mempercantik.
Dan untuk mengilustrasikan ini, kami telah mengumpulkan 15 efek teks yang menakjubkan dan keren yang dimungkinkan dengan CSS (beberapa dengan sedikit bantuan dari kode Javascript).
Untuk lebih banyak hal yang dapat Anda lakukan dengan CSS, periksa:
- 18 hal keren yang Anda tidak percaya dibangun menggunakan CSS
- 30 pustaka efek teks jQuery yang perlu Anda ketahui
- Cara membuat bentuk hati dengan CSS
- Animate.css - Pustaka CSS3 untuk membuat animasi dengan mudah
Animasi stroke elastis
Yoksel menganimasikan goresan teks dengan skema warna yang keren. Efek ini dibuat dengan CSS dan SVG. Hasilnya luar biasa!
SVG Glitch
Ingin membuat efek yang terlihat seperti TV analog yang rusak? Dirk Weber membuat efek kesalahan yang menakjubkan ini menggunakan filter CSS dan SVG.
Logo Shop Talk
Logo Shop Talk dibuat ulang oleh Hugo hanya menggunakan CSS. Logo terlihat mirip dengan aslinya, lengkap dengan tekstur yang tepat.
Efek memangkas
Gagasan Robet Messerle ini memberikan efek irisan pisau, dilakukan dengan kurang dari 70 baris CSS.
Efek Bayangan Elegan
Efek Long Shadow datang ke teks, dibuat menggunakan CSS. Pembuatnya, Juan Brujo membuat 4 efek lain tetapi ini mudah yang paling mengesankan.
Efek teks berkabut
Andreas menciptakan efek berkabut sinematik yang mengagumkan. Hanya berlaku di browser Webkit.
Topeng teks SVG
Sebuah desain oleh Marco Barria menunjukkan efek masking teks yang elegan pada gambar latar belakang yang besar.
Animasi Teks
Yoann membuat efek ticker yang luar biasa dengan animasi teks ini. Perhatikan bagaimana kata kedua berganti-ganti antara tiga kata.
Hit The Floor
Efek 3D oleh ThatGuySam ini adalah permainan sederhana pada bayangan teks, tetapi dengan hasil yang luar biasa.
Teks Klip Latar Belakang
Jintos bermain-main dengan klip latar Webkit untuk menambahkan gambar latar belakang di dalam teks. Dia membuat 16 kreasi keren menggunakan metode ini.
CSS Text-FX
Moklik menambahkan efek cahaya redup ke teks, memberikan Anda kedipan berselang yang memperingatkan bahaya dari jauh.
Penandatanganan tanda tangan animasi
Gary Hepting membuat animasi penandatanganan waktu-nyata. Ini berfungsi dengan menerapkan Javascript ke jalur SVG untuk menghidupkan tanda tangan.
Colourful Glitchy 404
Bisakah Anda mendengar suara kesalahan ini dan merasakan getaran di dalam kepala Anda? Itulah seberapa bagus efek kesalahan ini. mistic100 dibuat dengan CSS plus sedikit Javascript.
Kosmos
Sekarang ini adalah logo yang elegan dan inspiratif. Ini juga cocok untuk digunakan “Kosmos”, karena mengorbit, dapatkan?
Pemuatan
Efek pemuatan keren yang hanya menyembunyikan dan menampilkan huruf.
