Pair of Vintage Old School Fru
MY
WAPMASTER

Free Online Tools And Generator

Contact
my wapmaster selekeh

Tips
Jika mendapati halaman blank ( blank Page ) silahkan gunakan halaman VERSI DASAR Kami. ×

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.







Back to posts

Comments:

:

Kode p dapat di ganti misal .navigation dst




Total Average Rating:
star star
2.3 Out Of 5
Total Votes: 436

My Wapmaster
Rating 4 stars
Deskripsi
Author
Keywords Generator, Widget, wapmaster tools

Share
Navigation


My Wapmaster merupakan Wapsite layanan online umpan web, yang terdiri dari tools atau alat pengelola untuk blogger, serta tutorial publikasi lain yang berbasis web.
Css Konten jadi Menghilang Dengan Tombol Ex
sang begal komentar xtgem itu bernama badwords
Template sederhana responsive 3 kolom
cara ampuh memindah xt auth subscribe xtgem