Kompetisi Kopizine

CONTACT ME

CONTACT ME

Disini saya
cukup
mengunakan
1 tag id untuk
1 amplop
dengan
atribut
perangko,
text, dan
form contact
us

HTML Code

<div id="tes1"><p>CONTACT ME</p></div>

CSS Code

#tes1 {
    background-attachment: scroll;
    background-clip: padding-box, border-box;
    background-color: #F9F9F9;
    background-image: -moz-linear-gradient(#F9F9F9, #F9F9F9), -moz-repeating-linear-gradient(-45deg, #DD5500, #DD5500 15px, transparent 15px, transparent 30px, #1155CC 30px, #1155CC 45px, transparent 45px, transparent 60px);
    background-origin: border-box;
    background-position: 0 0;
    background-size: auto auto;
    border: 12px solid transparent;
    box-shadow: 0 0 15px -6px #111111;
    -webkit-box-shadow: 0 0 15px -6px #111111;
    bottom: 12em;
    height: 20em;
    margin: auto auto 4em;
    position: relative;
    width: 48em;
    background-image: -webkit-linear-gradient(#F9F9F9, #F9F9F9), -webkit-repeating-linear-gradient(-45deg, #DD5500, #DD5500 15px, transparent 15px, transparent 30px, #1155CC 30px, #1155CC 45px, transparent 45px, transparent 60px);

}

#tes1:after {
    background: none repeat scroll 0 0 #EEEEEE;
    content: "";
    display: block;
    height: 167px;
    left: 1em;
    overflow: hidden;
    position: relative;
    top: -235px;
    width: 394px;
} 

#tes1:before {
    background: none repeat scroll 0 0 #EEEEEE;
    box-shadow: 0 44px 0 0 #EEEEEE;
    -webkit-box-shadow: 0 44px 0 0 #EEEEEE;
    content: "";
    display: block;
    height: 36px;
    left: 1em;
    overflow: hidden;
    position: relative;
    top: 3em;
    width: 279px;
}

#tes1 p {
    display: block;
    font-size: 141%;
    height: 100%;
    left: 0.7em;
    overflow: hidden;
    position: relative;
    text-align: left;
    top: -1em;
    width: 100%;
}

#tes1 p:after {
    background-attachment: scroll;
    background-clip: padding-box, border-box;
    background-color: #F9F9F9;
    background-origin: border-box;
    background-position: 0 0;
    background-size: 9px 9px;
    border: 5px solid transparent;
    color: #DDDDDD;
    content: "tipografi";
    display: block;
    float: right;
    font-size: 33px;
    height: 77px;
    margin-right: -4.1em;
    overflow: hidden;
    text-shadow: 0 4px 0 #DDDDDD, 0 31px 0 #DDDDDD, 0 36px 0 #DDDDDD;
    width: 108px;
    background-image: -moz-radial-gradient(12pt 39% , #8BB79D, #DDDDDD 266%), -moz-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 74%, #999686 75%, #999686), -moz-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 75%, #999686 75%, #999686);
    background-image:-webkit-radial-gradient(12pt 39% , #8BB79D, #DDDDDD 266%), -webkit-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 74%, #999686 75%, #999686), -webkit-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 75%, #999686 75%, #999686);
    background-image: -ms-radial-gradient(12pt 39% , #8BB79D, #DDDDDD 266%), -ms-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 74%, #999686 75%, #999686), -ms-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 75%, #999686 75%, #999686); 
    background-image: -o-radial-gradient(12pt 39% , #8BB79D, #DDDDDD 266%), -o-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 74%, #999686 75%, #999686), -o-linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 75%, #999686 75%, #999686);
    background-image: radial-gradient(12pt 39% , #8BB79D, #DDDDDD 266%), linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 74%, #999686 75%, #999686), linear-gradient(-45deg, #999686 25%, transparent 25%, transparent 75%, #999686 75%, #999686);
}

#tes1 p:before {
    background-color: rgba(242, 34, 34, 0.9);
    border: 0 solid #FF2222;
    color: #F9F9F9;
    content: "KOPIZINE";
    display: block;
    float: right;
    font-family: verdana;
    font-size: 1.2em;
    font-weight: bold;
    left: -61px;
    overflow: hidden;
    padding: 6px 8px 6px 6px;
    position: relative;
    top: 199px;
    box-shadow: 14px 28px 0 -15px rgba(242, 34, 34, 0.9), -14px -28px 0 -15px rgba(242, 34, 34, 0.8);
    -webkit-box-shadow: 14px 28px 0 -15px rgba(242, 34, 34, 0.9), -14px -28px 0 -15px rgba(242, 34, 34, 0.8);
 -webkit-transform:rotate(-19deg);
 -moz-transform:rotate(-19deg);
 -webkit-transiton:color .3s ease-in;
}

N4