Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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'>
