5 Properti CSS Yang Harus Anda Ketahui

Ada properti CSS, seperti gambar latar belakang, gambar tepi, masking, dan properti kliping, yang dengannya Anda bisa langsung menambahkan gambar ke halaman web dan mengontrol perilaku mereka. Namun, ada juga properti CSS terkait gambar yang lebih jarang disebutkan bekerja pada gambar yang ditambahkan dengan Tag HTML, yang merupakan cara yang disukai untuk menambahkan gambar ke halaman web.

Deskripsi pekerjaan dari properti yang terakhir ini bervariasi dari mengendalikan bayangan gambar untuk mengatur ketajaman, membantu kami lebih mengontrol tampilan dan posisi gambar yang ditambahkan dengan menandai. Mari kita melihatnya satu per satu.

1. Pertajam gambar dengan rendering gambar

Ketika gambar ditingkatkan, browser menghaluskan gambar, sehingga tidak terlihat pixelated. Tetapi, tergantung pada resolusi gambar dan layar, ini mungkin bukan yang terbaik setiap saat. Anda dapat mengontrol perilaku browser ini dengan rendering gambar milik.

Properti yang didukung dengan baik ini mengontrol algoritma yang digunakan untuk skala gambar. Dua nilai utamanya adalah ujungnya garing dan pixelated.

Itu ujungnya garing nilai mempertahankan kontras warna di antara piksel. Dengan kata lain, tidak ada perataan yang dilakukan untuk gambar, yang bagus untuk karya seni pixel.

Kapan pixelated digunakan, piksel terdekat dari suatu piksel mungkin mengambil penampilannya, membuatnya tampak seperti bersama mereka membentuk satu piksel besar, bagus untuk layar resolusi tinggi.

Jika Anda terus memperhatikan dengan cermat tepi bunga di GIF di bawah, Anda dapat melihat perbedaan antara bunga biasa dan a pixelated gambar.

 img rendering-gambar: pixelated;  

2. Regangkan gambar dengan objek-fit

Itu berisi, penutup, mengisi semua nilai sudah familier, kami menggunakannya untuk ukuran latar belakang properti yang mengontrol bagaimana gambar latar mengisi elemen yang dimilikinya. Itu objek-fit Properti sangat mirip dengan itu, karena juga menentukan bagaimana ukuran gambar di dalam wadahnya.

Itu berisi nilai berisi gambar di dalam wadahnya. penutup melakukan hal yang sama, tetapi jika rasio aspek gambar dan wadah tidak cocok, gambar terpotong. mengisi menyebabkan gambar regangkan dan isi wadahnya. menurunkan memilih versi gambar terkecil menampilkan.

 
  #container width: 300px; tinggi: 300px;  img width: 100%; tinggi: 100%; objek-fit: berisi;  

3. Geser gambar dengan posisi objek

Demikian pula untuk pelengkap posisi latar belakang properti dari ukuran latar belakang, ada sebuah posisi objek properti untuk objek-fit, terlalu.

Itu objek-fit milik memindahkan gambar di dalam wadah gambar ke koordinat yang diberikan. Koordinat dapat didefinisikan sebagai satuan panjang absolut, satuan panjang relatif, kata kunci (teratas, kiri, pusat, bawah, dan kanan), atau a kombinasi yang valid dari mereka (20px kanan atas 5px, tengah kanan 80px).

 
  #container width: 300px; tinggi: 300px;  img width: 100%; tinggi: 100%; objek-posisi: 150px 0;  

4. Tempatkan gambar dengan perataan vertikal

Kami terkadang menambahkan (yang sebaris secara alami) di sebelah string teks untuk informasi atau dekorasi tambahan. Dalam hal itu, menyelaraskan teks dan gambar ke posisi yang diinginkan bisa sedikit rumit - jika Anda tidak tahu properti mana yang digunakan.

Itu perataan vertikal properti adalah tidak eksklusif untuk sel tabel saja. Itu juga dapat menyelaraskan elemen inline di dalam kotak inline, dan dengan demikian dapat digunakan untuk menyelaraskan gambar dalam satu baris teks. Dibutuhkan sejumlah nilai yang dapat diterapkan ke elemen sebaris, sehingga Anda memiliki banyak opsi untuk dipilih.

 
 PDF  
 

5. Bayangkan gambar dengan filter: drop-shadow ()

Ketika digunakan secara mencolok dalam teks dan kotak, bayangan dapat menambah usia halaman web. Hal yang sama berlaku untuk gambar. Gambar dengan bentuk inti dan latar belakang transparan dapat mengambil manfaat dari drop-shadow Filter CSS.

Argumennya adalah mirip dengan nilai properti CSS terkait bayangan (bayangan teks, bayangan kotak). Dua yang pertama mewakili jarak vertikal dan horizontal antara bayangan dan gambar, yang ketiga dan keempat adalah mengaburkan dan sebarkan jari-jari bayangan, dan yang terakhir adalah warna bayangan.

Seperti bayangan teks, drop-shadow juga menciptakan bayangan itu dibentuk ke objek milik. Jadi, ketika itu diterapkan pada gambar, bayangan mengambil bentuk bagian gambar yang terlihat.

 img filter: drop-shadow (0 0 5px blue);  

Baca Juga: Refleksi Gambar CSS3 [Tips CSS3]