CSS3 atau Cascading Style Sheet versi ke tiga, menawarkan beberapa perubahan dan kemajuan baru dalam hal desain sebuah kerangka website. CSS awalnya digunakan sebagai kontrol utama desain pewarnaan, tata letak dan accesoris website. Namun seiring perkembangan dan munculnya CSS versi terbaru ini, hal-hal menonjol akan kita lihat pada tutorial membuat icon menggunakan CSS3. Tanpa perlu kita mengembed sebuah gambar.
Penulis akan mengambil eksperimen pembuatan icon handphone atau smartphone menggunakan CSS3. Jika biasanya kita memanggil icon atau gambar dengan tag html <img src=”gambar.jpg”> atau melalui inline css. Kali ini kita akan membuat sebuah ikon hanya dengan membuat pemanggilan fungsi selector css.
Tutorial
Studi kasus ini, kita merancang sebuah icon smartphone berwarna biru muda, bagi yang suka warna selain biru silahkan di ubah sendiri backgroundnya ya ? 😀
Lihat Demo
Pertama, buatlah dua file yaitu index.html berfungsi untuk membuat kerangka handphone dan smartphone.css untuk memberi style dan memanipulasi sehingga membentuk gambar smartphone. Disini kita membuat div class utama yaitu kotak border, pada class tersebut kita selipi class lain untuk membuat speaker depan, layar dan tombol. Berikut adalah file index.html yang bisa Anda ketik :
Di dalam file index tersebut kita mempunyai 4 selector div .class yaitu kotak, kemudian di dalam kota saya selipkan 3 css selector lagi yaitu speaker, layar, dan tombol. Di sana kita juga memanggil file smartphone. css
Kemudian di dalam file smartphone.css, awal mula kita akan membuat style pada bagian kotak atau kerangka luar smartphone. Disini terlihat saya menambahkan propertis CSS3 yang bernama border-radius, berfungsi untuk membuat border secara melengkung. Masing-masing browser berbeda pemanggilan, jadi kita harus membuat 3 properti border radius yang diawal -moz untuk firefox dan -webkit untuk Google Chrome,
Berikut adalah propertis untuk <div class=”kotak”> dan body. Dari penambahan properti untuk body dan class kotak berwarna biru muda dengan rounded borded di setiap pojok kotak.
And then, mari kita membuat speaker, layar dan juga tombol. Di bawah properti body dan kotak, tambahkan kode di bawah ini :
Hasil akhirnya adalah seperti di bawah ini :
Hasil Akhir Icon Smartphone CSS3
Dari pembuatan icon smartphone menggunakan CSS3, bukan tanpa alasan karena hal ini akan meminimalisir ukuran file pada website Anda. Di internet, ada banyak sekali resource icon-icon lain yang dibuat menggunakan CSS3. Anda dapat berkunjung ke one-div.com. Kemudian untuk lebih memperdalam mengenai CSS3, pembaca dapat berkunjung langsung ke http://www.w3schools.com/css3/default.asp
Semoga bermanfaat !