Membuat Amplop + Perangko Dengan CSS3

Sudah pernah baca tulisan agenda saya di blog RudyAzhar ? Kalau belum coba baca dulu deh, Nah di postingan tersebut ada amplop yang dibuat dengan CSS3 plus perangkonya.

Jadi saya pingin berbagi cara pembuatannya disini. Dan yang saya bagikan hanya kode CSS & HTML saja, saya anggap kalian tahu penempatannya dimana Oke....

Markah HTML

Pertama kita buat dulu markah HTML sebagai berikut :

<div class="amplop">
<span class="perangko triangle"><img src="/wp-content/uploads/2011/10/perangko.jpg" alt="Perangko Sukarno"/></span>
 Dari: Rudy Azhar
<span class="to">Untuk: Keluargaku</span></div>

Satu-satunya gambar yang dipakai adalah gambar Soekarno sebagai perangkonya, tapi sisinya tetap memakai CSS3.

CSS untuk Amplop

Mari kita bentuk CSSnya, pertama sekali kita akan membuat CSS untuk amplopnya dulu.

.amplop {
position:relative; 
width:650px; 
height: 400px; 
margin-bottom:25px; 
border:15px solid transparent;
background: #feb;
}

Hasilnya akan seperti gambar dibawah ini :

Tahap Kedua kita tambahkan garis-garis berwarna biru dan merah pada setiap sisi amplop dengan menggunakan CSS3 linear-gradient.

background-image: -moz-linear-gradient(#feb, #feb), 
-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -ms-linear-gradient(#feb, #feb), 
-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -o-linear-gradient(#feb, #feb), 
-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -webkit-linear-gradient(#feb, #feb), 
-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;

Maka hasilnya akan berbentuk seperti ini.

Sampai tahap diatas sebenarnya amplop sudah jadi, tapi saya akan menambah sedikit pemanis dengan box-shadow agar amplop ada kesan timbul serta atribut untuk font.

font: italic 100% Georgia, serif;
box-shadow:2px 2px 13px rgba(0,0,0,.5);

CSS Keseluruhan untuk Amplop

.amplop {
position:relative; 
width:650px; 
height: 400px; 
margin-bottom:25px; 
border:15px solid transparent;
background: #feb;
background-image: -moz-linear-gradient(#feb, #feb), 
-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -ms-linear-gradient(#feb, #feb), 
-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -o-linear-gradient(#feb, #feb), 
-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -webkit-linear-gradient(#feb, #feb), 
-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;
font: italic 100% Georgia, serif;
box-shadow:2px 2px 13px rgba(0,0,0,.5);
}

Amplopnya sudah jadi, sekarang tinggal kita membuat perangko biar bisa dikirim via Pos...he...he...he... Sebenarnya nggak usah memakai perangko juga bisa, dengan memanfaatkan Kilat Khusus tapi demi menghemat biaya perangko bisa jadi alternatif.

CSS untuk Perangko

Untuk perangko sebaiknya kita cari dulu gambar yang sesuai, kalau sudah ketemu baru kita buat pinggirannya.

.amplop span.perangko {
background: #d8bb9d;
display: block;
float: right;
height: 136px;
margin-left: 20px;
padding: 5px;
width: 101px;
}
.amplop span.triangle {
background-image: -webkit-linear-gradient(45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -webkit-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb);
background-position: 0% 0;
background-repeat: repeat;
background-size: 10px 10px;
background-image: -o-linear-gradient(45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -o-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: -moz-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -moz-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: -ms-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -ms-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb);}

.amplop span.perangko img {
background: #d8bb9d;
display: block;
height: 126px;
padding: 5px;
width: 92px;
}

Untuk perangko ini belum sempurna dibuat karena hanya bagus jika dilihat dengan menggunakan brower Chrome, kalau dilihat menggunakan FireFox masih kurang bagus...he..he...he...

Lihat Demo secara Online →

Nah, udah jadi deh Amplop + Perangko yang siap dikirim lewat Pak Pos...he...he...he... Tapi kira-kira Pak Posnya nerima nggak ya karena semuanya dibuat dengan CSS3... wkwkwkwkwkwkwk.....

Posting lain yang berkaitan (label) CSS3