Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 05 Januari 2010

Manipulasi Tampilan Gambar Dengan CSS

Kategori : ,
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 :

Oketrik

Cropping ==>> Menampilkan hanya sebagian gambar


Kode yang saya gunakan sebagai berikut :


<div style="background-image: url(http://2.bp.blogspot.com/_QfoNn403afE/Sz11EupoFCI/AAAAAAAAAP4/QqFAe5UGNKg/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

9 Komentar untuk Manipulasi Tampilan Gambar Dengan CSS

wah mantab sob, eh ternyata gw prtmx y :D

kode besar kecil untuk fontnyah kok berfungsinya di bagian breadcrumbs ama title ajah yah....ama emoticon jg nih tp font postingannya gak rubah, salah tag kali tuh :)

tip mantab ni sob.. thanks ilmunya ni ;))

cocok untuk blog yang mencantumkan gambar dalam postingan ni...agar g berat...makasih sob

laporan sob. yang bawah tu gambarnya g bekerja sob.

maaf sob g berfungsi soalnya baru ganti template jadi triknya g berfungsi, Terima Kasih....

sekarang berfungsi sob. hehehe. mantab..

kalo buat gallery gimana, buat tampil in tumbnail pada setiap post masih bingung nempatinnya dimana..