Membuat bayangan untuk kotak dalam CSS

box-shadow

Adalah property CSS yang digunakan untuk membuat bayangan untuk kotak.

Syntax:

box-shadow:nilai_horizontal nilai_vertical nilai_blur nilai_penyebaran nilai_warna;

Keterangan:

  • nilai_horizontal: jika nilai ini positif maka bayangan akan berada di sebelah kanan dan jika nilai ini negatif maka bayangan akan berada disebelah kiri.
  • nilai_vertical: jika nilai ini positif maka bayangan akan berada di bawah kotak dan jika nilai ini negatif maka bayangan akan berada diatas kotak.
  • nilai_blur digunakan untuk menentukan besarnya angka untuk memudarkan warna.
  • nilai_penyebaran adalah nilai yang akan ditambahkan ke nilai_vertical dan nilai_horizontal.
  • nilai_warna adalah warna dari bayangan.

Bayangan Bawah dan Kanan

Kodenya adalah:

<style> 

#bayangan {

width:20%;

padding:10px;

border:1px solid black;

box-shadow:3px 2px  red;

}

</style>
<p id=’bayangan’>Kursus CSS a2fahmi.com</p>

Keterangan:

  • box-shadow:3px 2px ┬áred, Kode ini berarti saya memberikan bayangan warna merah ke bawah dengan jarak 3px dan ke kanan dengan jarak 2px

Bayangan ke Semua Sisi

Kodenya adalah:

<style> 

#bayangan {

width:20%;

padding:10px;

border:1px solid black;

box-shadow:0 0 5px 2px red;

}

</style>
<p id=’bayangan’>Kursus CSS a2fahmi.com</p>

Keterangan:

  • box-shadow:0 0 0 2px red, Kode ini berarti saya memberikan bayangan warna merah ke semua sisi kotak dengan jarak 2px.

Bayangan Blur


Kodenya adalah:

<style> 

#bayangan {

width:20%;

padding:10px;

border:1px solid black;

box-shadow:0 0 5px 2px red;

}

</style>

<p id=’bayangan’>Kursus CSS a2fahmi.com</p>

Keterangan:

  • box-shadow:0 0 5px 2px red, Kode ini berarti saya memberikan bayangan warna merah dengan jarak 2px ke semua sisi dengan warna yang memudar sebesar 5px.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *