Desainer sering kali menggunakan beberapa efek font dan efek halaman yang unik, dan bayangan adalah salah satunya. Hal ini dapat membuat teks dan elemen pada halaman memiliki efek tiga dimensi dan menonjol. Misalnya, untuk bayangan teks, metode tradisional mungkin memerlukan pemotongan teks dan penggunaan gambar secara langsung. Jika SEO dan kinerja situs web dipertimbangkan, teknologi seperti CSS Sprite juga dapat digunakan untuk mengintegrasikan gambar:
h2{ latar belakang:url(sprite.png) tanpa pengulangan 0 0; ukuran font:0; indentasi teks:-9999em;...}
h2#title1{posisi latar belakang:0 -30px;}
h2#title2{posisi latar belakang:0 -60px;}
....
Ini adalah hal yang rumit, menyatukan gambar akan memakan banyak waktu, dan untuk mendapatkan efek visual yang lebih baik, Anda mungkin harus menggunakan gambar png 32-bit berkualitas tinggi, yang akan membuat Anda menghadapi png IE 6 sialan itu. masalah transparansi!
Faktanya, kita sepenuhnya dapat menggunakan CSS untuk mendapatkan efek bayangan teks!
Anda dapat melihat demonya terlebih dahulu.
Bayangan teks
text-shadow memungkinkan kita mencapai efek bayangan teks yang sempurna. Penulisan dasar:
text-shadow:[radius blur sumbu x warna y sumbu y],[radius blur sumbu y sumbu x warna]...
atau
text-shadow:[warna radius buram sumbu y sumbu x],[warna radius buram sumbu y sumbu x]...
Warna disini adalah warna bayangannya. Anda bisa menuliskan warnanya terlebih dahulu atau terakhir. Sumbu x dan sumbu y masing-masing merupakan posisi offset bayangannya, dan radius buram dapat dipahami sebagai panjang bayangan. Dan sebagian besar browser sekarang mendukung bayangan multi-layer. Anda dapat memisahkan beberapa grup pengaturan dengan koma (tentu saja Anda juga dapat menggunakan satu pengaturan saja).
Contoh:
h1{warna:#000; latar belakang:#333; font:tebal 24px/2 "Microsoft Yahei",Arial;
indentasi teks:2em;
bayangan-teks:hitam 2px 2px 2px }
Efeknya adalah sebagai berikut:
Atribut ini saat ini didukung oleh sebagian besar browser kecuali IE. Untuk IE, kita dapat menggunakan filter bayangan untuk mencapai hal ini:
filter: Bayangan(Warna='hitam', Arah='135', Kekuatan='2')
Anda mungkin telah memperhatikan bahwa menggunakan filter bayangan hanya dapat menentukan arah sudut, tetapi tidak dapat menentukan sumbu xy, dan sumbu z juga telah digantikan oleh kekuatan. Perhatikan bahwa saat menggunakan filter ini, Anda tidak dapat mengatur warna latar belakang , jika tidak, filter akan menjadi tidak valid! Selain itu, jika Anda tidak pandai matematika dan tidak memahami algoritma fungsi trigonometri, Anda dapat menggunakan filter lain dari IE: dropshadow:
filter: dropshadow(OffX=2, OffY=2, Warna='hitam', Positif='benar');
Ya, IE akan selalu menghambat kita, tetapi perlu disebutkan bahwa kedua filter IE ini mendukung bayangan multi-layer ! Misalnya, Anda dapat menulis:
filter: dropshadow(OffX=2, OffY=2, Warna='merah', Positif='benar')
dropshadow(OffX=2, OffY=2, Warna='kuning', Positif='benar')
dropshadow(OffX=2, OffY=2, Warna='biru', Positif='benar');
Untuk mempelajari lebih lanjut tentang dua filter untuk IE ini, lihat: Shadow dan Dropshadow
Mari kita lihat contoh bayangan berlapis-lapis (abaikan IE di sini):
h1{font:bold 32px/2 Verdana, Jenewa, sans-serif warna:#f39;
bayangan-teks:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
Efeknya seperti yang ditunjukkan pada gambar:
Di sini kami menggunakan warna rgba, yang merupakan metode mendeklarasikan warna dan transparansi secara bersamaan dalam CSS, dan merupakan atribut warna yang didukung oleh sebagian besar browser tingkat A ( kecuali IE ). dukungan browser》——Pada saat yang sama, kami merekomendasikan penggunaan metode penulisan sederhana ini untuk tembus warna solid.
Kompatibilitas browser untuk text-shadow
Saat ini text-shadow didukung oleh Firefox 3.5+, Safari 1.1+/chrome 2.0+ dan opera 9.5, tetapi tidak didukung oleh IE. Perlu dicatat bahwa hanya Safari 4.0 yang mendukung bayangan multi-layer.
Semua versi IE tidak mendukung text-shadow;
Opera 9.5+ mendukung hingga 6-9 lapisan bayangan dan menggunakan urutan rendering CSS2 (bayangan pertama yang ditentukan ada di bawah). Dan untuk alasan performa, radius blur dibatasi hingga 100 piksel;
Gecko (Firefox) secara teoritis mendukung lapisan bayangan teks yang tak terbatas (tetapi tidak disarankan untuk mencobanya) dan mengikuti urutan rendering CSS3 yang baru (bayangan yang ditentukan pertama kali ada di atas);
Safari 1.1-3.2 hanya mendukung satu lapisan text-shadow (hanya deklarasi sebelum koma pertama yang ditampilkan dan berikut ini diabaikan). Safari 4.0+ hanya mendukung bayangan multi-layer dan urutan rendering CSS3 baru;
bayangan kotak
Mari kita bicara tentang IE terlebih dahulu. IE tidak mendukung atribut box-shadow, namun dua filter yang disebutkan di atas dapat digunakan untuk mencapai efek bayangan. Artinya IE tidak membedakan antara bayangan teks dan bayangan kotak ! Hal ini menimbulkan beberapa masalah: teks di dalam elemen mewarisi pengaturan bayangan elemen. Namun jika Anda tidak menentukan latar belakang dan batas elemen, hanya bayangan teks yang akan muncul. Jika Anda hanya menentukan atribut latar belakang tanpa menentukan batas, hanya bayangan kotak yang akan muncul, dan teks tidak akan memiliki bayangan dan jika Anda hanya menentukan atribut perbatasan dan Jika latar belakang tidak ditentukan, bayangan kotak akan muncul, dan teks konten serta gambar juga akan memiliki bayangan. Siswa yang tertarik dapat mencobanya.
Oke, sekarang mari kita lupakan IE dan lihat box-shadow. Sebenarnya setelah memahami text-shadow, box-shadow mudah dipahami. Saat ini, hanya firefox dan safari/chrome yang mendukung atribut box-shadow melalui atribut private. Meskipun browser Opera saat ini tidak mendukung atribut ini, disebutkan dalam dokumentasinya bahwa versi mesin Presto 2.3 berikutnya (versi terbaru mesin Opera 10.10 adalah Presto 2.2.15) akan mendukung box-shadow, lalu Biarkan kami menunggu perlahan.
Sintaks box-shadow sama dengan text-shadow.
#kotakBayangan{
...
-webkit-box-shadow:2px 2px 2px hitam;
-moz-box-shadow:2px 2px 2px hitam;
...
}
Faktanya, box-shadow dan border-radius adalah mitra yang baik:
#boxShadow1{-moz-border-radius:10px;
-webkit-perbatasan-radius:10px;
radius batas:10px;
perbatasan:1px padat ddd;
-webkit-box-shadow:0 0 10px hitam;
-moz-box-shadow:0 0 10px hitam;
bantalan:10 piksel;}
Efeknya seperti yang ditunjukkan pada gambar:
Firefox baru mulai mendukung box-shadow di versi 3.5, dan rendering bayangan saat ini belum sempurna.
Meringkaskan
CSS shadow adalah fitur yang sangat berguna di CSS3. Kita sudah bisa menggunakan text-shadow di Firefox/webkit/Opera, dan box-shadow akan segera diimplementasikan di browser ini. Hanya IE yang unik dan masih bersikeras pada filter jeleknya. Ini benar-benar sebuah kegagalan.