A Great Little bit of CSS to give a element a PAPER NOTEBOOK look and feel

Home/Technology/A Great Little bit of CSS to give a element a PAPER NOTEBOOK look and feel

Enjoy as i did this code, it managed to hook of http://boagworld.com/.

I have been looking for something like this for ages – I tried to create it took but with no luck, sometimes you just have to accept you not as talented as you would hope.

Thanks god for google

Screen Shot 2013-11-15 at 13.39.13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
<style>
blockquote {
position: relative;
margin: 29px 0;
padding: 29px 29px 29px 58px;
line-height: 29px;
color: #5a4f43;
text-shadow: 0 1px 1px #fff;
background-color: #f2f6c1;
border: 1px solid #c3baaa;
border-color: rgba(195,186,170,0.9);
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.5),inset 0 0 5px #d8e071,0 0 1px rgba(0,0,0,0.1),0 2px rgba(0,0,0,0.02);
box-shadow: inset 0 1px rgba(255,255,255,0.5),inset 0 0 5px #d8e071,0 0 1px rgba(0,0,0,0.1),0 2px rgba(0,0,0,0.02);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-image: -webkit-radial-gradient(center, cover, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top, transparent 0, transparent 29px, rgba(239,207,173,0.7) 29px, rgba(239,207,173,0.7) 30px);
background-image: -moz-radial-gradient(center, cover, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.1) 90%),-moz-repeating-linear-gradient(top, transparent 0, transparent 29px, rgba(239,207,173,0.7) 29px, rgba(239,207,173,0.7) 30px);
background-image: -o-radial-gradient(center, cover, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.1) 90%),-o-repeating-linear-gradient(top, transparent 0, transparent 29px, rgba(239,207,173,0.7) 29px, rgba(239,207,173,0.7) 30px);
font-family: Georgia,serif;
font-size: 16px;
margin-bottom: 29px;
line-height: 30px;
}
blockquote:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
}
blockquote:before {
left: 28px;
width: 2px;
border: solid #efcfad;
border-color: rgba(239,207,173,0.9);
border-width: 0 1px;
}
blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}

 </style>
 </head>
 <body>
<blockquote>
<p>CloudWorksMedia.co.uk<p>
<p>Stevewinslow@cloudworksmedia.co.uk - 07795633933</p>
<ul>Please Think of Me for :</ul>
<li> Website Design</li>
<li> Website Refresh</li>
<li> Photos and Text update</li>
<li> Page creation</li>
<li> Logo and header design</li>
<li> Facebook,Google and Twitter Help</li>
<li> Training ( face to face or skype ) on all things internet</li>
</blockquote>
</body>
</html>


By | 2017-05-15T21:27:15+00:00 November 15th, 2013|Technology|0 Comments

Leave A Comment