rumah > File dan folder > Berapa panjang pemasangan blok bayangan. Bayangan batin di CSS. Geser ke bawah sedikit dan buramkan


Berapa panjang pemasangan blok bayangan. Bayangan batin di CSS. Geser ke bawah sedikit dan buramkan




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.

informasi singkat

Sintaksis

Bayangan kotak: tidak ada |<тень> [,<тень>]*

Di mana<тень>:

sisipan<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

Sebutan

KeteranganContoh
<тип> Menunjukkan jenis nilai.<размер>
A && BNilai harus dikeluarkan dalam urutan yang ditentukan.<размер> && <цвет>
SEBUAH | BMenunjukkan bahwa Anda hanya perlu memilih satu nilai dari nilai yang diusulkan (A atau B).biasa | topi kecil
Sebuah || BSetiap nilai dapat digunakan secara mandiri atau bersama-sama dengan nilai lainnya dalam urutan apa pun.lebar || menghitung
Nilai-nilai kelompok.[ potong || menyeberang ]
* Ulangi nol kali atau lebih.[,<время>]*
+ Ulangi satu kali atau lebih.<число>+
? Jenis, kata, atau grup yang ditentukan bersifat opsional.sisipan?
(A,B)Ulangi setidaknya A, tetapi tidak lebih dari B kali.<радиус>{1,4}
# Ulangi satu kali atau lebih dengan dipisahkan koma.<время>#
×

Nilai-nilai

none Membatalkan penambahan bayangan. inset Bayangan digambar di dalam elemen.<сдвиг по x>Pergeseran horizontal bayangan relatif terhadap elemen. Nilai positif dari parameter ini menyebabkan pergeseran bayangan ke kanan, nilai negatif ke kiri.<сдвиг по y>Pergeseran vertikal bayangan relatif terhadap elemen. Nilai positif menggeser bayangan ke bawah, nilai negatif menggeser bayangan ke atas.<размытие>Mengatur radius keburaman bayangan. Semakin tinggi nilai ini, semakin halus bayangannya, semakin lebar dan terang. Jika parameter ini tidak ditentukan, nilai defaultnya adalah 0, yang akan membuat bayangan menjadi tajam, bukan buram.<растяжение>Nilai positif akan meregangkan bayangan, nilai negatif sebaliknya akan memampatkannya. Jika parameter ini tidak ditentukan, defaultnya adalah 0, yang akan menyebabkan ukuran bayangan sama dengan elemen.<цвет>Warna bayangan dalam format CSS apa pun yang tersedia, bayangan defaultnya adalah hitam.

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.

Contoh

bayangan kotak

Akankah jeruk hidup di semak-semak di selatan? Ya, tapi salinan palsu!

Hasil contoh ditunjukkan pada Gambar. 1.

Beras. 1. Jenis bayangan

Model Objek

Sebuah Objek.style.boxShadow

Catatan

Safari sebelum versi 5.1, Chrome sebelum versi 10.0, Android sebelum versi 4.0 mendukung properti -webkit-box-shadow.

Firefox hingga versi 4.0 mendukung properti -moz-box-shadow.

Internet Explorer sebelum versi 9.0 tidak mendukung properti box-shadow; sebagai gantinya, Anda dapat menggunakan properti filter:

Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Di sini: offX - offset bayangan horizontal; offY — offset bayangan vertikal; warna - warna bayangan.

Penggunaan filter dropshadow menghasilkan bayangan yang jernih 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.

Spesifikasi

Setiap spesifikasi melewati beberapa tahap persetujuan.

  • Rekomendasi - Spesifikasi telah disetujui oleh W3C dan direkomendasikan sebagai standar.
  • Rekomendasi Kandidat ( Rekomendasi yang mungkin) - kelompok yang bertanggung jawab atas standar tersebut merasa yakin bahwa standar tersebut telah mencapai tujuannya, namun memerlukan bantuan dari komunitas pengembang untuk menerapkan standar tersebut.
  • Rekomendasi yang Diusulkan Rekomendasi yang Disarankan) - pada tahap ini dokumen diserahkan ke Dewan Penasihat W3C untuk persetujuan akhir.
  • Draf Kerja - Versi draf yang lebih matang yang telah dibahas dan diubah untuk ditinjau oleh komunitas.
  • Draf redaksi ( Draf editorial) - versi draf standar setelah perubahan dilakukan oleh editor proyek.
  • Draf ( Spesifikasi rancangan) - versi draf pertama dari standar.
×

Tipografi adalah mainan favorit para desainer web. CSS memiliki satu alat yang sangat menarik - bayangan teks(bayangan teks), yang sekilas terlihat cukup sederhana, namun dapat digunakan untuk menciptakan efek yang berkesan jika Anda menggunakan kecerdikan dan imajinasi.

Dasar Bayangan

Properti bayangan teks sangat mudah digunakan. Ini didukung oleh semua browser modern dan bahkan tanpa menggunakan awalan. Tapi tidak ada dukungan di IE (bahkan di IE9). Anda dapat menggunakan alat seperti Modernizr untuk membantu mengeluarkan efek CSS3 bahkan pada versi IE yang lebih lama.

Sintaksis

Untuk membuat bayangan teks, gunakan sintaks properti bayangan teks yang diberikan di bawah ini. Ada empat parameter yang harus ditentukan: dua parameter pertama mengatur posisi bayangan, parameter ketiga mengatur tingkat keburaman, dan parameter keempat menentukan warna bayangan.

Bayangan teks: warna buram horizontal_offset vertical_offset;

Di bawah ini adalah contoh bayangan teks yang diimbangi dua piksel ke bawah dan empat piksel ke kanan, diburamkan sebanyak tiga piksel, dan disetel menjadi hitam pada opacity 30%.

Bayangan teks: 2px 4px 3px rgba(0,0,0,0.3);

Hasil dari penggunaan properti ini akan terlihat seperti ini:

Mengapa RGBA digunakan?

Anda tidak harus menggunakan rgba untuk menentukan warna bayangan saat mendefinisikan properti. Namun, rgba menambahkan dimensi lain saat mendefinisikan bayangan – tingkat transparansi.

Cara ini jauh lebih sederhana dibandingkan metode penentuan warna lainnya. Anda tidak harus fokus dalam menentukan shade warna bayangan, yang mungkin hanya sedikit lebih gelap atau lebih terang dari warna latar belakang. Dengan RGBA, Anda cukup menggunakan warna putih atau hitam dan meningkatkan opacitynya untuk mendapatkan warna latar belakang yang diinginkan saat mencampurkan warna.

Menggunakan properti bayangan teks Anda dapat membuat berbagai efek untuk teks, tidak terbatas pada drop shadow sederhana. Misalnya, berikut adalah kode untuk menciptakan ilusi teks tertekan.

Pertama, Anda perlu mengatur warna teks sedikit lebih gelap dari warna latar belakang. Dan kemudian Anda perlu menggunakan properti itu bayangan teks dengan warna putih dan peningkatan transparansi.

Warna latar belakang adalah #222 dan warna teks diatur ke opacity 60%. Bayangan putih diposisikan agak ke bawah dan ke kanan dengan tingkat opacity 10%.

Badan ( latar belakang: #222; ) #teks h1 ( warna: rgba(0,0,0,0.6); bayangan teks: 2px 2px 3px rgba(255,255,255,0.1); )

Tidak perlu mengaburkan bayangan sama sekali. Bayangan yang jelas bisa cocok dengan desain situs web.

Bayangan teks: 6px 6px 0px rgba(0,0,0,0.2);

Kegembiraan sebenarnya dimulai ketika Anda membuang batasan hanya memiliki satu bayangan. Dengan menggunakan koma untuk memisahkan definisi, Anda dapat menggunakan bayangan sebanyak yang Anda perlukan!

Bayangan teks: bayangan1, bayangan2, bayangan3;

Berikut adalah contoh penggunaan 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);

Pergeseran ke bawah jarak jauh

Setelah Anda terbiasa menggunakan banyak bayangan, hasilnya akan menjadi semakin dramatis. Sangat mudah untuk membuat efek 3D untuk teks.

Contohnya menggunakan empat bayangan, semuanya digeser ke bawah pada jarak berbeda dan diburamkan.

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 );

Geser ke bawah sedikit dan buramkan

Inilah inkarnasi lain dari ide yang sama. Ketiga bayangan digeser pada jarak yang lebih kecil dan lebih kabur.

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 situs 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 menjorok ke dalam oleh Gordon Hall

Perhatikan pada contoh di atas saya menyebut teknik saya sebagai efek letterpress “cepat dan kotor”. Itu karena ada cara yang lebih rumit untuk membuat teks sisipan serius yang jauh lebih dapat dipercaya.

Gordon menggunakan beberapa voodoo CSS yang serius untuk menghasilkan tidak hanya bayangan luar tetapi juga bayangan dalam yang asli. Lihat postingan blognya untuk penjelasan lengkap tentang teknik ini.

Warna latar belakang: #666666; -webkit-latar belakang-klip: teks; -moz-background-clip: teks; klip latar belakang: teks; warna: transparan; bayangan teks: rgba(255,255,255,0.5) 0px 3px 3px;

Binar

Bayangan teks: 0px 0px 6px rgba(255,255,255,0.7);

Bayangan teks: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Berbagai 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); bayangan teks: 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 diterapkan. Namun kombinasi tindakan sederhana dapat menghasilkan efek yang luar biasa.

Bayangan di bawah elemen blok pada halaman biasanya digunakan untuk menciptakan efek tiga dimensi, untuk menarik perhatian ke elemen, atau sebagai bagian dari desain. Bayangan kecil di bawah elemen juga memberikan volume dan kedalaman halaman.

Untuk menambahkan bayangan, gunakan properti box-shadow, yang memiliki enam nilai, hanya dua yang diperlukan. Pada Gambar. Gambar 1 menunjukkan properti box-shadow dengan semua nilai yang mungkin, diberi nomor untuk mengidentifikasinya.

Beras. 1. Nilai properti bayangan kotak

  1. kata kunci inset menetapkan bayangan di dalam elemen;
  2. menggeser bayangan secara horizontal (5px - kanan, -5px - kiri);
  3. pergeseran vertikal (5px - bawah, -5px - atas);
  4. radius bayangan kabur (0 - bayangan tajam);
  5. peregangan bayangan (5px - regangkan, -5px - menyusut);
  6. warna bayangan.

Anda hanya perlu menentukan pergeseran horizontal dan vertikal; semua parameter lainnya akan diambil secara default. Dalam hal ini, bayangan akan tajam tanpa buram atau hitam.

Dengan menggabungkan berbagai parameter dan nilainya, Anda bisa mendapatkan berbagai jenis bayangan. Di meja 1 menunjukkan kode dan hasil yang dihasilkannya.

Meja 1. Kombinasi parameter bayangan
Kode Hasil Keterangan
bayangan kotak: 5px 5px; Bayangan tajam di kanan dan bawah.
bayangan kotak: -5px -5px; Bayangan tajam di kiri dan atas.
bayangan kotak: 0 0 5px; Bayangan kabur di sekitar elemen.
bayangan kotak: 0 0 5px 2px; Perluas bayangan sebesar 2 piksel.
bayangan kotak: 0 0 5px 2px merah; Cahaya merah di sekitar elemen.
bayangan kotak: 0,4em 0,4em 5px rgba(122,122,122,0.5); Bayangan tembus pandang.
bayangan kotak: sisipkan 0 0 6 piksel; Bayangan di dalam.

Seperti dapat dilihat dari tabel, pergeseran bayangan tidak harus ditentukan dalam piksel, meskipun hal ini nyaman. Warna bayangan dapat ditentukan dalam format apa pun yang tersedia; misalnya, untuk mendapatkan bayangan tembus pandang, format RGBA cocok; Contoh 1 menunjukkan cara melakukan ini.

Contoh 1: Bayangan di latar belakang

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blokir dengan bayangan

Jangan melawan panji-panji musuh ketika sudah tertata dengan sempurna; jangan menyerang kubu musuh ketika kubu musuh tidak dapat ditembus; ini adalah manajemen perubahan.

Sun Tzu, terjemahan. Nikolay Konrad

Hasil dari contoh ini ditunjukkan pada Gambar. 2. Bayangan mengikuti pembulatan sudut-sudut balok.

Beras. 2. Kemunculan bayangan pada gambar latar belakang

Saat menambahkan bayangan "lebar", ketahuilah bahwa bayangan tersebut mungkin melampaui batas jendela browser yang terlihat dan mengakibatkan munculnya bilah gulir horizontal.

Bayangan juga dapat ditambahkan ke elemen semu; ini terkadang diperlukan untuk tata letak yang rumit. Pada Gambar. Gambar 3 menunjukkan blok header dengan bayangan yang ditambahkan ke dalamnya. Untuk menghindari garis apa pun di persimpangan, Anda harus menggunakan elemen semu ::after dan menambahkan bayangan ke dalamnya.

Beras. 3. Blokir dengan bayangan

Contoh 2 menunjukkan pembuatan blok seperti itu.

Contoh 2. Blokir dengan bayangan

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blokir dengan bayangan

Menuju

Blokir konten

Sebuah elemen dapat memiliki lebih dari satu bayangan; parameternya dicantumkan dipisahkan dengan koma pada nilai properti box-shadow. Contoh 3 menunjukkan cara menambahkan bayangan ganda ke semua gambar.

Contoh 2. Blokir dengan bayangan

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Gambar

Hasil dari contoh ini ditunjukkan pada Gambar. 4.

Beras. 4. Gambar Bayangan Ganda

Bayangan pertama ditampilkan di sebelah kiri gambar dengan radius blur 20px, ukurannya dikurangi dengan parameter keempat (-20px). Parameter bayangan kedua ditunjukkan setelah titik desimal; bayangan ditampilkan di sebelah kanan gambar dan juga diperkecil untuk simetri.

Block shadow adalah efek tiga dimensi luar biasa yang memberikan realisme dan volume pada blok situs web. Ketika saya mulai belajar (sekitar 5-6 tahun yang lalu), saya tidak tahu tentang keberadaan , dan ketika membuat situs saya harus membuat bayangan balok menjadi gambar. Itu sangat merepotkan, dan tidak selalu berjalan sesuai keinginan saya. Berkat kekuatan CSS yang membuat pekerjaan para web designer menjadi lebih mudah. Hari ini saya akan menunjukkan cara membuat bayangan untuk blok di CSS.

Untuk menambahkan bayangan di CSS, gunakan properti bayangan kotak .

1. menggeser bayangan secara horizontal (hingga 100px ke kanan, hingga -100px ke kiri);
2. pergeseran vertikal (hingga 100px ke bawah, hingga -100px ke atas);
3. bayangan kabur (0 - bayangan jernih, 100 - bayangan sangat kabur);
4. meregangkan bayangan (hingga 100px - peregangan, hingga -100px - kompresi);
5. warna bayangan;
6. inset - bayangan berada di dalam elemen, tanpa inset bayangan akan berada di luar.

Bayangan Kotak di CSS

Saat saya mulai belajar HTML (sekitar 5-6 tahun yang lalu), saya belum mengetahui keberadaan CSS, dan saat membuat situs saya harus membuat bayangan balok menjadi gambar.

Hasil :

Meja dengan bayangan:

kode Contoh:
bayangan kotak: 0px 13px 17px -6px #000000;
bayangan kotak: 10px -10px 0px -6px #000000;
bayangan kotak: 10px 13px 0px -6px #000000;
bayangan kotak: 1px 1px 32px -6px #000000;
bayangan kotak: -1px 23px 41px -25px #000000;
bayangan kotak: -1px 23px 41px -25px #4dc13c;
bayangan kotak: -10px -10px 40px -6px #000000 sisipan;
bayangan kotak: 7px 10px 23px -8px #92a9e7;

Dengan menggunakan bayangan Anda dapat membuat blok tiga dimensi:

Kode Contoh
bayangan kotak: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
bayangan kotak: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163 ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188 ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
bayangan kotak: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191, 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px - 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0 );
bayangan kotak: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163 ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( lebar: 70%; lebar maksimal: 550px; margin: 10px otomatis; padding: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) sisipan);

Hasil :

Blok1 ( lebar: 30%; lebar maks: 550px; margin: 2em otomatis; padding: 1em; latar belakang: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191; )

Hasil :

Blok1 ( lebar: 30%; margin: 0 otomatis; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399 )

Hasil :

Dengan menggunakan bayangan Anda bisa membuat bingkai yang indah.

Bingkai indah menggunakan propertikotak- bayangan

Blok1 ( lebar: 20%; lebar maksimal: 250 piksel; margin: 0 otomatis; padding: 1em; batas: 2 piksel putus-putus #999; bayangan kotak: 0 0 0 1px #999, sisipkan 0 0 0 1px #999; )
Hasil
:




Blok1 ( lebar: 30%; lebar maksimal: 250px; margin: 2em otomatis; padding: 4em; latar belakang: #dcc005; box-shadow: 0 0 4em 4em #fff inset; )
Hasil
:




Blok1 ( max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(lingkaran pada 0 0, rgba(255,255,255,.65), rgba(255,255,255, .35)); bayangan kotak: sisipkan rgba(0,0,0,.5) -3px -3px 8px, sisipkan rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px )
Hasil
:





 
 
 Bayangan Kotak di CSS
 
 
 
 

 

 


situs web

 



 


Hasil
:




Efek indah ini dapat dicapai dengan menggunakan bayangan di CSS.  Ciptakan sesuatu yang baru dan orisinal, semuanya ada di tangan Anda.  Anda memiliki pengetahuan dan kemampuan. 
Dan suatu hari nanti saya akan menerbitkan artikel tentang bagaimana Anda dapat membuat tanpa menggunakan Photoshop.  Jadi, jadilah pusat perhatian dan berlangganan pembaruan blog saya.  Jangan lewatkan topik yang menarik minat Anda.  Nah itu dia, semoga berhasil!!!


Anda dapat menambahkan bayangan ke elemen dan mengubah tampilannya menggunakan properti CSS box-shadow.  Gaya ini memungkinkan Anda mewujudkan efek menarik, misalnya volume dan tiga dimensi blok.  Properti ini didukung oleh semua browser modern.  Pengecualiannya adalah IE8 dan Opera Mini.


properti box-shadow: sintaksis


Gaya ini ditulis sebagai berikut:
Bayangan kotak: sisipkan 4px 4px 8px 5px #333333;
Mari kita pertimbangkan secara berurutan apa yang menjadi tanggung jawab setiap parameter (dari kiri ke kanan):


  • Kata kunci inset: parameter yang tidak harus ditentukan;  menggambar bayangan di dalam elemen.
    • 

  • X mengimbangi: Menentukan sejauh mana bayangan diimbangi secara horizontal terhadap elemen.  Nilai positif berarti bergeser ke kanan, nilai negatif berarti bergeser ke kiri.  Nilai 0 berarti bayangan tidak diimbangi.
    • 

  • Pergeseran Y: Menentukan jumlah perpindahan vertikal bayangan.  Nilai positif berarti pergeseran ke bawah, nilai negatif berarti pergeseran ke atas.  Nilai 0 merupakan bayangan tanpa pergeseran.
    • 

  • Radius Buram: Ini adalah tingkat keburaman bayangan.  Semakin tinggi nilainya, semakin kabur bayangannya.  Jika parameter tidak ditentukan, nilai defaultnya adalah 0.  Dalam hal ini, bayangannya akan terlihat sangat jelas.
    • 

  • Perpanjangan: parameter opsional yang bertanggung jawab untuk meregangkan bayangan di sepanjang kedua sumbu;  semakin tinggi nilainya, semakin besar regangannya.  Ekstensi hanya berfungsi jika parameter sebelumnya ada.  Nilai defaultnya adalah 0.
    • 

  • Warna bayangan: semuanya jelas dengan parameter ini - ini mengatur warna bayangan elemen.  Warna defaultnya adalah hitam.
    • 

Catatan. Browser Android dan iPhone Safari versi lama memerlukan awalan -webkit- agar properti CSS box-shadow berfungsi dengan benar.


Properti ini dapat mengambil beberapa kelompok nilai (membuat beberapa bayangan sekaligus).  Untuk melakukan ini, Anda perlu membuat daftar grup parameter ini, dipisahkan dengan koma.  Misalnya:
Bayangan kotak: 15px 15px 20px #8b0163, sisipkan 15px 15px 20px #630046;
Contoh bayangan kotak


Untuk membantu Anda lebih memahami kekuatan dan keindahan properti box-shadow CSS, kami akan menunjukkan beberapa contoh yang dapat Anda praktikkan dengan aman.  Properti ini dapat mengubah blok biasa secara signifikan! 


Bayangan terang
Bayangan kotak: 0 2px 4px rgba(0, 0, 0, .25); 
Efek kertas
Bayangan kotak: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), sisipkan 0 0 40 piksel rgba(0, 0, 0, .1); 

Beberapa lapisan
Bayangan kotak: 6px 6px #ccc, 12px 12px #a3a3a3; 

Bingkai rangkap tiga
Bayangan kotak: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4); 

Sudut
Bayangan kotak: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 

Seperti yang Anda lihat, properti box-shadow menyisakan banyak ruang untuk imajinasi.  Anda dapat mengubah balok sesuka Anda - yang utama adalah memiliki rasa proporsional!  😉 


Pada bab berikutnya, Anda akan mempelajari properti lebar dan tinggi, yang menentukan ukuran elemen.