Cara Menggunakan CSS3 untuk multiple Backgrounds

Menambahkan gambar latar belakang dengan CSS bukan hal yang baru, fitur ini sudah ada sejak dulu. Tapi kita hanya terbatas menambahkan satu gambar dalam satu blok. Sekarang, CSS3 adalah meningkatkan pilihan untuk menambahkan latar belakang ganda.

Saya menemukan sebuah artikel menarik dari mas Thoriq Firdaus salah satu penulis hongkiat.com tentang menggunakan CSS3 untuk membuat multiple background. Tulisannya dalam bahasa Inggris. Berikut ini penjelasannya.

Cara menggunakan?

Di masa lalu, ketika kita perlu menambahkan lebih dari satu gambar latar belakang, kita kemungkinan besar akan mengganggu struktur HTML serta menambahkan lebih banyak kelas untuk mencapai hasil yang diinginkan melalui CSS, sesuatu seperti ini.

.overcast1 {
 background-image: url("images/overcast.png");
 background-position: 150px 25px;
}
.rainbow {
 background-image: url("images/rainbow.png");
 background-position: 200px 10px;
}
.overcast2 {
 background-image: url("images/overcast.png");
 background-position: 250px 25px;
}
.sunny {
 background-image: url("images/sunny.png");
 background-position: 100px 10px; 
}

Kode di atas jelas berlebihan. Pada CSS3, kode ini dapat digabungkan dalam satu background-image properti, sebagai berikut;;

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  background-image: url("images/overcast.png"),
     url("images/rainbow.png"), 
     url("images/overcast.png"), 
     url("images/sunny.png");
  background-position: 150px 25px, 
     200px 10px, 
     250px 25px, 
     100px 10px;
  background-repeat: no-repeat;
}

Dalam kode ini, kami telah menambahkan empat gambar yang sama dengan posisi yang berbeda, menghasilkan hasil yang menakjubkan ini.

• View Demo

Menambahkan Effect Animasi

Selain itu, kita dapat membuat hasilnya bahkan lebih menakjubkan dengan menambahkan CSS3 Animasi. Untuk membuat coding sederhana, kita akan hanya menggunakan sintaks standar dari W3C, tapi ingat bahwa browser - IE9, Firefox, Opera, Chrome, dan Safari - masih perlu prefiks masing-masing untuk bekerja.

@keyframes weather { 
  0% {
    background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
  }
  100% {
    background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
  }
}

Setelah kami telah menetapkan keyframes @, maka kita hanya perlu menambahkan animasi dengan nama keyframe ke pemilih dimaksud, dalam hal ini cuaca.;

.weather {
  animation: weather 5s;
}

Itu saja, sekarang kita bisa melihat efek animasi dalam tindakan dari link di bawah ini serta men-download sumber untuk mencoba

• View Demo
• Download Source

Browser Supports

Menurut CanIUse.com, CSS3 Multiple Backgrounds didukung dalam browser berikut; IE9 +, Firefox 3.6+. Tidak support dengan Internet Explorer 8. Tapi jika Anda dapat meyakinkan bahwa Anda dapat meninggalkan IE8, Anda dapat menggunakan CSS3 Multiple Backgrounds sekarang.
Sumber hongkiat.com
Cara Menggunakan CSS3 untuk multiple Backgrounds