Dengan CSS3 anda dapat membuat efek bayangan.
CSS3 Bayangan Efek
Dengan CSS3 Anda dapat menambahkan bayangan untuk teks dan elemen.
Dalam bab ini Anda akan belajar tentang sifat-sifat berikut:
- text-shadow
- box-shadow
CSS3 Text Bayangan
CSS3 properti text-shadow berlaku bayangan untuk teks.
Dalam penggunaannya sederhana, Anda hanya menentukan bayangan horizontal (2px) dan bayangan vertikal (2px):
h1 {
text-shadow: 2px 2px;
}
Berikutnya, menambahkan warna untuk bayangan:
h1 {
text-shadow: 2px 2px yellow;
}
Kemudian, menambahkan efek blur untuk bayangan:
h1 {
text-shadow: 2px 2px 5px yellow;
}
Contoh berikut menunjukkan teks putih dengan bayangan hitam:
h1 {
color: white;
text-shadow: 2px 2px 5px black;
}
Contoh berikut menunjukkan neon cahaya bayangan merah:
h1 {
text-shadow: 0px 0px 5px red;
}
Beberapa Bayangan
Untuk menambahkan lebih dari satu bayangan untuk teks, Anda dapat menambahkan daftar dipisahkan koma dari bayangan.
Contoh berikut menunjukkan neon cahaya bayangan merah dan biru:
h1 {
text-shadow: 0px 0px 5px #FF0000, 0px 0px 5px #0000FF;
}
Contoh berikut menunjukkan teks putih dengan hitam, biru, dan darkblue shadow:
h1 {
color: white;
text-shadow: 1px 1px 5px black, 0px 0px 25px red, 0px 0px 5px darkblue;
}
CSS3 box-shadow Properti
Properti CSS3 box-shadow berlaku bayangan untuk elemen.
Dalam penggunaannya sederhana, Anda hanya menentukan bayangan horizontal dan vertikal bayangan:
div {
box-shadow: 10px 10px;
}
Berikutnya, menambahkan warna untuk bayangan:
div {
box-shadow: 10px 10px grey;
}
Berikutnya, menambahkan efek blur untuk bayangan:
div {
box-shadow: 10px 10px 5px grey;
}
0 komentar:
Posting Komentar