Membuat Amplop + Perangko Dengan CSS3

<p>Sudah pernah baca tulisan <a href="http://rudyazhar.com/2011/surabaya-15-oktober-2011/">agenda saya</a> 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....<a name='more'></a></p><h3>Markah HTML</h3><p>Pertama kita buat dulu markah HTML sebagai berikut :</p><pre><code><div class="amplop"><br /><span class="perangko triangle"><img src="/wp-content/uploads/2011/10/perangko.jpg" alt="Perangko Sukarno"/></span><br /> Dari: Rudy Azhar<br /><span class="to">Untuk: Keluargaku</span></div></code></pre><p>Satu-satunya gambar yang dipakai adalah gambar Soekarno sebagai perangkonya, tapi sisinya tetap memakai CSS3.</p><h3>CSS untuk Amplop</h3><p>Mari kita bentuk CSSnya, pertama sekali kita akan membuat CSS untuk amplopnya dulu.</p><pre><code>.amplop {<br />position:relative; <br />width:650px; <br />height: 400px; <br />margin-bottom:25px; <br />border:15px solid transparent;<br />background: #feb;<br />}</code></pre><p>Hasilnya akan seperti gambar dibawah ini :</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii0xqELVBfMAX40P5RhAPtQwt2rMm1ZLhBS1maAytxwUt-_jf0s9werwASRMfJgERF10dl9MmS2mMBsDCJ6xNzEHd30qw6anmd-y9QJGo7RGda400a0m1yKjR-EoR4kHAkK9oM2rTHTUg/s1600/amplop1.JPG" imageanchor="1" style="margin-left:1em; margin-right:1em"><img alt="Amplop" border="0" class="aligncenter" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii0xqELVBfMAX40P5RhAPtQwt2rMm1ZLhBS1maAytxwUt-_jf0s9werwASRMfJgERF10dl9MmS2mMBsDCJ6xNzEHd30qw6anmd-y9QJGo7RGda400a0m1yKjR-EoR4kHAkK9oM2rTHTUg/s400/amplop1.JPG" width="400"/></a></div><p>Tahap Kedua kita tambahkan garis-garis berwarna biru dan merah pada setiap sisi amplop dengan menggunakan <abbr title="Cascading Style Sheet 3">CSS3</abbr> <code>linear-gradient</code>.</p><pre><code>background-image: -moz-linear-gradient(#feb, #feb), <br />-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-image: -ms-linear-gradient(#feb, #feb), <br />-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-image: -o-linear-gradient(#feb, #feb), <br />-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-image: -webkit-linear-gradient(#feb, #feb), <br />-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-clip: padding-box, border-box;<br />background-origin: border-box;</code></pre><p>Maka hasilnya akan berbentuk seperti ini.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yEOu0yR4Kh4W3iRhJzQHTuW-xJIZdsR66ItfuuqcTun-lwwXU2WAYzV3pP6lgD5Iubx9R3jXre61rLLH_FDU255Q544S0jB_ouZyA8lkBPldPnW_tZ3sPuTxLfOoNKyGXjnaBQ6ks6I/s1600/amplop2.JPG" imageanchor="1" style="margin-left:1em; margin-right:1em"><img alt="Amplop Border" border="0" class="aligncenter" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yEOu0yR4Kh4W3iRhJzQHTuW-xJIZdsR66ItfuuqcTun-lwwXU2WAYzV3pP6lgD5Iubx9R3jXre61rLLH_FDU255Q544S0jB_ouZyA8lkBPldPnW_tZ3sPuTxLfOoNKyGXjnaBQ6ks6I/s400/amplop2.JPG" width="400"/></a></div><p>Sampai tahap diatas sebenarnya amplop sudah jadi, tapi saya akan menambah sedikit pemanis dengan <code>box-shadow</code> agar amplop ada kesan timbul serta atribut untuk font.</p><pre><code>font: italic 100% Georgia, serif;<br />box-shadow:2px 2px 13px rgba(0,0,0,.5);</code></pre><h4>CSS Keseluruhan untuk Amplop</h4><pre><code>.amplop {<br />position:relative; <br />width:650px; <br />height: 400px; <br />margin-bottom:25px; <br />border:15px solid transparent;<br />background: #feb;<br />background-image: -moz-linear-gradient(#feb, #feb), <br />-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-image: -ms-linear-gradient(#feb, #feb), <br />-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-image: -o-linear-gradient(#feb, #feb), <br />-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-image: -webkit-linear-gradient(#feb, #feb), <br />-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);<br />background-clip: padding-box, border-box;<br />background-origin: border-box;<br />font: italic 100% Georgia, serif;<br />box-shadow:2px 2px 13px rgba(0,0,0,.5);<br />}</code></pre><p>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.</p><h3>CSS untuk Perangko</h3><p>Untuk perangko sebaiknya kita cari dulu gambar yang sesuai, kalau sudah ketemu baru kita buat pinggirannya.</p><pre><code>.amplop span.perangko {<br />background: #d8bb9d;<br />display: block;<br />float: right;<br />height: 136px;<br />margin-left: 20px;<br />padding: 5px;<br />width: 101px;<br />}<br /><br />.amplop span.triangle {<br />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);<br />background-position: 0% 0;<br />background-repeat: repeat;<br />background-size: 10px 10px;<br />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); <br />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); <br />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); <br />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);}<br /><br />.amplop span.perangko img {<br />background: #d8bb9d;<br />display: block;<br />height: 126px;<br />padding: 5px;<br />width: 92px;<br />}</code></pre><p class="bubble">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...</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2yJviTGQktWzdsjEMIP6eBO8M6H3fRlliuAqfID0FWB4_LY8OKhyphenhyphenSPnO0vlom1DfMKyTdJYepk_rRAD8ysJJ1sFbfzRd3uKfZ-5U16ZnhzXuuH2iXEmeu9xLhPtINOFu9GJACKGG5Mk/s1600/amplop%252Bperangko.JPG" imageanchor="1" style="margin-left:1em; margin-right:1em"><img alt="Amplop dan Perangko" border="0" class="aligncenter" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge2yJviTGQktWzdsjEMIP6eBO8M6H3fRlliuAqfID0FWB4_LY8OKhyphenhyphenSPnO0vlom1DfMKyTdJYepk_rRAD8ysJJ1sFbfzRd3uKfZ-5U16ZnhzXuuH2iXEmeu9xLhPtINOFu9GJACKGG5Mk/s400/amplop%252Bperangko.JPG" width="400"/></a></div><p><a href="http://jsfiddle.net/MVVJg/2/show/">Lihat Demo secara Online →</a><br/>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.....</p>

Posted by Hii Sekai