Menggarisbawahi dokumen atau teks selalu dianggap mudah. Tapi kalau kita perhatikan kasus website, apakah sudah mudah? Sebagian besar dari kita akan mengatakan ya tetapi membuat garis horizontal termasuk beberapa desain khusus membuat tugas sederhana ini melelahkan. Mari kita mulai Perjalanan Dekorasi Teks Menggunakan CSS dengan cara berikut:
- Apa itu Dekorasi Teks?
- Jenis Dekorasi Teks di CSS
- Dekorasi Teks Menggunakan CSS: Kode
- Lewati Dekorasi Teks
Apa itu Dekorasi Teks?
Ini mengatur tampilan garis dekoratif pada teks. Ini adalah properti singkatan untuk:
- teks-dekorasi-baris
- warna-dekorasi-teks
- gaya dekorasi teks
Ini ditentukan sebagai satu atau lebih nilai yang dipisahkan spasi yang mewakili te long-handproperti xt-dekorasi.
Sintaksis:
dekorasi-teks: || ||
Dimana,
teks-dekorasi-baris: Ini digunakan untuk mengatur jenis dekorasi yang digunakan sepertigaris bawah, garis atas, dan garis-tayang.
warna-dekorasi-teks:Ini digunakan untuk mengatur warna dekorasi.
gaya dekorasi teks: Ini digunakan untuk mengatur gaya garis sepertipadat, bergelombang, putus-putus, putus-putus, ganda
Jenis Dekorasi Teks di CSS
- Overline:
#decoration {text-decoration: overline} 
- Line-Through:
#decoration {text-decoration: line-through}- Menggarisbawahi:
#decoration {text-decoration: underline}- Kombinasi:
#decoration {text-decoration: underline line-through overline}Keluaran:
ide java terbaik untuk ubuntu
Dekorasi Teks Menggunakan CSS: Kode
Kode:
Kode CSS:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}Keluaran:
Lewati Dekorasi Teks
Properti yang dikenal sebagai text-decoration-skip juga dapat digunakan di mana teks overline, line-through, dan underline. Ini membantu dalam mendekorasi teks. Ini hanya menentukan bagaimana overline dan underline digambar ketika melewati ascenders dan descenders.
#decoration {text-decoration-skip: ink}Nilai yang dapat digunakan dengan lompatan dekorasi teks adalah:
benda : (default) garis melompati objek sebaris, seperti gambar atau elemen blok sebaris.
tidak ada : garis melintasi segalanya.
spasi : garis dekorasi melompati spasi, karakter pemisah kata, dan spasi apa pun yang diatur dengan spasi huruf atau spasi kata.
tinta : dekorasi garis melompati mesin terbang, keturunan atau naik.
tepi : garis dekorasi dimulai sedikit setelah tepi awal konten dan berakhir sedikit sebelum tepi akhir konten.
dekorasi kotak : garis dekorasi melompati margin yang diwariskan, batas, dan bantalan.
Karena properti ini tidak didukung oleh browser apa pun, namun belum ada demo, tetapi berikut adalah contoh pada gambar di bawah tentang bagaimana setiap nilai dapat terlihat setelah text-decoration-skip diterapkan.
Dengan ini, kita sampai pada akhir blog Dekorasi Teks Menggunakan CSS ini. Jika Anda memiliki pertanyaan tentang topik ini, silakan tinggalkan komentar di bawah dan kami akan menghubungi Anda kembali.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini termasuk pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog 'Dekorasi Teks menggunakan CSS' dan kami akan menghubungi Anda kembali.