CSS3 Drop Shadow

CSS3 drop shadow adalah property yang digunakan untuk membuat shadow atau bayangan di teks atau element.

Ada dua properti, yaitu:

• box-shadow
• text-shadow

Box Shadow

Pertama adalah bayangan pada kotak element dengan menggunakan property box-shadow.

Syntax yang digunakan adalah:

box-shadow: offset-x offset-y blur-radius color;

Keterangan:

• offset-x adalah posisi bayangan secara horisontal (sumbu-x)
• offset-y adalah posisi bayangan secara vertikal (sumbu-x)
• blur-radius adalah mengatur tingkat blur / ketajaman bayangan
• color untuk mengatur warna bayangan

Contoh 1:

#shadow1 {
  width: 300px;
  height: 75px;
  padding: 15px;
  background-color: pink;
  box-shadow: 20px 10px;
  margin-bottom:20px;
}

Contoh 2:

#shadow2 {
  width: 300px;
  height: 75px;
  padding: 15px;
  background-color: pink;
  box-shadow: 20px 10px 10px #01276b;
  margin-bottom:20px;
}

Multiple shadow

Kamu juga bisa membuat bayangan lebih dari satu, dengan menambahkan value dari properti tersebut, dipisahkan dengan tanda koma ,.

#shadow3 {
  width: 300px;
  height: 75px;
  padding: 15px;
  background-color: pink;
  box-shadow: 20px 10px 10px black, 25px 15px 5px yellow;
  margin-bottom:20px;
}

Text-shadow

Kalau box-shadow untuk memberi bayangan pada element, sedangkan text-shadow untuk huruf teks di element tersebut.

Syntax yang digunakan:

text-shadow: offset-x offset-y blur-radius color;

#shadow4{
  width: 300px;
  height: 75px;
  padding: 15px;
  color:white;
  background-color: yellow;
  text-shadow: 1px 1px 3px black;
  margin-bottom:20px;
}

Property CSS3 Shadow

Berikut ini adalah daftar property css3 untuk membuat bayangan:

Property	Keterangan
text-shadow	Property bayangan untuk element teks
box-shadow	Property bayangan untuk element bukan teks

Mudah kan membuat shadow di css3?