Banyak orang menggunakan CSS untuk menyesuaikan teks, mengubah font, warna, ukuran, dan lainnya. Tapi satu hal yang sering dilupakan banyak orang adalah Anda bisa menggunakan CSS dengan gambar juga.
Mengubah Gambar Itu Sendiri
CSS memungkinkan Anda untuk menyesuaikan bagaimana gambar ditampilkan 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 sekitar gambar
- Hapus batas berwarna di sekitar gambar yang ditautkan
- Menyesuaikan lebar dan/atau tinggi gambar
- Tambahkan bayangan jatuh
- Putar gambar
- Ubah gaya ketika gambar melayang di atas
Memberi gambar Anda batas adalah tempat yang bagus untuk memulai. Tetapi Anda harus mempertimbangkan lebih dari sekadar batas — pikirkan tentang seluruh tepi gambar Anda dan sesuaikan margin dan lapisan demikian juga. Gambar dengan batas hitam tipis terlihat bagus, tetapi menambahkan beberapa padding antara batas dan gambar dapat terlihat lebih baik.
Itu ide yang bagus untuk selalu tautkan gambar non-dekoratif, bila memungkinkan. Tetapi ketika Anda melakukannya, ingatlah bahwa sebagian besar browser menambahkan batas berwarna di sekitar gambar. Bahkan jika Anda menggunakan kode di atas untuk mengubah batas, tautan akan menimpanya kecuali Anda menghapus atau mengubah batas pada tautan juga. Untuk melakukan ini, Anda harus menggunakan aturan anak CSS untuk menghapus atau mengubah batas di sekitar gambar yang ditautkan:
Anda juga dapat menggunakan CSS untuk mengubah atau mengatur tinggi dan lebar gambar Anda. Meskipun bukan ide yang bagus untuk menggunakan browser untuk menyesuaikan ukuran gambar karena kecepatan unduh, mereka menjadi jauh lebih baik dalam mengubah ukuran gambar sehingga tetap terlihat bagus. Dan dengan CSS Anda dapat mengatur semua gambar Anda menjadi lebar atau tinggi standar atau bahkan mengatur dimensi agar relatif terhadap wadah.
Ingat, saat Anda mengubah ukuran gambar, untuk hasil terbaik, Anda hanya boleh mengubah ukuran satu dimensi — tinggi atau lebar. Ini akan memastikan bahwa gambar mempertahankan rasio aspeknya, sehingga tidak terlihat aneh. Tetapkan nilai lainnya ke mobil atau biarkan saja untuk memberi tahu browser agar rasio aspek tetap konsisten.
CSS3 menawarkan solusi untuk masalah ini dengan properti baru sesuai objek dan posisi objek. Dengan properti ini, Anda akan dapat menentukan tinggi dan lebar gambar yang tepat dan bagaimana rasio aspek harus ditangani. Ini mungkin membuat efek letterbox di sekitar gambar Anda atau memotong agar gambar sesuai dengan ukuran yang diperlukan.
Ada properti CSS3 lain yang didukung dengan baik di sebagian besar browser yang dapat Anda gunakan untuk memodifikasi gambar Anda juga. Hal-hal seperti bayangan jatuh, sudut membulat, dan transformasi untuk memutar, memiringkan, atau memindahkan gambar Anda, semuanya berfungsi sekarang di sebagian besar browser modern. Anda kemudian dapat menggunakan transisi CSS untuk membuat gambar berubah saat diarahkan ke atas, atau diklik, atau hanya setelah jangka waktu tertentu.
Menggunakan Gambar sebagai Latar Belakang
CSS memudahkan untuk membuat latar belakang mewah dengan gambar Anda. Kamu bisa tambahkan latar belakang ke seluruh halaman atau hanya elemen tertentu. Sangat mudah untuk membuat gambar latar belakang pada halaman dengan gambar latar belakang Properti:
Mengubah tubuh pemilih ke elemen tertentu pada halaman untuk menempatkan latar belakang hanya pada satu elemen.
Hal menyenangkan lainnya yang dapat Anda lakukan dengan gambar adalah membuat gambar latar belakang yang tidak menggulir dengan sisa halaman — seperti tanda air. Anda hanya menggunakan gaya lampiran-latar belakang: diperbaiki; bersama dengan gambar latar belakang Anda. Pilihan lain untuk latar belakang Anda termasuk membuatnya menjadi ubin secara horizontal atau vertikal menggunakan using latar belakang-ulangi Properti. Menulis background-repeat: ulangi-x; untuk menyusun gambar secara horizontal dan background-repeat: ulangi-y; untuk memasang ubin secara vertikal. Dan Anda dapat memposisikan gambar latar belakang Anda dengan latar belakang-posisi Properti.
Dan CSS3 menambahkan lebih banyak gaya untuk latar belakang Anda juga. Anda dapat meregangkan gambar Anda agar sesuai dengan latar belakang ukuran apa pun atau mengatur gambar latar belakang ke skala dengan ukuran jendela. Anda dapat mengubah posisi dan kemudian klip gambar latar belakang. Tetapi salah satu hal terbaik tentang CSS3 adalah Anda sekarang dapat melapisi beberapa gambar latar belakang untuk menciptakan efek yang lebih rumit.
HTML5 Membantu Gambar Gaya
Itu ANGKA elemen dalam 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 lampiran, maka gambar itu harus berada di dalam ANGKA elemen. Anda kemudian dapat menggunakan elemen itu dan GAMBAR elemen untuk menambahkan gaya ke gambar Anda.