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.....
0 komentar:
Posting Komentar
Terima kasih atas kunjungannya, Semoga artikel di atas bisa bermanfaat.
Silakan komentar sesuai dengan artikel yang di sajikan!!!!
terima kasih.
andylaoe.blogspot.com