Blog Request tutorial? klik disini!

  • Properties Clip CSS

    Ditulis oleh: Aulia Rahmah Alhafidz
    565 kali dibaca
    22 Sep / 2014 11:07

    Gambar yang ingin ditampilkan di sebuah website terkadang ukurannya terlalu besar atau mungkin sudah pas namun ada beberapa yang dihilangkan. Ya, mau bagaimana lagi. Alhasil kita harus bertemu Photoshop untuk mengeditnya. Nah, sebenarnya tanpa bertemu Photoshop pun kita bisa tetap menampilkan gambar yang seuai dengan keinginan kita. Dalam kasus ini, gambar yang ditampilkan akan terpotong.

    Lalu bagaimana cara membuatnya? Mudah saja. Tak usah menengok Editor Gambar seperti Photoshop. Cukup dengan sematkan kata "clip" di CSS, maka gambar akan terpotong. Sesingkat itu? Tentu saja tidak, itu hanyalah propertiesnya. Yang perlu dilihat adalah isi dari "value"nya. Langsung lihat saja yuk!

    Ini adalah gambar aslinya :

    clip-css

    Sekarang kita potong gambar ini menjadi setengah :

    See the Pen ckEoy by Dumet_School (@dumet_school) on CodePen.

    Bagaimana? Apakah berhasil?

    Sama seperti margin dan padding maksud yang ada di dalam rect adalah (atas, kanan, bawah, kiri). Paham yaa. Dan properties clip ini support dengan browser minimal Chrome 1.0, IE 8.0, Firefox 1.0, Safari 1.0 dan Opera 7.0.

    Semoga bermanfaat :)






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155