Menambahkan paper-clip pada element

kali ini kita akan bermain-main dengan selector :before dan :after. sebelumnya bagi yang belum tau selector ini, selector :before dan :after digunakan untuk menambahkan content sebelum atau sesudah element. pada kasus ini kita akan menambahkan sebuah paper clip pada element.

Demontrasi

HTML

kita mulai dengan membuat sebuah div dengan class “paper” (tanpa tanda kutip) dan kita tambahkan sedikit random text

<div class="paper">
	<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor 		congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. 
Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
	</p>
</div>

CSS

pertama-tama kita tambahkan background pada class “paper” agar terlihat seperti kertas sungguhan. (download background kertas disini). kita set juga width dan height “paper”

.paper{
	background:url(paper.jpg);
	height:350px;
	padding:20px;
	position:relative
	width:300px;
}

kita set position “paper” dengan relative karena kita akan menambahkan position:absolute pada selector :before yang akan kita buat.

Baca Juga:  Membuat Breadcrumb (Navigasi) sederhana dengan CSS

sekarang adalah bagian inti dari tutorial ini, menambahkan selector :before pada class “paper”

.paper:before{
	background:url(paperclip.png);
	width:45px;
	height:84px;
	position:absolute;
	top:-20px;
	left:20px;
}

kita atur width dan height sesuai ukuran gambar paper clip (download gambar paper clip disini)

jika kita jalankan file htmlnya maka anda tidak akan melihat paper clip karena kita tidak menambahkan konten apapun pada selector before, untuk itu kita perlu menambahkan string kosong atau spasi pada property content

.paper:before{
	background:url(paperclip.png);
	content:' ';
	width:45px;
	height:84px;
	position:absolute;
	top:-20px;
	left:20px;
}

sekarang anda akan melihat sebuah paperclip terselip diatas kertas.

Demontrasi

Komentar

comments

Ariona Rian

Penikmat proses webdesign, karena aktifitas desain web memanfaatkan kedua belah otak. Selain proses desain proses Coding juga sangat menyenangkan dan bermanfaat untuk mengasah logika.

grain storage instagram türk takipçi satın al