css paper

osc blog (status)

by secretgspot

HTML

<div class="page">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum.
        </p>
        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>

CSS

/* stripe 81cbbc */

body {
    background: #666;
    margin-top: 30px;
}

.page {
    font-family: 'Just Another Hand', cursive;
    width: 700px;
    position: relative;
    margin: auto;
    padding: 9px 0;
    color: #212121;
    
    -webkit-border-bottom-left-radius: 20px 500px;
    -webkit-border-bottom-right-radius: 500px 30px;
    -webkit-border-top-right-radius: 5px 100px;
    
    -moz-border-radius-bottomleft: 20px 500px;
    -moz-border-radius-bottomright: 500px 30px;
    -moz-border-radius-topright: 5px 100px;    
    
    border-radius-bottomleft: 20px 500px;
    border-radius-bottomright: 500px 30px;
    border-radius-topright: 5px 100px;
    
    background: #fcf59b;
    background: 
        -webkit-gradient(
            linear,
            left top, left bottom,
            from(#81cbbc),
            color-stop(2%, #fcf59b)
        );
        
    background: 
        -moz-repeating-linear-gradient(
            top,
            #fcf59b,
            #fcf59b 38px,
            #81cbbc 40px
        );
        
    background: 
        repeating-linear-gradient(
            top,
            #fcf59b,
            #fcf59b 38px,
            #81cbbc 40px
        );        
        
    -webkit-background-size: 100% 40px;
    
    -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    
}

.page:before {
    content: ' ';
    background: url(tape.png) no-repeat;
    width: 129px;
    height: 38px;
    position: absolute;
    top: -15px;
    left: 40%;
    display: block;
}

.page p {
    padding: 0 100px;
    line-height: 40px;
    margin-bottom: 40px;
    font-size: 30px;
}