Tutorial kali ini kita akan bermain dengan gambar, cara mengatur gambar pada css misalnya seperti menentukan ukuran, garis dan lain sebagainya akan kita bahas lengkap dalam tutorial ini.
Tujuan untuk mengatur gambar pada css adalah gambar gambar pada website terlihat menarik, meskipun hal tersebut sering diabaikan oleh web programmer tetapi tidak dengan web desainer, keduanya jelas bersebrangan. Namun jika tujuan kita adalah untuk menjadi web programmer tidak ada salahnya mempelajari web desainer agar keduanya kita kuasai maka harus paham betul sintaks css.
Cara Mengatur Gambar Pada CSS
Ada beberapa properti yang harus dipahami, seperti dimensi, border dan lain sebagainya, kedua hal tersebut bisa mempengaruhi tampilan gambar pada website, tetapi itu tergantung naluri desain masing-masing koder. Berikut ini tabel properti yang bisa digunakan untuk gambar yang akan kita bahas dalam tutorial ini.
| Properti | Keterangan |
|---|---|
| border | Properti border digunakan untuk mengatur garis pada gambar |
| width | Properti width digunakan untuk mengatur lebar dimensi sebuah gambar |
| height | Properti height digunakan untuk mengatur tinggi dimensi sebuah gambar |
| opacity | Properti opacity digunakan untuk membuat gambar terlihat transparan |
Dari masing-masing properti diatas kita akan bahas satu persatu secara detail agar mudah dipahami, tetapi jangan lupa langsung dipraktekan dikomputer masing-masing.
Mengatur Border Atau Garis Pada Gambar Dengan CSS
Border atau garis pada gambar ternyata dapat memperbaiki tampilan gambar yang terlihat biasa saja, berikut ini adalah cara untuk mengatur border atau garis pada gambar dengan css yaitu menggunakan properti border.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Gambar Pada CSS</title>
<style type="text/css">
img {
border: 3px solid red;
}
</style>
</head>
<body>
<img src="image/image.jpg">
</body>
</html>Code language: HTML, XML (xml)Dari kode diatas terlihat bahwa kita telah membuat garis berwarna merah yang mengelilingi gambar tersebut, anda dapat bereksperimen dengan membuat garis sesuai dengan yang anda inginkan. Berikut ini tampilan dari kode di atas.
Mengatur Lebar Gambar Dengan CSS
Untuk mengatur lebar gambar dengan css yaitu dengan menggunakan properti width, namun apabila kita hanya menentukan lebarnya saja maka tingginya akan dengan sendirinya menyesuaikan lebar tersebut. Berikut ini contoh kodenya.
<style type="text/css">
img {
width: 500px;
}
</style>Code language: HTML, XML (xml)Terlihat bagaimana sebuah gambar diberikan lebar 500px atau 500 pixel, maka tinggi dari gambar tersebut akan menyesuaikan lebar dari gambarnya.
Mengatur Tinggi Gambar Dengan CSS
Untuk mengatur tinggi gambar dengan css yaitu dengan menggunakan properti height, sama seperti width, jika pada width gambar akan menyesuaikan tingginya, namun sebaliknya pada mengatur tinggi gambar dengan height akan menyesuaikan lebar dari gambar tersebut. Berikut ini contoh kodenya.
<style type="text/css">
img {
height: 500px;
}
</style>Code language: HTML, XML (xml)Dari kode diatas kita telah mengatur tinggi gambar dengan css yang diberikan nilai 500px, jika ternyata lebar melebihi tinggi maka gambar akan terlihat sangat lebar karna pada tinggi 500px gambar akan menyesuaikan lebar gambar tersebut.
Mengatur Gambar Agar Menjadi Transparan
Ternyata di css kita dapat mengatur gambar agar menjadi transparan, yaitu dengan menggunakan properti opacity, namun dibeberapa browser penggunaan opacity berbeda-beda. Berikut ini contohnya.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Gambar Pada CSS</title>
<style type="text/css">
.opacity {
opacity: 0.5;
}
</style>
</head>
<body>
<strong>Gambar Tanpa Opacity</strong><br />
<img src="image/image.jpg" width="200px"><br /><br />
<strong>Gambar Dengan Opacity</strong><br />
<img class="opacity" src="image/image.jpg" width="200px">
</body>
</html>Code language: HTML, XML (xml)Berikut ini hasil dari sintaks diatas…
Terlihat hasil dari kedua gambar tersebut setelah ditambahkan opacity dengan ketajaman 0.5, yang satu memiliki transparan dan yang satunya lagi tidak.
Perlu penulis tambahkan seperti awal tadi dikatakan bahwa penggunaan opacity untuk menghasilkan gambar transparan tidak semua browser mendukungnya, namun hal tersebut bisa diatasi dengan menambahkan properti masing-masing browser. Berikut ini contohnya.
<style type="text/css">
.opacity {
-webkit-opacity: 0.5; /* google chrome */
-moz-opacity: 0.5; /* mozilla firefox */
opacity: 0.5; /* global */
filter: alpha(opacity=50); /* internet explorer */
}
</style>Code language: HTML, XML (xml)Itulah masing-masing properti untuk beberapa browser agar dapat mendukung gambar transparan di browser-browser tersebut.
Lukman