Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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!
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>
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'>
