Masih belajar dari blognya Bang Zuldesign di belajarwebdesign, kali ini chekmad ingin memindahkan sebagian tulisan bang Zul di mari.
Membuat Efek kertas dengan CSS 3 itu judul yang di buat bang Zuldesign di Blognya dan chekmad ingin mengutip artikel tersebut sebagai bahan belajar dan catatan chekmad agar tidak lupa. Buat rakan-rakan yang ingin bersama belajar mari kita mulai.
Dalam artikel blognya bang Zul coba mengembangkan efek membuat kertas dengan menggunakan CSS 3, bukan dengan menggunakan image.
Kita mulai dengan membuat HTML terlebih dahulu :
Lanjut menggunakan CSS untuk membuat Paper nya
Langkah selanjutnya kita akan membuat garis-garis pada paper yang kita buat tadi serta menentukan besaran ukuran dari garis dan menambahkan box shadow.
Tambahkan Kode CSS ini pada class paper yang telah kita buat
Sehingga CSS nya menjadi seperti ini :
Dan hasilnya seperti ini :
Nah efek kertas sudah jadi selanjutnya kita buat garis pinggir pada kertas, Kata Bang Zul kita akan menggunakan Pseudo element :
Akhirnya jadi dah efek kertas dengan menggunakan CSS3, Chekmad sangat berterima kasih atas panduan di blognya bang Zul design atas pengetahuan CSS3 nya
Membuat Efek kertas dengan CSS 3 itu judul yang di buat bang Zuldesign di Blognya dan chekmad ingin mengutip artikel tersebut sebagai bahan belajar dan catatan chekmad agar tidak lupa. Buat rakan-rakan yang ingin bersama belajar mari kita mulai.
Dalam artikel blognya bang Zul coba mengembangkan efek membuat kertas dengan menggunakan CSS 3, bukan dengan menggunakan image.
Kita mulai dengan membuat HTML terlebih dahulu :
artikel di buat dengan menggunakan sintak class “paper”, lalu isi artikel yang terdiri dari “p”<
article
class
=
"paper"
>
<
p
>This is zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.</
p
>
<
p
>Here are the vegetables required:
<
ul
>
<
li
>Potato</
li
>
<
li
>Carrot</
li
>
<
li
>Broccoli</
li
>
<
li
>Pumpkin</
li
>
<
li
>Squash</
li
>
<
li
>Peas</
li
>
<
li
>Beans</
li
>
<
li
>Corn</
li
>
<
li
>Cabbage</
li
>
</
ul
></
p
>
<
p
>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. <
Rudy
Azhar. </p>
</
article
>
Lanjut menggunakan CSS untuk membuat Paper nya
dan hasilnya akan seperti di bawah ini :.paper {
background-color
:
#fff4c0
;
margin
:
50px
auto
;
position
:
relative
;
width
:
492px
;
padding
:
48px
24px
24px
84px
;
}
Langkah selanjutnya kita akan membuat garis-garis pada paper yang kita buat tadi serta menentukan besaran ukuran dari garis dan menambahkan box shadow.
Tambahkan Kode CSS ini pada class paper yang telah kita buat
background-image
: -webkit-linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-image
: -moz-linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-image
:
-0
-linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-image
: linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-
size
:
1px
23px
; box-shadow:
0
1px
3px
rgba(
0
,
0
,
0
, .
5
);
box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,.
25
);
.paper {
background-color
:
#fff4c0
;
background-image
: -webkit-linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-image
: -moz-linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-image
:
-0
-linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-image
: linear-gradient(
top
,
#dbe8bc
0%
,
#dbe8bc
5%
,
transparent
5%
,
transparent
100%
);
background-
size
:
1px
23px
; box-shadow:
0
1px
3px
rgba(
0
,
0
,
0
, .
5
);
box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,.
25
);
margin
:
50px
auto
;
position
:
relative
;
width
:
492px
;
padding
:
48px
24px
24px
84px
;
}
Nah efek kertas sudah jadi selanjutnya kita buat garis pinggir pada kertas, Kata Bang Zul kita akan menggunakan Pseudo element :
Bila anda ingin menambah lengkungan pada kertas maka tinggal menambahkan kode di bawah ini :.paper:after {
border-left
:
1px
solid
rgba(
255
,
0
,
0
,.
2
);
border-right
:
1px
solid
rgba(
255
,
0
,
0
,.
2
);
bottom
:
0
;
content
:
''
;
left
:
58px
;
position
:
absolute
;
top
:
0
;
width
:
2px
;
}
.paper:before {
bottom
:
8px
;
border-radius:
4px
;
box-shadow:
0
10px
10px
rgba(
0
,
0
,
0
,.
25
);
content
:
''
;
height
:
100px
;
max-width
:
300px
;
position
:
absolute
;
right
:
5px
;
width
:
300px
;
z-index
:
-10
;
-webkit-transform: rotate(
2
deg);
-moz-transform: rotate(
2
deg);
-ms-transform: rotate(
2
deg);
-o-transform: rotate(
2
deg);
transform: rotate(
2
deg);
}
Akhirnya jadi dah efek kertas dengan menggunakan CSS3, Chekmad sangat berterima kasih atas panduan di blognya bang Zul design atas pengetahuan CSS3 nya