Gaya Gambar Anda dan Gunakan Gambar dalam Gaya
Banyak orang menggunakan CSS untuk menyesuaikan teks, mengubah font, warna, ukuran dan banyak lagi. Tetapi satu hal yang sering dilupakan orang adalah Anda juga bisa menggunakan CSS dengan gambar.
Mengubah Gambar Itu Sendiri
CSS memungkinkan Anda menyesuaikan tampilan gambar di halaman. Ini bisa sangat berguna untuk menjaga halaman Anda tetap konsisten. Dengan mengatur gaya pada semua gambar, Anda membuat tampilan standar untuk gambar Anda. Beberapa hal yang dapat Anda lakukan:
- Tambahkan batas atau garis di sekeliling gambar
- Hapus perbatasan berwarna di sekitar gambar yang ditautkan
- Menyesuaikan lebar dan / atau tinggi gambar
- Tambahkan bayangan drop
- Putar gambar
- Ubah gaya saat gambar digerakkan
Memberikan gambar Anda perbatasan adalah tempat yang bagus untuk memulai. Tetapi Anda harus mempertimbangkan lebih dari sekedar perbatasan - pikirkan tentang seluruh tepi gambar Anda dan sesuaikan margin dan padding juga. Sebuah gambar dengan perbatasan hitam tipis terlihat bagus, tetapi menambahkan beberapa padding antara perbatasan dan gambar dapat terlihat lebih baik.
img {
border: 1px berwarna hitam pekat;
padding: 5px;
}
Sebaiknya selalu tautkan gambar non-dekoratif , jika memungkinkan. Tetapi ketika Anda melakukannya, ingat bahwa sebagian besar browser menambahkan batas berwarna di sekitar gambar. Bahkan jika Anda menggunakan kode di atas untuk mengubah perbatasan, tautan akan menimpa itu kecuali Anda menghapus atau mengubah batas pada tautan juga. Untuk melakukan ini, Anda harus menggunakan aturan anak CSS untuk menghapus atau mengubah perbatasan di sekitar gambar yang ditautkan:
img> a {
border: none;
}
Anda juga dapat menggunakan CSS untuk mengubah atau mengatur tinggi dan lebar gambar Anda. Meskipun bukan ide bagus untuk menggunakan peramban untuk menyesuaikan ukuran gambar karena kecepatan unduhan, mereka menjadi jauh lebih baik dalam mengubah ukuran gambar sehingga gambarnya tetap terlihat bagus. Dan dengan CSS Anda dapat mengatur gambar Anda untuk semua menjadi lebar atau tinggi standar atau bahkan mengatur dimensi menjadi relatif terhadap wadah.
Ingat, ketika Anda mengubah ukuran gambar, untuk hasil terbaik, Anda hanya harus mengubah ukuran satu dimensi - tinggi atau lebarnya. Ini akan membuat gambar itu memiliki rasio aspek, sehingga tidak terlihat aneh. Setel nilai lain ke otomatis atau tinggalkan untuk memberi tahu browser agar menjaga rasio aspek tetap konsisten.
img {
lebar: 50%;
tinggi: otomatis;
}
CSS3 menawarkan solusi untuk masalah ini dengan objek-fit dan objek-posisi objek baru. Dengan properti ini Anda akan dapat menentukan tinggi dan lebar gambar yang tepat dan bagaimana rasio aspek harus ditangani. Ini mungkin menciptakan efek letterboxing di sekitar gambar Anda atau memotong untuk mendapatkan gambar agar sesuai dengan ukuran yang diperlukan.
Meskipun properti objek-fit dan objek-posisi CSS3 belum didukung secara luas, ada properti CSS3 lain yang didukung dengan baik di sebagian besar browser modern yang dapat Anda gunakan untuk memodifikasi gambar Anda. Hal-hal seperti bayangan, sudut membulat, dan transformasi untuk memutar, memiringkan, atau memindahkan gambar Anda semua berfungsi sekarang di sebagian besar browser modern. Anda kemudian dapat menggunakan transisi CSS untuk membuat gambar berubah ketika melayang di atas, atau diklik, atau hanya setelah jangka waktu tertentu.
Menggunakan Gambar sebagai Latar Belakang
CSS memudahkan untuk menciptakan latar belakang mewah dengan gambar Anda.
Anda dapat menambahkan latar belakang ke seluruh halaman atau hanya elemen tertentu. Sangat mudah untuk membuat gambar latar belakang di halaman dengan properti gambar latar belakang:
body {
background-image: url (background.jpg);
}
Ubah pemilih tubuh ke elemen tertentu pada halaman untuk meletakkan latar belakang hanya pada satu elemen.
Hal menyenangkan lainnya yang dapat Anda lakukan dengan gambar adalah membuat gambar latar belakang yang tidak bergulir dengan sisa halaman - seperti tanda air. Anda cukup menggunakan style background-attachment: tetap; bersama dengan gambar latar belakang Anda. Pilihan lain untuk latar belakang Anda termasuk membuat ubin hanya secara horizontal atau vertikal menggunakan properti pengulangan latar belakang.
Tulis latar belakang-ulang: ulangi-x; untuk mem-tile gambar secara horizontal dan background-repeat: repeat-y; ke ubin secara vertikal. Dan Anda dapat memposisikan gambar latar belakang Anda dengan properti latar belakang-posisi.
Dan CSS3 menambahkan lebih banyak gaya untuk latar belakang Anda juga. Anda dapat meregangkan gambar agar sesuai dengan ukuran latar apa pun atau mengatur gambar latar belakang untuk skala dengan ukuran jendela . Anda dapat mengubah posisi dan kemudian klip gambar latar belakang. Tapi salah satu hal terbaik tentang CSS3 adalah Anda sekarang dapat melapisi beberapa gambar latar belakang untuk menciptakan efek yang lebih rumit.
HTML5 Membantu Gaya Gambar
Elemen GAMBAR di HTML5 harus ditempatkan di sekitar gambar apa pun yang dapat berdiri sendiri di dalam dokumen. Salah satu cara untuk memikirkannya adalah jika gambar dapat muncul di apendiks, maka itu harus berada di dalam elemen GAMBAR. Anda kemudian dapat menggunakan elemen itu dan elemen FIGCAPTION untuk menambahkan gaya ke gambar Anda.