Pertanyaan tentang box shadow

div.polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

Pertanyaan saya adalah 0 4px 8px 0 dan 0 6px 20px 0 itu isinya apa yaa? saya sudah berlogika tpi ga menemukan dan ngestack disitu trus hehe kalo ada yang bisa bantu tolong jawab yaa,thx!

avatar Nabilwafi49
@Nabilwafi49

2 Kontribusi 0 Poin

Diperbarui 4 tahun yang lalu

2 Jawaban:

<pre> box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); </pre> Berarti sobat punya 2 bayangan (box-shadow), pertama yg warna ini rgba(0, 0, 0, 0.2), lalu bayangan kedua ada di belakang bayangan yg pertama warnanya ini rgba(0, 0, 0, 0.19). Penjelasan untuk 0 4px 8px 0 itu gini:

  • Dari nilai yg pertama (0) itu buat yg horizontal (kiri-kanan, klo bayangan ke kiri itu nilainya minus, klo 0 gak ada bayangan ke kiri atau kanan).
  • Selanjutnya (4px) itu buat bayangan yg vertikal (atas-bawah)
  • Selanjutnya lagi (8px) itu buat blur radius. Blur radius itu buat lengkungan yg pojok kiri-kanan-atas-bawah sma ngeblurnya.
  • Selanjutnya lagi lagi (0) itu spread radius buat semakin besar bayangan/shadownya baik scr vertikal maupun horizontal. Klo agan pasang nilai 0 ya gak ada apa apa (gak membesar/mengecil)

Nah klo yg 0 6px 20px 0 itu buat bayangan yg kedua, ada setelah bayangan yg pertama. Arti dari nilai nilainya sma aja kyk yg diatas.

Nah, klo sobat mau coba coba tentang box-shadow bisa kunjungin ke web ini: <a href=' https://www.cssmatic.com/box-shadow '>css matic box-shadow</a>

avatar UcokTambunan
@UcokTambunan

12 Kontribusi 7 Poin

Dipost 4 tahun yang lalu

itu dinamakan shorthand css, untuk mudah mempelajarinya silahkan ikuti tutorial diatas. apabila masih bingung, coba lakukan eksperiment melalui inspect element seperti berikut. (rekomendasi : chrome) <img src='https://i.ibb.co/LQ8VLb9/Capture.png'>

<img src='https://i.ibb.co/LQ8VLb9/Capture.png'>

avatar hellogerafis
@hellogerafis

17 Kontribusi 1 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban