Berapa panjang pemasangan blok bayangan. Bayangan Batin di CSS
Keterangan
Menambahkan bayangan ke elemen. Dimungkinkan untuk menggunakan beberapa bayangan, yang menunjukkan parameternya dipisahkan dengan koma; saat menerapkan bayangan, bayangan pertama dalam daftar akan lebih tinggi, yang terakhir lebih rendah. Jika radius pembulatan ditentukan untuk suatu elemen melalui properti border-radius, maka bayangan juga akan memiliki sudut membulat. Menambahkan bayangan akan menambah lebar elemen, sehingga bilah gulir horizontal mungkin muncul di browser.
Sintaksis
bayangan kotak: tidak ada |<тень> [,<тень>]*
Di mana<тень>:
sisipan<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Nilai-nilai
none Membatalkan penambahan bayangan.inset Bayangan digambar di dalam elemen. Parameter opsional.
x offset Offset horizontal bayangan relatif terhadap elemen. Nilai positif dari parameter ini menggeser bayangan ke kanan, nilai negatif menggesernya ke kiri. Parameter yang diperlukan.
regangan Nilai positif meregangkan bayangan, nilai negatif, sebaliknya, memampatkannya. Jika parameter ini tidak ditentukan, defaultnya adalah 0, yang akan menyebabkan ukuran bayangan sama dengan elemen.
color Warna bayangan dalam format CSS apa pun yang tersedia, bayangan defaultnya adalah hitam. Parameter opsional.
Dimungkinkan untuk menentukan beberapa bayangan, memisahkan parameternya dengan koma. Urutan berikut diperhitungkan: bayangan pertama dalam daftar ditempatkan di bagian paling atas, bayangan terakhir dalam daftar berada di bagian paling bawah.
HTML5 CSS3 YAITU Cr Op Sa Fx
bayangan kotak
Akankah jeruk hidup di semak-semak di selatan? Ya, tapi salinan palsu!
Hasil dari contoh ditunjukkan pada Gambar. 1.
Di sini: offX - offset bayangan horizontal; offY — offset bayangan vertikal; warna - warna bayangan.
Menerapkan filter dropshadow menghasilkan bayangan yang jelas dan tajam, sehingga Anda dapat menggunakan filter bayangan untuk efek blur.
Filter: progid:DXImageTransform.Microsoft.shadow(arah=120, warna=#000000, kekuatan=10);
Di sini: arah — sudut arah bayangan dari 0 hingga 360°; warna — warna bayangan; kekuatan — offset bayangan dalam piksel.
Bayangan di CSS dapat diimplementasikan dengan cukup cepat dan mudah, baik itu bayangan kotak maupun bayangan teks. Namun apakah semudah itu menerapkan inner shadow? Bisakah Anda membuat bayangan kotak sisipan? Dan bagaimana dengan tugas yang sama saat menggunakan teks?
Hari ini kami ingin memberi tahu Anda tentang cara yang sangat sederhana untuk mengimplementasikan inner shadow, yang hanya melibatkan beberapa baris kode. Kami akan memberi tahu Anda tentang bayangan blok dan teks, dan bagaimana Anda dapat mengubahnya untuk membuat bayangan sisipan.
Apakah Anda menyukai artikel ini? Jangan lupa berlangganan kami.
Sintaks bayangan
Sebelum kita membahas bayangan yang disematkan, mari kita lihat sintaks dasar untuk membuat dua jenis bayangan CSS yang berbeda. Sekalipun Anda pernah melakukan ini sebelumnya, yuk segarkan saja ingatan Anda.
bayangan kotak
Bayangan kotak atau box-shadows mungkin merupakan salah satu bayangan paling populer di CSS. Potensi implementasi di sini sangat bervariasi, dan pengembang sering kali menggunakan pendekatan dan aplikasi mereka sendiri. Sintaks bayangan kotak secara keseluruhan cukup kompleks, dan melibatkan 6 nilai terpisah. Kita akan mulai dengan melihat 5 contoh penerapan yang paling umum.
Seperti yang Anda lihat, daftar di atas adalah daftar nilai offset horizontal, offset vertikal, radius blur, tingkat penyebaran bayangan, dan warna. Dua nilai pertama - offset horizontal dan vertikal - sangat jelas. Nilai positif masing-masing akan menggerakkan bayangan ke kanan dan bawah, sedangkan nilai negatif akan menggerakkan bayangan ke kiri dan atas. Mari kita lihat contoh kedua makna tersebut:
Dua nilai terakhir, yang bertanggung jawab atas radius blur dan radius penyebaran, sedikit lebih rumit. Anda mungkin bertanya-tanya, apa bedanya? Untuk menjawabnya, pertama-tama mari kita lihat salah satu yang mungkin sudah Anda kenal: radius blur.
Seperti yang Anda lihat, jika kita tidak menggunakan radius blur, kita akan dapat membuat bayangan dengan tepi yang tajam, namun nilai yang besar akan menghasilkan tepi yang sangat buram. Sederhana saja, bukan? Lalu bagaimana dengan parameter radius propagasi? Apa bedanya di sini? Sebuah gambar akan menjelaskan situasinya lebih baik daripada seribu kata:
Seperti yang Anda lihat, radius penyebaran memungkinkan kita menambah atau mengurangi area bayangan tanpa mempengaruhi tingkat keburamannya. Jika kami menganggap parameter ini sebagai ukuran bayangan, maka Anda tidak salah.
Jika Anda tidak menggunakan blur dan spread, nilai default ini akan tetap 0. Jika Anda melakukan sedikit riset tentang contoh online, Anda akan melihat bahwa sebagian besar file demo tidak menggunakan opsi spread. Perhatikan juga bahwa versi box-shadow biasanya ditambahkan dengan awalan –webkit untuk menghindari masalah lintas browser.
bayangan teks
Sekarang kita tahu persis apa fungsi bayangan kotak dan apa itu, saatnya beralih ke mempelajari sintaks untuk jenis bayangan CSS lainnya: bayangan teks. Untungnya, sintaksis di sini jauh lebih sederhana dibandingkan dengan bayangan kotak.
Seperti yang Anda lihat, sebagian besar artinya sama, jadi jika Anda memahami yang satu, Anda akan memahami yang lain. Meski menariknya di sini Anda tidak akan bisa mengubah radius bayangan. Akan sangat bagus jika kita mempunyai kesempatan ini, tapi kesempatan itu tidak ada di sini.
Bayangan blok tertanam
Sekarang kita telah membahas dasar-dasarnya dan Anda sekarang memahami sintaks bayangan CSS. Saatnya mempelajari cara membuat bayangan bagian dalam dan sisipan. Untuk mengubah bayangan menjadi inset, kita hanya perlu menambahkan kata inset.
Itu sebabnya kami memulai dengan sintaks sederhana. Secara keseluruhan, cuplikan kode box-shadow mungkin sedikit membingungkan, tetapi setelah Anda memahaminya, ini akan tampak sederhana.
Di sini semua nilai pada dasarnya bekerja dengan cara yang sama, hanya bayangan yang ditempatkan di dalam blok. Dalam gambar ini kita dapat melihat seberapa besar pengaruh radius penyebaran bayangan terhadap tampilan bayangan:
Perhatikan bahwa kali ini kita menggunakan warna RGBa dan bukan nilai HEX. Ini bagus untuk bayangan karena nilai opacity membuatnya cepat dan mudah untuk menggelapkan atau mencerahkan bayangan.
Gambar
Cukup mudah untuk menerapkan bayangan kotak ke elemen div yang kosong, tetapi bagaimana jika Anda ingin memberikan bayangan pada gambar? Kedengarannya sederhana, namun sebenarnya cukup rumit. Mari kita lihat kodenya dan lihat hasil yang dihasilkannya. Mari kita mulai dengan tag img biasa.
Sekarang kita akan menentukannya di CSS kita dan menambahkan box-shadow. Anda mungkin berpikir hal seperti ini akan berhasil:
Gambar (
bayangan kotak: sisipkan 0px 0px 10px rgba(0,0,0,0.5);
}
Sayangnya, ini akan membawa kita pada hasil selanjutnya. Gambarnya akan berfungsi, tetapi bayangannya tidak akan terlihat!
Jadi bagaimana kita menerapkan bayangan dalam pada gambar? Ada beberapa metode implementasi, dan semuanya memiliki kelebihan dan kekurangannya masing-masing. Mari kita lihat dua pendekatan yang paling populer.
Solusi pertama adalah dengan membungkus gambar dalam div yang ukurannya sama dengan gambar, lalu memberikan bayangan pada div tersebut, juga menerapkan pemosisian relatif dan indeks-z pada gambar. Kode kita akan terlihat seperti ini:
div(
tinggi: 200 piksel;
lebar: 400 piksel;
}
gambar(
tinggi: 200 piksel;
lebar: 400 piksel;
posisi: relatif;
indeks-z: -2;
}
Pendekatan ini berhasil, tetapi memerlukan kode tambahan, dan CSS tambahan yang cukup banyak. Alternatifnya, Anda dapat menggunakan gambar HTML dan menyisipkan gambar latar belakang menggunakan CSS. Dengan menggunakan pendekatan ini, Anda dapat memastikan bahwa gambar tidak akan menutupi bayangan, dan akan ditempatkan di bawahnya secara default.
div(
tinggi: 200 piksel;
lebar: 400 piksel;
latar belakang: url(http://lorempixum.com/400/200/transport/2);
bayangan kotak: sisipkan 0px 0px 10px rgba(0,0,0,0.9);
}
Jika kita menggabungkan teknik ini dengan propagasi yang cukup kuat, kita dapat mencapai vignetting gambar yang cukup kuat hanya dengan menggunakan CSS.
Bayangan teks tertanam
Meskipun penerapan bayangan blok tertanam rumit, penerapannya cukup sederhana untuk dipahami. Masukkan kata inset dan bayangan Anda akan menjadi internal. Sederhana saja.
Sayangnya, segalanya menjadi lebih rumit dengan bayangan teks. Nilai sisipan tidak kompatibel dengan bayangan teks, jadi tidak ada yang berfungsi di sini:
Sebaliknya, kita perlu menggabungkannya sedikit. Penerapannya tidak biasa, jadi kami akan membagi pekerjaan menjadi dua tahap untuk lebih memahami apa yang terjadi di sini. Pertama, kita perlu memasukkan judul h1 dan menerapkan gaya berikut:
H1 (
warna latar belakang: #565656;
warna: transparan;
}
Dan sekarang kita berada dalam situasi yang aneh. Kami mengatur warna latar belakang menjadi gelap, bayangan teks menjadi putih, dan warna isian menjadi transparan. Jika ini terasa aneh bagi Anda, lihat hasilnya:
Ini sama sekali bukan yang kami butuhkan. Hal yang menarik adalah kita kembali ke awal. Bahan rahasia yang membuat semuanya berfungsi adalah parameter klip latar belakang yang disetel ke teks.
H1 (
warna latar belakang: #565656;
warna: transparan;
bayangan teks: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-latar belakang-klip: teks;
-moz-background-clip: teks;
klip latar belakang: teks;
}
Dengan mengatur parameter background-clip ke teks, kita dapat secara efektif mengekspresikan segala sesuatu yang terjadi di latar belakang (gambar, gradasi, warna, dll.) di sepanjang kerangka teks. Jika kita melakukannya dengan menggunakan kode yang telah kita buat, hasilnya adalah sebagai berikut:
Seperti yang Anda lihat, kami mendapat efek yang cukup bagus. Tepi yang kabur telah terpotong dan sekarang memberikan tampilan bayangan yang tertanam. Sementara itu, text-shadow memberi kita kemampuan untuk mengatur tingkat kecerahan latar belakang, dan juga menciptakan sedikit efek menonjol di bagian luar teks. Jika kita mengubah nilai bayangan dari 0,5 menjadi 0,3, teks akan menjadi lebih gelap.
Dukungan peramban
Jika Anda ingin menggunakan pendekatan dengan parameter aneh yang berbeda seperti klip latar belakang, maka Anda perlu mengetahui di mana pendekatan tersebut akan berhasil dan di mana tidak. Seperti biasa, jika menyangkut dukungan browser, kami beralih ke .
Berdasarkan tabel ini, parameter background-clip berfungsi cukup baik di sebagian besar browser. Bahkan IE9 mendukungnya! Anda mungkin mengalami masalah dengan beberapa browser yang ketinggalan jaman.
Kesimpulan
Sekarang Anda tahu apa yang harus Anda ketahui tentang sisipkan bayangan di CSS. Ini adalah area yang sangat menarik untuk dijelajahi. Semua pendekatan kemungkinan besar tidak bersifat intuitif dan memerlukan waktu untuk dikuasai. Beri tahu kami pendapat Anda tentang solusi yang diusulkan dan solusi mana yang Anda gunakan?
Properti CSS box-shadow menambahkan satu atau lebih bayangan ke sebuah elemen. Untuk menentukan beberapa bayangan, Anda harus menambahkan nilai bayangan tambahan, dipisahkan dengan koma.
Dukungan peramban
| Milik | Opera | Saya Penjelajah | Tepian |
|||
|---|---|---|---|---|---|---|
| bayangan kotak | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Sintaks CSS:
bayangan kotak: "tidak ada | sisipkan h-shadow v-shadow blur-radius penyebaran-radius warna | awal | pewarisan";Sintaks JavaScript:
Objek.style.boxShadow = "10px 5px 5px merah"
Nilai properti
| Arti | Keterangan |
|---|---|
| tidak ada | Bayangan tidak ditampilkan. Ini adalah nilai default. |
| sisipan | Nilai opsional. Jika nilai ini tidak ditentukan (default), bayangan akan berada di luar elemen dan akan menciptakan efek elemen menonjol. Jika kata kunci inset (nilai) ada, bayangan akan jatuh ke dalam elemen dan menciptakan efek lekukan. Dengan kata lain, ini adalah perubahan dari bayangan luar menjadi bayangan dalam. |
| h-bayangan | Nilai yang diperlukan. Mengatur lokasi bayangan horizontal. Nilai negatif diperbolehkan. |
| v-bayangan | Nilai yang diperlukan. Mengatur lokasi bayangan vertikal. Nilai negatif diperbolehkan. |
| radius buram | Nilai opsional. Mengatur radius buram. Semakin tinggi nilainya, semakin besar keburamannya, sehingga bayangannya semakin besar dan terang. Jika nilainya tidak ditentukan, nilainya akan menjadi 0 (tajam - bayangan berbeda). Nilai negatif tidak diperbolehkan. |
| radius penyebaran | Nilai opsional. Ukuran bayangan (radius regangan bayangan). Dengan nilai positif bayangan akan melebar, dan dengan nilai negatif akan mengecil. Jika tidak ada nilai yang ditentukan, nilainya akan menjadi 0 (bayangan sesuai dengan ukuran elemen). |
| warna | Nilai opsional. Menentukan warna bayangan (HEX, RGB, RGBA, HSL, HSLA, "Warna standar"). Nilai defaultnya adalah hitam. |
| Menyetel properti ke nilai defaultnya. | |
| Menunjukkan bahwa nilai tersebut diwarisi dari elemen induk. |
versi CSS
CSS3Diwarisi
TIDAK.Dapat dianimasikan
Ya.Contoh penggunaan
Dengan munculnya standar CSS3 memperkenalkan properti box-shadow, yang telah banyak digunakan di kalangan pengembang web, karena memudahkan untuk menambahkan satu atau lebih bayangan ke kotak elemen untuk memberikan efek visual yang diinginkan.
Pada artikel sebelumnya, kita melihat properti border-radius; dengan menggunakannya, Anda bisa mendapatkan bayangan dengan sudut membulat. Dengan analogi dengan bayangan teks (text-shadow), Anda dapat membuat banyak bayangan, yang diterapkan sesuai dengan itu sumbu z depan ke belakang (dengan bayangan pertama yang diberikan di atas).
Mari kita lihat lebih dekat sintaks properti modern ini:
Mari kita pertimbangkan secara berurutan kemungkinan nilai properti ini:
| Arti | Keterangan |
|---|---|
| tidak ada | Bayangan tidak ditampilkan. Ini adalah nilai default. |
| sisipan | Nilai opsional. Jika nilai ini tidak ditentukan (default), bayangan akan berada di luar elemen dan akan menciptakan efek elemen menonjol. Jika inset kata kunci (nilai) ada, bayangan akan jatuh ke dalam elemen dan menciptakan efek penyok. Dengan kata lain, ini adalah perubahan dari bayangan luar menjadi bayangan dalam. |
| h-bayangan | Nilai yang diperlukan. Mengatur lokasi bayangan horizontal. Nilai negatif diperbolehkan. |
| v-bayangan | Nilai yang diperlukan. Mengatur lokasi bayangan vertikal. Nilai negatif diperbolehkan. |
| radius buram | Nilai opsional. Mengatur radius buram. Semakin tinggi nilainya, semakin besar keburamannya, sehingga bayangannya semakin besar dan terang. Jika nilainya tidak ditentukan, nilainya akan menjadi 0 (tajam - bayangan berbeda). Nilai negatif tidak diperbolehkan. |
| radius penyebaran | Nilai opsional. Ukuran bayangan (radius regangan bayangan). Dengan nilai positif bayangan akan melebar, dan dengan nilai negatif akan mengecil. Jika tidak ada nilai yang ditentukan, nilainya akan menjadi 0 (bayangan sesuai dengan ukuran elemen). |
| warna | Nilai opsional. Menentukan warna bayangan (HEX, RGB, RGBA, HSL, HSLA, "Warna standar"). Nilai defaultnya adalah hitam. |
Poin utama yang perlu Anda pahami untuk membuat bayangan pada elemen adalah:
Saya ingin menarik perhatian Anda pada fakta bahwa properti box-shadow saat ini didukung oleh semua browser modern:
| Milik | Opera | Saya Penjelajah | Tepian |
|||
|---|---|---|---|---|---|---|
| bayangan kotak | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Jika Anda ingin memperluas dukungan untuk beberapa browser, termasuk seluler iOS 3.2 - 4.3 Dan Android 2.1 - 3, maka disarankan untuk menggunakan awalan pabrikan dan menggunakan sintaks berikut (dalam contoh di artikel, sintaks tersebut hanya akan digunakan untuk browser modern):
-webkit-box-shadow : nilai ; /* Safari 3.1 - 4, iOS 3.2 - 4.3 dan Android 2.1 - 3 */-moz-box-shadow : nilai; /* Firefox 3.5 - 3.6 */ box-shadow : nilai ; /* tabel di atas */Mari beralih ke latihan dan mulai dengan contoh sederhana di mana kita menambahkan satu bayangan ke elemen:
Hasil dari contoh kita:
Menggunakan Banyak Bayangan
Dalam contoh berikut, saya mengusulkan untuk mempertimbangkan efek pencampuran warna menarik yang dapat dicapai saat menggunakan banyak bayangan:
- Dua balok dengan lebar dan tinggi tetap (15em dan 10em), tambahkan bantalan di semua sisi (2em) dan atur balok menjadi garis balok agar dapat disejajarkan.
- Untuk Pertama blok dengan kelas .tes kami tunjukkan empat bayangan dengan nilai bayangan horizontal dan vertikal yang berbeda sehingga elemen tersebut memiliki bayangan yang berbeda di semua sisi. Radius blur untuk semua bayangan diatur sama. Warna setiap bayangan berbeda dan ditentukan menggunakan warna yang telah ditentukan sebelumnya.
- Untuk Kedua blok dengan kelas .test2 kami tunjukkan empat bayangan dengan nilai bayangan horizontal dan vertikal yang berbeda. Radius keburaman untuk semua bayangan disetel ke sama, sedangkan bentangan bayangan disetel ke negatif, yang menyebabkan penurunan pada bayangan itu sendiri. Warna setiap bayangan berbeda-beda dan ditentukan menggunakan sistem RGBA.
Hasil dari contoh kita:
Menggunakan bayangan untuk gambar
Contoh terakhir artikel ini akan fokus pada penggunaan bayangan untuk gambar. Saya ingin segera menarik perhatian Anda pada fakta bahwa Anda dapat langsung menentukan bayangan untuk elemen HTML Ini tidak akan berhasil, tetapi kita memiliki kesempatan untuk menentukan gambar sebagai latar belakang untuk elemen yang kita minati, dan kemudian menetapkan bayangan yang kita perlukan untuk elemen ini.
Kami akan melihat bekerja dengan gambar latar belakang secara rinci di artikel buku teks "", dan sekarang, untuk mengakhiri studi tentang penggunaan bayangan, kami akan menyentuhnya secara dangkal dan menggunakan gambar sebagai latar belakang untuk elemen berikut ini contoh:
- Dua blok dengan lebar dan tinggi tetap (237px dan 232px), menambahkan margin untuk semua sisi (2em) dan mengatur blok menjadi garis blok agar dapat menyejajarkannya. Kami mengatur ukuran blok 237px kali 232px ke ukuran gambar sehingga pada tahap pelatihan ini kami tidak perlu menskalakan gambar agar sesuai dengan elemen dan memengaruhi properti CSS yang direncanakan untuk dipelajari pada tahap selanjutnya. (dalam artikel buku teks " ").
- Untuk Pertama blok dengan kelas .tes Kami menentukan nilai nol untuk bayangan horizontal dan vertikal, tetapi pada saat yang sama kami menentukan radius blur sebesar 50px dan memperluasnya dengan mengatur radius regangan sebesar 10px. Warna bayangan ditunjukkan dengan warna yang telah ditentukan (ungu). Selain itu, kami menentukan kata kunci inset dalam deklarasi, yang menyebabkan bayangan jatuh ke dalam elemen. Dengan kata lain, kita telah membuat bayangan bagian dalam dari elemen tersebut.
- Untuk Kedua blok dengan kelas .test2 Kami menentukan nilai nol untuk bayangan horizontal dan vertikal, tetapi pada saat yang sama kami menentukan radius blur sebesar 50px dan memperluasnya dengan mengatur radius regangan sebesar 10px. Warna bayangan ditentukan dalam mode RGBA.
Hasil dari contoh kita:
Beras. 98 Contoh penggunaan bayangan untuk gambar di CSS (properti box-shadow)
Pertanyaan dan tugas tentang topik tersebut
Sebelum melanjutkan ke topik berikutnya, selesaikan tugas latihan:
Jika Anda mengalami kesulitan dalam menyelesaikan tugas latihan, Anda selalu dapat membuka contoh di jendela terpisah dan memeriksa halaman untuk memahami kode CSS yang digunakan.
2016-2019 Denis Bolshakov, Anda dapat mengirimkan komentar dan saran di situs ke [email protected]
Bayangan biasa mudah diterapkan menggunakan bayangan kotak atau bayangan teks. Namun bagaimana jika Anda perlu membuat bayangan internal? Artikel ini menjelaskan cara membuat bayangan ini hanya dengan beberapa baris kode.
Sintaksis
Pertama, mari kita lihat dua cara utama untuk mengimplementasikan bayangan di CSS.y offset Offset vertikal bayangan relatif terhadap elemen. Nilai positif menggeser bayangan ke bawah, nilai negatif menggeser bayangan ke atas. Parameter yang diperlukan.
Desain bayangan kotak mengandung beberapa arti berbeda:
Pergeseran horisontal Dan offset vertikal- perpindahan horizontal dan vertikal, masing-masing. Nilai-nilai ini menunjukkan ke arah mana objek akan melemparkan bayangannya:
Radius kabur Dan radius penyebaran sedikit lebih rumit. Apa bedanya? Mari kita lihat contoh dengan dua elemen, dimana nilainya radius kabur berbeda:
Tepi bayangannya kabur. Dengan nilai yang berbeda radius penyebaran kita melihat hal berikut:
Dalam hal ini, kita melihat bahwa bayangan tersebar di area yang luas. Jika Anda tidak menentukan nilai radius kabur Dan radius penyebaran, maka keduanya akan sama dengan 0.
bayangan teks
Sintaksnya sangat mirip dengan bayangan kotak:
Artinya serupa, tetapi tidak bayangan menyebar. Contoh penggunaan:
Sisipkan dalam bayangan kotak
Untuk "membalik" bayangan di dalam objek, Anda perlu menambahkan sisipan di CSS:
Setelah Anda memahami sintaks dasar box-shadow, sangat mudah untuk memahami cara mengimplementasikan inner shadow. Nilainya masih sama, Anda bisa menambahkan warna (RGB dalam hex):
Warnanya dalam format RGB, nilai alpha bertanggung jawab atas transparansi bayangan:
Gambar dengan bayangan
Menambahkan bayangan dalam pada gambar sedikit lebih sulit daripada menambahkan bayangan biasa div. Untuk memulainya, berikut adalah kode gambar yang biasa: 
Masuk akal untuk berasumsi bahwa Anda dapat menambahkan bayangan seperti ini:
Gambar ( bayangan kotak: sisipkan 0px 0px 10px rgba(0,0,0,0.5); )
Tapi bayangannya tidak terlihat:
Ada beberapa cara untuk mengatasi masalah ini, yang masing-masing memiliki kelebihan dan kekurangannya sendiri. Mari kita lihat dua di antaranya. Yang pertama adalah membungkus gambar secara teratur div:
Div ( tinggi: 200px; lebar: 400px; bayangan kotak: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( tinggi: 200px; lebar: 400px; posisi: relatif; indeks-z: -2 ;
Semuanya berfungsi, tetapi kita harus menambahkan sedikit markup HTML dan CSS tambahan. Cara kedua adalah dengan mengatur gambar sebagai background blok yang diinginkan:
Div ( tinggi: 200px; lebar: 400px; latar belakang: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )
Inilah yang bisa terjadi ketika menggunakan inner shadow:
Sisipkan ke bayangan teks
Untuk menerapkan bayangan teks bagian dalam, cukup tambahkan kode sisipan tidak berfungsi:
Untuk mengatasinya, terapkan terlebih dahulu pada header h1 Tetapkan latar belakang gelap dan bayangan terang:
H1 ( warna latar: #565656; warna: transparan; bayangan teks: 0px 2px 3px rgba(255,255,255,0.5); )
Inilah yang terjadi:
Menambahkan bahan rahasia klip latar belakang yang memotong apa pun yang melampaui teks (ke latar belakang gelap):
H1 ( warna latar: #565656; warna: transparan; bayangan teks: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: teks; -moz-background-clip: teks; klip latar belakang: teks ;
Ternyata hampir sesuai dengan apa yang kami butuhkan. Sekarang kita cukup menggelapkan teksnya sedikit (alpha), dan hasilnya adalah:
