3/22/2015

Efek kertas terselip dengan CSS

HOME

EBOOK

FOLLOW

TUTORIAL

Free 74-409 Exam e-Book

Prepare for 74-409 exams. Download Free e-Book Now!

Efek kertas
terselip dengan
CSS
Oleh Rian Ariona 1 Jul 2013

TERBARU

FAVORIT

Mengenal CSS3
Viewport unit
16 Feb 2015

Remote Debugging di
Share Artikel:

13

Android dan iPhone

5 Jan 2015

27

Menambahkan
dukungan Retina

Efek yang akan kita buat

Display pada web

6 Oct 2014

pada tutorial ini adalah

efek kertas yang terselip.
Efek ini juga merupakan
contoh lain dari
penerapan PseudoElement Before dan After

Menyesuaikan warna
element dengan
warna Background
19 Sep 2014

Lupakan CSS Prefix,

Gunakan

yang sebelumnya telah

Autoprefixer

anda pelajari dalam

9 Sep 2014

tutorial berjudul
Mengenal lebih dalam
CSS Pseudo Element
dan beberapa kasus yang
pernah dibahas, seperti
pada tutorial
Membuat CSS Tooltip
Kembali ke pembahasan
utama, kali ini kita akan
membuat sebuah efek
kertas yang terselip ke
dalam lubang. Berikut ini
adalah screenshot dari

ariona.net
Suka

2.464orangmenyukaiariona.net.

efek yang kita bicarakan

jika anda masih belum
memiliki gambarannya.

PluginsosialFacebook

http://www.ariona.net/efek-kertas-terselip-dengan-css/

1/7

3/22/2015

Efek kertas terselip dengan CSS

BERLANGGANAN LEWAT
EMAIL

Dapatkan informasi artikel

lewat email anda dengan
mendaftarkannya di
bawah ini

Email Address

DEMONS TRAS I

BERLANGGANAN

Markup HTML
Untuk markup HTMLnya

FRIENDS

sederhana saja, kita hanya

membutuhkan sebuah div
sebagai objek kertas, saya

BELAJAR WEBDESIGN

beri kelas kertas pada div

tersebut. Saya juga

CREATIFACE

tambahkan sedikit
random/dummy text pada

TUTORIAL WEBDESIGN

kertas tersebut.

<divclass="kertas">
<h1>LoremIpsumDolorSitAmet
<p>
Loremipsumdolorsitamet,consecteturadipisicingelit.Utatconsecteturofficiaetaccusamusinventoredolorcupiditatetemporefugaaliasaliqu
</p>
</div>

CSS
Pertama-tama kita beri
style terlebih dahulu
kertas yang akan kita
selipkan nantinya beserta
background dari bodynya.

body{
background:#d8d8d8
}
.kertas{
background:white
width:400px
margin:20pxauto
padding:20px
position:relative
fontfamily:cambria,serif
boxshadow:01px10pxrgba(0,
}

http://www.ariona.net/efek-kertas-terselip-dengan-css/

2/7

3/22/2015

Efek kertas terselip dengan CSS

Selanjutnya adalah efek

utama yang akan kita
buat, Tekniknya sangat
sederhana, kita buat
tambahkan pseudo
element pada class kertas,
yang akan menjadi efek
lubang untuk
menyelipkan kertas.

.kertas::before,.kertas::after{
background:#d8d8d8
content:""
width:100px
height:50px
position:absolute
top:25px
boxshadow:05px10px7pxrgba
}

style tersebut akan

membuat sebuah box
yang akan kita gunakan
untuk menutupi ujungujung kertas dan pada
style selanjutnya kita
akan mengatur rotasi dari
tiap ujung.

.kertas::before{
left:50px
webkittransform:rotate(45deg
moztransform:rotate(45deg)
mstransform:rotate(45deg)
otransform:rotate(45deg)
transform:rotate(45deg)
}
.kertas::after{
right:50px
webkittransform:rotate(45deg
moztransform:rotate(45deg)
mstransform:rotate(45deg)
otransform:rotate(45deg)
transform:rotate(45deg)
}

Silahkan simpan
pekerjaan anda dan
perhatikan apa yang
ditampilkan dalam
http://www.ariona.net/efek-kertas-terselip-dengan-css/

3/7

3/22/2015

Efek kertas terselip dengan CSS

browser.

Efek Selotip
Dengan teknik yang sama,
kita juga bisa membuat
efek kertas yang
menempel dengan
menggunakan selotip di
setiap ujungnya. yang
perlu kita lakukan
hanyalah merubah tinggi
dari pseudo element dan
memberi background yang
transparan

.kertas::before,.kertas::after{
background:rgba(255,255,255,.5
content:""
width:100px
height:25px
position:absolute
top:10px
boxshadow:05px10px7pxrgba
}

Dalam contoh di atas saya

memberikan warna
transparan dengan system
rgba, anda bisa
menggunakan
background-image dan
membuat gambar selotip
yang lebih realistis.

Dipublish
dalam
kategori:
HTML & CSS

DenganTag
CSS3
PSEUDOELEMENT

RianAriona
Admin
ariona.net,
mendalami
dunia
informatika
sejak SMA,dan
memfokuskan
diri dibidang
desain grafis,
pemrograman
juga sangat
disenangi,
karena
memiliki
tantangan
tersendiri.

http://www.ariona.net/efek-kertas-terselip-dengan-css/

4/7

3/22/2015

Efek kertas terselip dengan CSS

8 thoughts on Efek
kertas terselip dengan
CSS

Suhainda Librado
15 July 2013 at 9:56 pm
widiw.. mantep amat
thx
Reply

Adittya Reg as
16 July 2013 at 6:26 am
masa kalau tanya
pembuatan css kayak gini,
mainnya di notepad bukan?
terus formatnya apa, biar
bisa kita lihat
Reply

patrick
prasetyo
Prasetyo
14 August 2013 at
8:20 am
Simpan dengan
Format HTML,
kalau Notepad ++
bisa langsung drop
down.
Tapi kalau yang
Notepad biasa,
ganti kategori
menjadi all files
lalu di di filename
beri nama sesuai
keinginan dan
akhiri dengan
ekstensi html.
contoh :
percobaan.html
Reply

Edi Pe'A
19 July 2013 at 12:28 pm
wow..
menakjubkan tak
sembarang orang bisa
nihhh
sankyuuuu..
Reply

Hidayat Mundana
17 September 2013 at 6:46 pm
Bagaimana cara
mengaplikasikannya di
wordpress?
Bisakah di aplikasikan
secara langsung pada post
dan pages?
Reply

http://www.ariona.net/efek-kertas-terselip-dengan-css/

5/7

3/22/2015

Efek kertas terselip dengan CSS

Rian Ariona
17 September 2013 at
8:43 pm
ini kan masih CSS,
ya tinggal
ditambahkan aja
ke style.css nya
dan sesuain sama
markup post/page
Reply

Hidayat
Mundana
29
December
2013 at 4:21
pm
cara
menyesuaikan
markup
post/page
gimana
mas Rian?
Masih
pemula
nih

Beben Koben
19 October 2013 at 9:28 pm
template yg elegan
Reply

Tinggalkan Komentar
Anda

Enteryourcommenthere...

Artikel lain yang

mungkin anda sukai

Oleh Rian Ariona 16 Feb 2015

Mengenal CSS3
Viewport unit
Dalam CSS3 terdapat unit/satuan
baru untuk menentukan suatu
ukuran, jika sebelumnya kita telah

http://www.ariona.net/efek-kertas-terselip-dengan-css/

6/7

3/22/2015

Efek kertas terselip dengan CSS

mengenal unit persentase untuk
mendapatkan ukuran yang
Baca selengkapnya

Oleh Rian Ariona 21 Feb 2013

Diupdate 6 Feb 2014

caniuse.com,
agar tidak ragu
menggunakan
HTML5 & CSS3
Masih ragu untuk menggunakan
fitur-fitur terbaru dari HTML5 dan
CSS3 karena kompatibilitas tiap
browser? cek di situs caniuse.com
untuk melihat
Baca selengkapnya

Oleh Rian Ariona 21 Feb 2013

Diupdate 2 Jul 2014

Efek Redup
dengan CSS3
Box-shadow
Ada banyak sekali efek yang bisa
dihasilkan oleh CSS3 box-shadow
selain hanya membuat efek shadow
biasa seperti yang pernah saya
Baca selengkapnya

Oleh Rian Ariona 16 Feb 2013

Diupdate 6 Feb 2014

Link-link Pilihan
Minggu Ini #2
1. AppJs AppJs adalah framework
untuk membuat aplikasi Desktop
dengan menggunakan HTML-CSS
dan Javascript. (diperkuat dengan
Node.js) 2. Apakah Responsive
Baca selengkapnya

copyright 2015 by ariona.net | proudly powered by Wordpress

41FLARES131270041FLARES
Shared via Ivy Get yours now free

http://www.ariona.net/efek-kertas-terselip-dengan-css/

7/7