Ruled paper like background effect using CSS3

Posted in: css by musiitwa joseph 2016-02-01 at 03:17:43

image for Ruled paper like background effect using CSS3

Adding a background image that has lines for a paper is somehow easy but when it comes to making the text fit in between the lines is quite not easy. This is because most elements have default margins and padding and also there is a default line height for the text. We are going to remove the margins and padding of all the elements in the section which has the background image and also adjust the line height so that the words fit.

I have also added two pseudo elements that is before and after just to create a stack of papers and pin image to make the stack of paper appear as if it was attached on something.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PAPER LIKE BACKGROUND USING CSS</title>
<link type="text/css" rel="stylesheet" href="paper-like.css"/>
</head>
<body>
    
</br>
    <div class="paper">
        <img src="images/pin.png" alt=""/>
        <div>
            <!-- Content goes here-->
            <h3>Quotes</h3>
               <p>The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.

Helen Keller</p>

        </div>    
    </div>
</body>
</html>


css

.paper{
    /*you can change the background color*/
    background:#FFFFCA url(../images/horizontal_lines.png) repeat;
    width:250px;
    margin:30px auto;
    padding:30px 15px;
    border:1px solid #DDD;
    line-height:30px;
    position:relative;    
    box-shadow:0 0 10px #DDD;
    border-radius:4px;    
}
/*Turning all the default margin and padding to zero*/
.paper *{
    margin:0;
    padding:0;        
}
.paper img{
    position:absolute;
    right:0;
    top:-20px;
}

/*Leaving a blank line before the start of every heading*/
/*you can also do it for paragraphs*/
.paper h1, .paper h2, .paper h3, .paper h4, .paper h5, .paper h6{
    padding-top:30px;
}

/*Pseudo elements to create a stack of papers*/
.paper::before, .paper::after{
    background:#F4F4AB url(../images/horizontal_lines.png) repeat;
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;    
    box-shadow:0 0 5px #999;
}
.paper::before{        
    transform:rotate(5deg);
}
.paper::after{        
    transform:rotate(-5deg);        
}

Tags:
html

Search

Leave a comment

Fields with * are required
Your email address will not be displayed
5 + 1 =