Überlappende Papiere

#paper1, #paper2, #paper3 {
    display: block;
    width: 500px;
    height: 200px;
    background: #fff;
    margin: 50px auto 20px;
    border: 1px solid #fff;
    padding: 20px;
    -webkit-box-shadow:
        inset 0 0 15px #f9f9f9,
        0 0 5px #e5e5e5;
    -moz-box-shadow:
        inset 0 0 15px #f9f9f9,
        0 0 5px #e5e5e5;
    box-shadow:
        inset 0 0 15px #f9f9f9,
        0 0 5px #e5e5e5;
        
    color: #666;
    font: bold 10pt helvetica, arial, verdana, sans-serif;}
        
#paper1 {
    margin: 50px auto 20px;
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    zoom: 1;}
        
#paper2 {
    margin: -265px auto 0;
    -moz-transform: rotate(0.5deg);  
    -webkit-transform: rotate(0.5deg);  
    -o-transform: rotate(0.5deg);  
    -ms-transform: rotate(0.5deg);  
    transform: rotate(0.5deg);  
    zoom: 1;}
    
#paper3 {
    margin: -240px auto 100px;
    -moz-transform: rotate(-1.5deg);  
    -webkit-transform: rotate(-1.5deg);  
    -o-transform: rotate(-1.5deg);  
    -ms-transform: rotate(-1.5deg);  
    transform: rotate(-1.5deg);  
    zoom: 1;}

#paper3:focus {outline: none;}   

<div id="papers">
        <span id="paper1"></span>
        <span id="paper2"></span>
        <span contenteditable id="paper3">Click in this box and start typing on your computer's keyboard! Watch the keys depress :).</span>
</div>

Loading

Best view in firefox.

Excel-Formeln etc. *
zum Forum *

* in Bearbeitung

Feedback

∂ιє νєяgαηgєηнєιт нαт мι¢н zυ ∂єя ρєяѕση gємα¢нт ∂ιє ι¢н нєυтє вιη.