start of my textbox sticker

dabblet.css

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);



textbox 
{
font:20px 'Gloria Hallelujah', cursive;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	background-color:white;
	border:0px solid #E9E9E9;
	padding: 2px 7px 0px 7px;
	width:10em;
	height:5em;
}



box-shadow: 3px 3px 10px 5px #000;
body:before {font:20px 'Gloria Hallelujah', cursive;   
  content: "";
  position: fixed; 
  top: -10px;
  left: 0;
  width: 100%; 
  height: 10px;
  z-index: 100;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
     }      
 
 #box {
 font:20px 'Gloria Hallelujah', cursive;
 position: relative; 
 width: 60%;
 background: #ddd; 
 -moz-border-radius: 4px;
 border-radius: 4px; 
 padding: 2em 1.5em;
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;  
 line-height: 1.5;  
 margin: 60px auto;
 }

#box:before, #box:after {  
z-index: -1;
position: absolute;
content: "";  
bottom: 15px;  
left: 10px;  
width: 50%;   
top: 80%;  
max-width:300px;  
background: rgba(0, 0, 0, 0.7);  
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); 
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);  
-webkit-transform: rotate(-3deg);   
-moz-transform: rotate(-3deg); 
-o-transform: rotate(-3deg);  
-ms-transform: rotate(-3deg); 
transform: rotate(-3deg);}

#box:after {  
-webkit-transform: rotate(3deg);  
-moz-transform: rotate(3deg);  
-o-transform: rotate(3deg);  
-ms-transform: rotate(3deg);  
transform: rotate(3deg);  
right: 10px;  
left: auto;
}

/* start of my textbox sticker */

sticker-shadow:3px 3px 10px 5px #000;
 body:before {
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
     }       
 
 #sticker {
 font:20px 'Gloria Hallelujah', cursive;
 position: relative; 

 background: red; 
 -moz-border-radius: 4px;
 border-radius: 1px; 
 
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;  
 line-height: 1.5;  
  }
 




#sticker:before {  
z-index: 0;
 content: ' ';
  
    position: absolute;
    left: 25px;
    top: -10px;
    width: 50px;
    height: 15px;
    z-index: 4;
    background-color: rgba(243,245,228,0.5);
 
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}

#sticker:after {  
-webkit-transform: rotate(3deg);  
-moz-transform: rotate(3deg);  
-o-transform: rotate(3deg);  
-ms-transform: rotate(3deg);  
transform: rotate(3deg);  
right: 10px;  
left: auto;
}

dabblet.html

<div id="box">
Username
<br>
<br>
<div id="sticker">
Username <textbox id="textbox"> Username</textbox>
</div>
<br>
<br>
Password <textbox id="textbox"> Password</textbox>
<h4>Slick effects with CSS3 box-shadow</h1><p>Note the top shadow applied to the <code>body</code> and also the also the also the also the a</p></div>

settings.json

{"view":"separate","fontsize":"150","seethrough":"","prefixfree":"1","page":"all"}