CSS: Beberapa teknik untuk berbagai efek goresan pada elemen. Contoh penggunaan font bayangan teks CSS dengan bayangan di html
Tipografi adalah mainan favorit para desainer web. CSS memiliki satu alat yang sangat menarik dalam komposisinya - bayangan teks(bayangan teks), yang sekilas terlihat cukup sederhana, tetapi dapat digunakan untuk menciptakan efek yang mudah diingat jika Anda menggunakan kecerdikan dan imajinasi.
Dasar Bayangan
Properti bayangan teks sangat mudah digunakan. Itu didukung oleh semua browser modern dan bahkan tanpa menggunakan awalan. Tetapi tidak ada dukungan di IE (bahkan IE9). Anda dapat menggunakan alat seperti Modernizr untuk membantu mengeluarkan efek CSS3 bahkan di versi IE yang lebih lama.
Sintaksis
Sintaks properti digunakan untuk membuat bayangan teks bayangan teks, yang diberikan di bawah ini. Empat parameter perlu ditentukan: dua yang pertama mengatur posisi bayangan, yang ketiga mengatur tingkat keburaman, dan yang keempat menentukan warna bayangan.
Text-shadow: warna blur horizontal_offset vertical_offset;
Di bawah ini adalah contoh bayangan teks yang digeser dua piksel ke bawah dan empat piksel ke kanan, diburamkan tiga piksel, dan hitam pada opasitas 30%.
Bayangan teks: 2px 4px 3px rgba(0,0,0,0.3);
Hasil dari menggunakan properti ini akan terlihat seperti ini:
Mengapa rgba digunakan?
Anda tidak harus menggunakan rgba untuk menyetel warna bayangan saat menentukan properti. Namun, rgba menambahkan dimensi lain pada definisi bayangan - tingkat transparansi.
Metode ini jauh lebih sederhana daripada metode penentuan warna lainnya. Anda tidak harus fokus untuk menentukan bayangan warna bayangan, yang bisa sedikit lebih gelap atau lebih terang dari warna latar belakang. Dengan rgba Anda cukup menggunakan warna putih atau hitam dan meningkatkan opasitasnya untuk mencapai rona latar belakang yang diinginkan saat mencampur warna.
Menggunakan properti bayangan teks Anda dapat membuat berbagai efek untuk teks, tidak terbatas pada bayangan sederhana. Sebagai contoh, berikut adalah kode untuk membuat ilusi teks indentasi.
Pertama, Anda perlu mengatur warna teks sedikit lebih gelap dari warna latar belakang. Dan kemudian Anda perlu menggunakan properti bayangan teks dengan warna putih dan peningkatan transparansi.
Warna latar belakang #222 dan warna teks memiliki opasitas 60%. Bayangan putih diposisikan sedikit ke bawah dan ke kanan dengan opacity 10%.
Body ( background: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )
Tidak perlu memburamkan bayangan sama sekali. Bayangan yang jelas bisa cocok dengan desain situs.
Bayangan teks: 6px 6px 0px rgba(0,0,0,0.2);
Kegembiraan yang sebenarnya dimulai saat Anda membuang batasan hanya memiliki satu bayangan. Dengan menggunakan koma untuk memisahkan definisi, Anda dapat menggunakan bayangan sebanyak yang Anda suka!
Teks-bayangan: bayangan1, bayangan2, bayangan3;
Berikut adalah contoh menggunakan dua bayangan. Yang pertama memiliki warna yang sama dengan latar belakang.
Bayangan teks: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Bergerak turun jarak jauh
Setelah Anda menguasai penggunaan banyak bayangan, hasilnya akan menjadi semakin ekspresif. Sangat mudah untuk membuat efek 3D untuk teks.
Contohnya menggunakan empat bayangan, semuanya bergeser ke bawah pada jarak yang berbeda dan buram.
Bayangan teks: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
Pergeseran ke bawah jarak kecil dan blur yang kuat
Ini adalah implementasi lain dari ide yang sama. Ketiga bayangan dipindahkan ke jarak yang lebih kecil dan lebih buram.
Bayangan teks: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Teks 3D oleh Mark Dotto
Efeknya digunakan di MarkDotto.com. Ini menggunakan 12 bayangan berbeda untuk menciptakan efek 3D yang hebat.
Bayangan teks: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Teks timbul oleh Gordon Hall
Perhatikan pada contoh di atas saya menyebut teknik saya efek letterpress "cepat dan kotor". Itu karena ada cara yang jauh lebih rumit untuk membuat beberapa teks sisipan serius yang jauh lebih dapat dipercaya.
Gordon menggunakan beberapa voodoo CSS yang serius untuk menarik tidak hanya bayangan luar tetapi juga bayangan dalam yang asli. Lihat posting blognya untuk penjelasan lengkap tentang teknik ini.
background-color: #666666; -webkit-background-clip: teks; -moz-background-clip:text; klip-latar belakang: teks; warna: transparan teks-bayangan: rgba(255,255,255,0.5) 0px 3px 3px;
binar
Teks-bayangan: 0px 0px 6px rgba(255,255,255,0.7);
Teks-bayangan: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Beberapa sumber cahaya
Bayangan teks: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0,05), -10px 20px 5px rgba(0,0,0,0,05);
Warna: rgba(0,0,0,0,6); teks-bayangan: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0,3);
Kesimpulan
Seperti kebanyakan efek CSS, bayangan sangat mudah diimplementasikan. Tetapi kombinasi tindakan sederhana dapat menghasilkan efek yang luar biasa.
Vlad Merzhevich
Pada suatu waktu, ada mode tertentu untuk teks dengan bayangan, dan efek serupa dapat ditemukan di hampir semua situs. Dalam editor grafis, bayangan ditambahkan dengan sederhana, terlihat bagus, berikut adalah teks dengan bayangan dan didorong ke halaman web terlepas dari gaya situs dan rasa proporsi perancangnya. Ketika sebagian besar browser mulai mendukung properti gaya teks-bayangan, mode tersebut telah berlalu dan sekarang teks dengan bayangan cukup langka. Namun, text-shadow memiliki sejumlah kegunaan implisit lain yang hanya diketahui sedikit orang. Dengan properti ini, Anda dapat membuat teks garis besar, "memeras", membuat cahaya, kabur, dan banyak lagi.
Menggunakan teks-bayangan
Empat parameter ditulis sebagai nilai: warna bayangan, offset horizontal dan vertikal, dan radius keburaman bayangan (Gbr. 1).
Beras. 1. Opsi bayangan teks
Warna dapat ditulis di awal atau di akhir semua parameter dalam format CSS apa pun yang sesuai. Jadi Anda bisa membuat bayangan semi transparan melalui format rgba. Nilai offset positif "melemparkan" bayangan ke kanan dan ke bawah, dan nilai negatif, masing-masing, ke kiri dan ke atas. Agar bayangan berada di sekitar teks, cukup mengatur nilai offset ke nol. Radius buram mengatur seberapa tajam bayangannya. Semakin besar radius blur, semakin halus bayangannya.
Keuntungan besar dari bayangan teks adalah kemampuan untuk menambahkan beberapa bayangan berbeda sekaligus, mencantumkan parameternya yang dipisahkan dengan koma. Fitur ini, pada dasarnya, memungkinkan Anda melakukan efek yang berbeda.
Sayangnya, IE sebelum versi 10.0 tidak mendukung text-shadow , jadi kami tidak akan melihat hal-hal menarik di browser ini.
Garis besar teks dicirikan oleh fakta bahwa setiap huruf dikelilingi oleh garis yang warnanya berbeda dengan warna teks (Gbr. 2). Efek ini terlihat paling baik dengan font sans-serif besar, seperti judul. Untuk teks isi, menggunakan kerangka hanya memperburuk keterbacaan.
Beras. 2. Garis besar teks
Garis besar dapat dibuat dengan dua cara. Pada metode pertama, kami menetapkan offset bayangan ke nol dan radius buram kecil, secara harfiah 1-2 piksel (contoh 1). Menaikkan nilai buram mengubah garis luar menjadi cahaya di sekitar teks, yang merupakan efek berbeda.
Contoh 1: Outline teks
Garis besar teks
Kontur yang dibuat dengan metode ini ditunjukkan pada Gambar. 1. Konturnya agak buram, jadi bagi yang ingin mendapatkan garis yang jelas, cara kedua dimaksudkan. Ini terdiri dari penggunaan empat bayangan tajam dengan warna yang sama, mereka digeser ke sudut yang berbeda dengan satu piksel (contoh 2).
Contoh 2: Empat bayangan untuk garis besar
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Garis besar teks
Tampilan kontur seperti itu ditunjukkan pada Gambar. 3. Terlihat bahwa konturnya lebih ekspresif.
Beras. 3. Kontur dengan empat bayangan
Untuk menambahkan efek teks 3D yang ditunjukkan pada gambar. 4, beberapa bayangan diterapkan secara bersamaan, yang digeser relatif satu sama lain dengan satu piksel secara horizontal dan vertikal.
Beras. 4. teks 3D
Secara pribadi, jenis teks ini mengingatkan saya pada huruf bergaya retro dan, sekali lagi, paling cocok untuk judul, dan bukan untuk teks isi halaman web.
Jumlah bayangan bergantung pada seberapa banyak Anda ingin "mendorong" teks ke depan. Angka yang lebih besar meningkatkan "kedalaman" huruf, angka yang lebih kecil, sebaliknya, menurunkan tiga dimensi. Contoh 3 menggunakan lima bayangan dengan warna yang sama.
Contoh 3: Bayangan untuk menambahkan 3D
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Kulkas sepuluh ruang
Untuk semua bayangan, atur blur radius ke nol dan warna yang sama. Bayangan hanya berbeda dalam nilai offset.
Teks timbul
Untuk membuat efek emboss teks atau dengan kata lain relief, warna teks harus sesuai dengan warna latar belakang. Satu bagian dari huruf yang “menonjol” di atas permukaan seolah-olah diterangi, sedangkan bagian lainnya dalam bayangan (Gbr. 5).
Beras. 5. Teks timbul
Untuk menambahkan efek yang serupa, kita memerlukan dua bayangan - kita menggeser bayangan putih ke kiri sebanyak satu piksel, dan bayangan abu-abu gelap ke bawah ke kanan (contoh 4).
Contoh 4 Teks Timbul
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Teks timbul
Relief terlihat paling baik dengan latar belakang abu-abu, jadi efeknya tidak cocok untuk setiap skema warna situs. Omong-omong, lebih mudah untuk membuat indentasi daripada teks yang diekstrusi, cukup tukar warna bayangannya.
Teks-bayangan: #333 -1px -1px 0, #fff 1px 1px 0;
binar
Cahaya di sekitar teks adalah bayangan yang sama, hanya cerah dan kontras. Jadi, untuk menciptakan efek cahaya, cukup mengubah warna bayangan dan mengatur radius buram yang diinginkan. Karena cahaya di sekitar teks harus seragam, offset bayangan harus disetel ke nol. Pada ara. 6 menunjukkan contoh pancaran warna yang berbeda.
Beras. 6. Teks bercahaya
Contoh 5 Cahaya
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Sisi terang
Sisi gelap
Mengaburkan
Bayangan itu sendiri buram, jadi jika Anda hanya menyisakan bayangan dan menyembunyikan teks itu sendiri, maka kita akan mendapatkan huruf buram (Gbr. 7), dan tingkat keburaman dapat dengan mudah disesuaikan melalui parameter text-shadow.
Beras. 7. Teks dengan buram
Untuk menyembunyikan teks asli, cukup atur warnanya menjadi transparan (contoh 6). Warna bayangan kemudian menjadi warna teks, dan radius keburaman mengatur derajat ketidaktajaman huruf.
Contoh 6 Teks Buram
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Hapus teks
Shadow dan Pseudo-Class
Bayangan tidak harus ditambahkan langsung ke teks, properti text-shadow cocok dengan :hover dan :first-letter pseudo-classes. Karena itu, efek menarik diperoleh dengan teks, seperti garis besar huruf pertama paragraf atau cahaya tautan saat Anda mengarahkan kursor mouse ke atasnya. Contoh 7 menunjukkan teknik tersebut.
Contoh 7: Menggunakan Pseudo-Classes
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Proyek khusus memperlambat saluran tradisional, terlepas dari biayanya. Struktur pasar, membuang detailnya, menstabilkan departemen pemasaran dan penjualan, menggunakan pengalaman kampanye sebelumnya. Membangun merek tentu secara spontan menyingkirkan PR konvergen, merebut kembali segmen pasar. Investasi menyinkronkan peran status sosial, meningkatkan persaingan. Merek secara alami menentukan rencana penempatan menggunakan pengalaman dari kampanye sebelumnya.
Tipografi adalah mainan favorit saya dalam hal desain web. Tetap saja, dengan bantuannya Anda dapat menarik perhatian seseorang, hanya dengan sedikit mengubah gaya atau ukuran font. Sangat sederhana dan sangat efektif, banyak buku telah ditulis tentang topik ini dan banyak salinan telah rusak dalam perselisihan. Hari ini saya tidak akan memberikan saran tentang tipografi secara umum - saya tidak memiliki kualifikasi yang cukup, tetapi cara menata teks situs Anda selalu diterima. Jadi hari ini saya akan menunjukkan beberapa cara untuk menggunakan properti CSS3 bayangan teks, sangat sederhana, tetapi di tangan yang terampil dapat menghasilkan keajaiban.
Sintaks bayangan teks dasar
Properti ini CSS3 berfungsi di semua browser terbaru, tanpa awalan vendor seperti -moz dan -webkit. Bahkan IE dapat diajarkan untuk memahami properti ini, Anda perlu menggunakan Modernizr atau analog.
teks-bayangan: warna kabur x-offset y-offset;
Itu semua sintaks dasar. Nilai pertama adalah horizontal offset, nilai kedua adalah vertical offset, shadow blur, dan shadow color. Pertimbangkan sebuah contoh:
Bayangan teks: 2px 4px 3px rgba(0,0,0,0.3);
Memindahkan bayangan, memburamkannya sebesar 3px dan mengatur warnanya menjadi hitam dengan opacity 30%. Mengapa saya menggunakan saluran alfa atau transparansi? Ini memberi lebih banyak kebebasan dalam tindakan, Anda dapat membuatnya sedikit lebih terang atau lebih gelap hanya dengan mengubah nilai transparansi, tanpa mengalami pencocokan warna. Ternyata cukup cepat, saya sarankan.
Huruf timbul
tubuh ( latar belakang: #222; ) #teks h1 ( warna: rgba(0,0,0,0.6); teks-bayangan: 2px 2px 3px rgba(255,255,255,0.1); )
Prinsip operasi di sini adalah ini - latar belakangnya sedikit lebih terang dari pada huruf, bayangan terang dengan sedikit transparansi. Hasilnya ada di gambar, coba deh.
bayangan keras
teks-bayangan: 6px 6px 0px rgba(0,0,0,0.2);
Sekarang gaya retro sedang dalam mode, dan bayangan tanpa blur digunakan di sana. Yah kami siap untuk itu
bayangan ganda
teks-bayangan: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Dan di sini fitur rumit lain dari properti digunakan bayangan teks, penyeleksi dapat dicantumkan dipisahkan dengan koma, sehingga menciptakan bayangan sebanyak yang diperlukan. Bayangan pertama bisa diberi warna seperti background, kemudian akan ada efek seperti pada gambar.
Turun dan menjauh
teks-bayangan: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
Teksnya tebal dan menggantung di latar belakang, bukan? 4 bayangan digunakan di sini dengan tingkat kekaburan dan lokasi yang berbeda. Secara umum, semakin banyak bayangan yang digunakan, semakin realistis efeknya, pertimbangkan ini dalam proyek Anda.
Teks 3D kecil
teks-bayangan: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Mirip dengan contoh sebelumnya, tiga bayangan, tetapi lebih dekat, karenanya efek tiga dimensi dan bobot teks.
Teks 3D oleh Mark Dotto
teks-bayangan: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Saya menemukan karya desainer ini di internet dan tidak dapat melewatinya. Realisme yang mengesankan.
Teks timbul oleh Gordon Hall
background-color: #666666; -webkit-background-clip:text; -moz-background-clip:teks; klip-latar belakang: teks; warna: transparan teks-bayangan: rgba(255,255,255,0.5) 0px 3px 3px;
Contoh lain dari pekerjaan properti yang mengesankan bayangan teks. Tapi prinsipnya sama seperti yang saya katakan di atas. Latar belakang sedikit lebih terang, bayangan terang di bawah huruf dan gelap di atas. Dibuat sederhana, tapi sangat keren.
Teks yang bersinar
teks-bayangan: 0px 0px 6px rgba(255,255,255,0.7);
Di sini juga, semuanya sederhana - kami tidak menggeser bayangan, memburamkannya lebih keras dan membuatnya putih. Itu semua yang bersinar.
Gaya retro
teks-bayangan: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Saya berbicara di atas tentang gaya retro, ini dari opera yang sama. Sekarang sangat modis, banyak bayangan yang jelas. Terapkan sesuai kebijaksanaan Anda
Beberapa sumber cahaya
teks-bayangan: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Ada efek dari berbagai sumber cahaya yang memberikan bayangan ke segala arah.
Teks yang diangkat
warna: rgba(0,0,0,0,6); teks-bayangan: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0,3);
Teks yang menjorok tadi sudah ada, sekarang dimunculkan. Efek yang cukup sederhana, tetapi terlihat sangat bagus di header, misalnya. Gunakan, coba
Sebagai kesimpulan, saya ingin mengatakan - Properti bayangan teks CSS3 sangat sederhana, seperti yang Anda lihat. Tetapi penerapannya yang kompeten, dan bahkan dengan sedikit imajinasi, dapat menghasilkan keajaiban.
Eksperimen, semoga harimu menyenangkan
Modul berisi fitur CSS yang berkaitan dengan dekorasi teks, seperti garis bawah, bayangan teks, dan aksen pada teks Asia Timur.
Properti untuk dekorasi teks
1. Dekorasi garis: garis bawah, coretan dan coretan
Garis bawah, coretan, dan coretan ditampilkan hanya untuk blok level baris yang tidak diganti (tampilan: sebaris) dan muncul di seluruh teks, termasuk spasi di antara karakter dan kata, kecuali untuk lekukan di awal dan akhir baris.
Peramban dapat memecah garis bawah dan coretan di mana garis berpotongan dengan mesin terbang, menampilkan jarak tertentu di kedua sisi garis luar mesin terbang. Saat browser memecah garis bawah atau coretan pada batas mesin terbang, bentuk garis pada batas tersebut harus sesuai dengan bentuk mesin terbang. Namun, spesifikasi tidak menentukan metode khusus untuk "mengikuti bentuk" mesin terbang, menyerahkannya ke browser.
Beras. 1. Mematahkan garis bawah 1.1. Tampilan garis dekorasi: properti garis dekorasi teks
Dukungan Peramban
YAITU: —
tepian: —
Firefox: 36, 35 -moz-
Chrome: 57
safari: 12.1, 7.1 -webkit-
opera: 44
Safari iOS: 8 -webkit-
Peramban UC untuk Android: 11.8
Chrome untuk Android: 73
Internet Samsung: 7.2
Properti text-decoration-line menentukan jenis garis apa, jika ada, yang ditambahkan ke elemen.
Harta itu tidak diwariskan.
Sintaksis
Teks-dekorasi-baris: tidak ada; teks-dekorasi-garis: garis bawah; teks-dekorasi-garis: overline; teks-dekorasi-garis: baris-melalui; teks-dekorasi-baris: berkedip; teks-dekorasi-garis: garis bawah garis bawah; text-decoration-line: overline underline line-through; teks-dekorasi-baris: mewarisi; teks-dekorasi-baris: awal;
1.2. Gaya garis dekorasi: properti gaya dekorasi teks
Dukungan Peramban
YAITU: —
tepian: —
Firefox: 36, 35 -moz-
Chrome: 57
safari: 12.1, 7.1 -webkit-
opera: 44
Safari iOS: 8 -webkit-
Peramban UC untuk Android: 11.8
Chrome untuk Android: 73
Internet Samsung: 7.2
Properti text-decoration-style menentukan gaya garis yang digambar untuk menghias teks yang ditentukan dalam elemen. Nilai memiliki arti yang sama dengan properti gaya perbatasan.
Harta itu tidak diwariskan.
Sintaksis
Text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; teks-dekorasi-gaya: putus-putus; teks-dekorasi-gaya: bergelombang; teks-dekorasi-gaya: mewarisi; text-decoration-style: initial;
1.3. Warna garis dekorasi: properti teks-dekorasi-warna
Dukungan Peramban
YAITU: —
tepian: —
Firefox: 36, 35 -moz-
Chrome: 57
safari: 12.1, 7.1 -webkit-
opera: 44
Safari iOS: 8 -webkit-
Peramban UC untuk Android: 11.8
Chrome untuk Android: 73
Internet Samsung: 7.2
Properti text-decoration-color menentukan warna garis dekorasi teks yang ditetapkan untuk elemen dengan text-decoration-line .
Harta itu tidak diwariskan.
Sintaksis
Teks-dekorasi-warna: warna saat ini; teks-dekorasi-warna: salmon; teks-dekorasi-warna: #00ff00; teks-dekorasi-warna: rgba(255, 128, 128, 0.5); teks-dekorasi-warna: transparan; teks-dekorasi-warna: mewarisi; teks-dekorasi-warna: awal;
1.4. Singkatan untuk properti garis dekorasi: properti dekorasi teks
Dukungan Peramban
YAITU: —
tepian: —
Firefox: 36, 35 -moz-
Chrome: 57
safari: 12.1, 7.1 -webkit-
opera: 44
Safari iOS: 8 -webkit-
Peramban UC untuk Android: 11.8
Chrome untuk Android: 73
Internet Samsung: 7.2
Properti text-decoration adalah singkatan dari properti text-decoration-line text-decoration-style text-decoration-color dalam satu deklarasi. Nilai yang hilang diatur ke nilai awalnya. Dekorasi teks default: tidak ada solid saat iniWarna; . Harta itu tidak diwariskan. Namun, gaya semua baris dekorasi teks harus sama untuk satu elemen.
1.5. Posisi garis dekorasi: properti text-underline-position
Dukungan Peramban
YAITU: —
tepian: 12
Firefox: —
Chrome: 71
safari: —
opera: —
Safari iOS: —
Peramban UC untuk Android: ?
Chrome untuk Android: 71
Internet Samsung: —
Properti text-underline-position menetapkan posisi garis bawah yang ditentukan dalam elemen.
Properti itu diwariskan.
| Nilai: | |
| mobil | Browser dapat menggunakan algoritme apa pun untuk menentukan posisi garis bawah, namun garis harus ditempatkan pada atau di bawah garis dasar teks. Nilai default. |
| di bawah | Garis bawah ditempatkan di bawah konten teks elemen. Dalam hal ini, garis bawah biasanya tidak melewati descender. Nilai ini dapat digabungkan dengan kiri atau kanan jika sisi tertentu lebih disukai dalam mode tipografi vertikal. |
| kiri | Dalam mode tipografi vertikal, garis bawah disejajarkan dengan tepi kiri teks. Namun, nilai ini ditafsirkan sebagai di bawah . |
| Kanan | Dalam mode tipografi vertikal, garis bawah disejajarkan dengan tepi kanan teks. Namun, nilai ini ditafsirkan sebagai di bawah . |
| mewarisi | |
| awal | |
Sintaksis
Text-underline-position: auto; teks-garis bawah-posisi: di bawah; teks-garis bawah-posisi: kiri; teks-garis bawah-posisi: kanan; text-underline-position: di bawah kiri; teks-garis bawah-posisi: kanan; teks-garis bawah-posisi: mewarisi; teks-garis bawah-posisi: awal; 
Beras. 2. Garis bawahi teks di kedua sisi dalam mode tipografi vertikal dengan nilai kiri dan kanan
2. Teks bayangan: properti teks-bayangan
Dukungan Peramban
YAITU: 10
tepian: 12
Firefox: 3.5
Chrome: 4
safari: 4
opera: 10
Safari iOS: 3.2
Peramban UC untuk Android: 11.8
Chrome untuk Android: 73
Internet Samsung: 4
Properti text-shadow digunakan untuk menambahkan bayangan pada teks. Bayangan teks adalah alat menarik yang memungkinkan Anda membuat efek luar biasa. Bayangan bisa berlapis tunggal atau berlapis-lapis, buram, berwarna atau tembus cahaya. Saat menentukan bayangan untuk suatu elemen, Anda hanya dapat menentukan satu nilai panjang dan warna, sehingga membuat salinan berwarna dari satu karakter atau kata. Selain itu, menggunakan bayangan dapat membuat teks lebih mudah dibaca jika kontras antara warna teks dan latar belakang kecil.
Setiap bayangan diterapkan baik pada teks itu sendiri maupun pada elemen dekorasinya (properti dekorasi teks). Anda dapat menyetel beberapa bayangan sekaligus, dengan menentukannya dipisahkan dengan koma. Bayangan saling tumpang tindih, tetapi jangan tumpang tindih dengan teks itu sendiri. Bayangan pertama selalu ditempatkan di atas sisa bayangan. Properti itu diwariskan.
Setiap bayangan ditentukan oleh dua atau tiga panjang dan warna opsional. Panjang yang valid adalah 0 .
Harta itu tidak diwariskan.
Beras. 3. Sintaks properti text-shadow | bayangan teks | |
|---|---|
| Nilai: | |
| x-offset | Mengatur offset horizontal bayangan. Nilai positif menggambar offset bayangan di sebelah kanan teks, panjang negatif menggambar bayangan di sebelah kiri. |
| y-offset | Mengatur offset vertikal bayangan. Nilai positif menggerakkan bayangan ke bawah, nilai negatif menaikkannya. |
| mengaburkan | Mengatur radius buram. Nilai negatif tidak diperbolehkan. Jika nilai buramnya nol, maka tepi bayangannya tajam. Jika tidak, semakin besar nilainya, semakin buram tepi bayangannya. |
| warna | Mengatur bayangan. Jika tidak ada warna, warna yang digunakan diambil dari properti color. |
| tidak ada | Nilai default berarti tidak ada bayangan teks. Menghapus bayangan elemen dari grup elemen dengan properti yang diberikan. |
| awal | Menetapkan nilai properti ke nilai defaultnya. |
| mewarisi | Mewarisi nilai properti dari elemen induk. |
Tidak seperti box-shadow , text-shadow tidak terpotong dan dapat ditampilkan jika teks sebagian transparan. Seperti box-shadow , text-shadow tidak memengaruhi tata letak dan tidak menyebabkan pengguliran atau area yang dapat digulir bertambah besar.
Sintaksis
Teks-bayangan: 2px 2px 4px merah muda; teks-bayangan: #fc0 1px 0 10px; teks-bayangan: 5px 5px #4D4644; teks-bayangan: biru 2px 5px teks-bayangan: 5px 10px teks-bayangan: mewarisi; teks-bayangan: awal;
2.1. Contoh bayangan teks
bayangan poster
Bayangan teks
Teks-bayangan-1 ( latar belakang: #77F7DE; warna: putih; teks-bayangan: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 putih, 5px 5px 0 putih, 6px 6px 0 putih; spasi huruf: 0,1em; )
bayangan 3D
Bayangan teks
Text-shadow-2 ( latar belakang: linear-gradient(-45deg, #FEE864, #F5965E); warna: #f4f4f4; text-shadow: -1px -1px putih, 1px 1px abu-abu, 2px 2px #7a7a7a, 3px 3px #757575 .0, .4), 18px 18px 10px rgba(0, 0, 0, .4); )
teks bayangan
Bayangan teks
Teks-bayangan-3 ( latar belakang: #FFE6DB; warna: #FFE6DB; spasi huruf: .1em; bayangan teks: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1); )
bayangan retro
Bayangan teks
Text-shadow-4 ( warna: #FB631E; spasi huruf: .1em; teks-bayangan: 4px 4px putih, 6px 6px #D7CC88; )
bayangan berlapis
Bayangan teks
Text-shadow-5 ( background: #f1f1f1; color: #fcc105; letter-spacing: .1em; text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )
Cara lain untuk merapikan halaman web adalah dengan membuat teks dengan bayangan di CSS. Dengan penerapan gaya ini yang tepat, Anda berhasil menyorot tajuk, paragraf, bagian dari teks. Anda dapat menyesuaikan warna bayangan, offset dan blurnya.
Anda dapat mengatur bayangan teks di CSS menggunakan properti text-shadow, yang didukung oleh semua browser kecuali Internet Explorer versi 9 dan sebelumnya. Ada juga masalah dengan Opera Mini - browser ini hanya mendukung sebagian properti. Berikut adalah contoh entri gaya dan nilai properti:
H1 ( teks-bayangan: 3px 5px 6px #6C9; )
Seperti yang Anda lihat, kami telah menentukan sebanyak empat nilai yang dipisahkan oleh spasi. Mari kita berurutan:
- 3px - nilai pertama bertanggung jawab atas offset bayangan sepanjang sumbu X (kanan, kiri). Nilai positif menggeser bayangan ke kanan, dan nilai negatif menggesernya ke kiri.
- 5px - nilai kedua bertanggung jawab atas perpindahan bayangan di sepanjang sumbu Y (turun, atas). Nilai positif menggerakkan bayangan ke bawah, dan nilai negatif memindahkannya ke atas.
- 6px - nilai ketiga bertanggung jawab atas radius bayangan kabur. Parameter ini opsional. Blur default adalah 0 piksel, yang membuat bayangan tajam dan tidak buram.
- #6c9 - nilai keempat bertanggung jawab atas warna bayangan. Parameter ini opsional. Secara default, warna bayangan diatur ke warna yang sama dengan teks yang menerapkan gaya.
Seperti apa bayangan di browser (tangkapan layar):
Tangkapan layar: teks dengan bayangan, CSS Beberapa bayangan CSS untuk teks
Juga diperbolehkan untuk menggunakan beberapa grup nilai untuk properti text-shadow. Ini berarti Anda dapat mengatur banyak bayangan untuk teks yang sama. Untuk melakukan ini, Anda perlu menulis grup nilai yang dipisahkan dengan koma.
H1 ( teks-bayangan: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )
Hasil penerapan gaya ini terlihat di tangkapan layar:
Tangkapan layar: beberapa bayangan teks CSS Dengan properti text-shadow CSS, Anda dapat membuat hal-hal yang sangat indah. Anda dapat bereksperimen: menyetel sejumlah besar bayangan berbeda, menyetel warna tidak hanya dalam bentuk heksadesimal, tetapi juga dalam format RGBA, menggunakan saluran alfa untuk menyesuaikan transparansi. Inilah yang bisa terjadi jika Anda cukup memperhatikan properti ini:
Tangkapan layar: Bayangan Teks 3D di CSS
