Free Online Tools And Generator

Mywapmaster


☰ subc


Cara Memasang Clip Pada Background Gambar Dengan Css

css clip

Sebelumnya terima kasih sudah berkunjung di My Wapmaster ini, semoga anda senang dan jangan lupa saran serta Kontribusi nya apapun itu yang Anda lihat disini.

Tutorialnya kali ini saya akan mengangkat lagi tulisan dahulu, ya tulisan usang yang mungkin sudah terlupakan, apakah Anda masih ingat artikel Css Efek Sudut Terlipat disana kita dapat menciptakan bagaimana membuat sudut unik tanpa bantuan gambar sedikitpun
Mengambil sampel disana, kita lanjut Bagaimana Memasang Klip Pada Gambar Dan Background melalui Css.

Kali ini saya membutuhkan gambar kecil sebagai pendukung yaitu clip, ini hasil akhirnya :

clip-gambar.jpg
Contoh pemasangan clip pada gambar


clip-bg.jpg
Contoh pemasangan clip pada Background


Css Kode yang digunakan pada contoh di atas adalah sama, di akhir artikel ini kita dapat lihat demo langsung.

Selektor utama yang saya pilih disini ialah .clip dengan bantuan selektor lain seperti p ( guna mengatur isi ) dan :before ( guna mengatur clip ), hasil pertama

.clip { display:block; }
.clip p { background: #fff; margin;0; padding:10px; border:1px solid #eee; }
.clip:before{ position: absolute; content: ' '; height:84px; width:45px; top:-5px; left:30px; background: url(paper-clip. png) no-repeat; }


Dengan penerapan css diatas dengan objek gambar, hasilnya saya tidak menemukan clip yang menjadi fokus, saya berpikir kemana clip tersebut bersembunyi mungkin di balik gambar atau keluar body disebabkan position absolutenya yang terlalu jauh, ternyata perkiraan ku salah, setelah saya geser layar ponsel, saya melihat clipnya ada tapi keluar selektor .clip, ia berada tepat di ujung kiri atas, baru saya ingat bahwa css utama wapsite ini pada body saya menerapkan position:relative jadi wajar clip tersebut berada disana, untuk mengatasi hal ini saya juga menerapkan css position tersebut pada selektor target yaitu .clip, seperti ini

.clip {position: relative; display: block; }


display: block yang saya gunakan hanya untuk mem-block gambar agar tidak mengganggu Element lain, jika Anda menerapkan gambar lebih dari satu senang sekali Anda gunakan inline-block atau inline-table.

Css akhir :

<style>
/* css clip */
.clip {position: relative;
	display: block;
}
.clip p { background: #fff; margin;0; padding:10px; border:1px solid #eee;
}
.clip:before{
	position: absolute;
	content: ' ';
height:84px;
	width:45px;
	position:absolute;
	top:-5px;
	left:30px;
	background: url(paper-clip. png) no-repeat;
}
</style>


* Download paper-clip.png

<div class="clip"><p>Cara memasang clip pada background dengan css</p></div>


Demikian mohon kritik dan saran, Terima kasih.



Cara Memasang Clip Pada Background Gambar Dengan Css Rated 4.5/5 based on 144 reviews
Diposkan pada 06-05-2016 07:35
Tags: css , mwb , xtgem
stepstep
30-05-2016 18:57

Mantap gan

stepstep
30-05-2016 18:56

Artikel yang keren nih :)

RifkyUchiha
06-05-2016 10:06

wah min, ente skarang rajin post lagi, huebbat

Mywapmaster (Author)
06-05-2016 14:18

Rajin post dibilang hebat, ente pinterest jg ngelawak :D

Mywapmaster (Author)
06-05-2016 08:03

Kode p dapat di ganti misal .navigation dst

Please login in order to post comments: Login | Signup


Close ×

Info

Note :

Do Not Copy Code Using Translator.
( Jangan Copy Code Menggunakan Translator Bahasa)

Please Like This Page

Terima Kasih