Manipulasi Tampilan Gambar Dengan CSS

Setalah sekian lama saya belajar CSS sekarang seya sedikit bisa menggunakan CSS walaupun tidak terlalu jago tapi saya ingin berbagi ilmu kepada kawan-kawan sekalian. Disini saya akan berbagi ilmu tentang Manipulasi Tampilan Gambar Dengan CSS. Apa Maksudnya?? dengan CSS kita bisa mengatur atau mengedit gambar sesuai dengan kemauan kita tapi sobat harus mengerti dahulu tentang dasar CSS.

Untuk contoh Gambar yang akan saya manipulasi adalah :

Cropping ==>> Menampilkan hanya sebagian gambar

Kode yang saya gunakan sebagai berikut :


<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjj3gVQP4brQw8B6Zk62MuN6PGpSionQI7GBvBKOOa83zGaBDRl7X_CNyVKV51n4Z4NdAxaTyWJCPupyesUnvC7ea7tCJ2QcBYWk3K6kXFN8fWK0e_qDj_wRmWhNwAQn4NjpgCPV98QSCb/s320/profil.png); background-position: 0pt 50%; background-repeat: no-repeat; height: 200px; width: 100px;">
</div>

Penjelasan :

1. Background Image ==>> Untuk menunjukan alamat gambar yang nanti akan di tampilkan
2. Background-position ==>> untuk mendefinisikan bagian mana dari gambar yang akan ditampilkan yaitu x% y%. X% adalah bagian horisontal pada gambar. Y% untuk bagian vertikal. Pada contoh di atas. 0 50% berarti gambar ditampilkan dari bagian ujung kiri paling atas sampai dengan 50% bagian gambar.
3. Background-repeat ==>> Untuk menegaskan bahwa gambar akan di tampilkan hanya sekali pada layer (<div></div>)
4. Atribut Width dan Height di gunakan untuk mengatur lebar dan tinggi gambar

Mungkin hanya sekian yang bisa oketrik sampaikan untuk berbagi ilmu kepada kawan-kawan, sebenarnya banyak sekali untuk memainkan CSS, di atas hanya sebagian kecil dari Manipulasi Tampilan Gambar. Kalau sobat sekalian ada yang lebih tahu banyak mari kita berbagi ilmu. Sekian dari saya Terima kasih

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg