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 ?
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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=”utf-8“> | |
| <title>Icon Smartphone dengan CSS3</title> | |
| <link rel=”stylesheet” type=”text/css” href=”smartphone.css” media=”screen“> | |
| </head> | |
| <body> | |
| <div class=”kotak“> <!– membuat selector class kotak –> | |
| <div class=”speaker“></div> <!– menyisipkan 3 selector lagi yaitu speaker –> | |
| <div class=”layar“></div> <!– selector untuk layar –> | |
| <div class=”tombol“></div> <!– dan selector untuk tombol –> | |
| </div> | |
| </body> | |
| </html> |
by 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0 auto; | |
| width: 1000px; | |
| } | |
| .kotak { | |
| width: 270px; | |
| height: 350px; | |
| background: #49A2FF; | |
| margin: 0 auto; | |
| border-radius: 20px; | |
| -moz-border-radius: 20px; | |
| -webkit-border-radius: 20px; | |
| padding: 20px; | |
| } |
And then, mari kita membuat speaker, layar dan juga tombol. Di bawah properti body dan kotak, tambahkan kode di bawah ini :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .kotak .speaker { | |
| width: 50px; | |
| height: 10px; | |
| margin: 0 auto; | |
| background: white; | |
| margin-bottom: 5px; | |
| } | |
| .kotak .layar { | |
| width: 250px; | |
| height: 300px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| margin-bottom: 5px; | |
| } | |
| .kotak .tombol { | |
| width: 40px; | |
Input your search keywords and press Enter. |
