Selamat Datang Di Blog Sederhana http://andylaoe.blogspot.com | Semoga Artikel-Artikel Yang Ada Bisa Bermanfaat | Terima Kasih Atas Kunjungannya.

Jumat, 29 Juni 2012

Pin It

Widgets

Membuat Amplop + Perangko Dengan CSS3


andylaoe.blogspot.com 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.....
Please Share it! :)

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
BLOG SEDERHANA

0 komentar:

Posting Komentar

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Terima kasih atas kunjungannya, Semoga artikel di atas bisa bermanfaat.

Silakan komentar sesuai dengan artikel yang di sajikan!!!!
terima kasih.


andylaoe.blogspot.com

Blog Teman

ALT/TEXT GAMBAR
 

About Me

Recent Posts

Recent Comments

| Blog Sederhana © 2012. All Rights Reserved | Template Style by Blog Sederhana .com | email adittia.wibowo@gmail.com | Back To Top |