Mengatur Gambar Pada CSS

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>

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.

Baca juga:  Mengatur Font Pada CSS

mengatur gambar pada css

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>

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>

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>

Berikut ini hasil dari sintaks diatas…

mengatur gambar pada css

Terlihat hasil dari kedua gambar tersebut setelah ditambahkan opacity dengan ketajaman 0.5, yang satu memiliki transparan dan yang satunya lagi tidak.

Baca juga:  Mengatur Tinggi Elemen Dengan CSS

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>

Itulah masing-masing properti untuk beberapa browser agar dapat mendukung gambar transparan di browser-browser tersebut.