Cheesetoast » paper http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.15 Lined Paper with CSS http://www.cheesetoast.co.uk/css-lined-paper/ http://www.cheesetoast.co.uk/css-lined-paper/#comments Thu, 11 Apr 2013 23:06:37 +0000 http://www.cheesetoast.co.uk/?p=1140 Continuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper. Basically we use a repeat CSS3 gradient to create the lines on the page.┬áRead … Continue reading

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
Lined PaperContinuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper.

Basically we use a repeat CSS3 gradient to create the lines on the page. Read more about CSS gradients and stop colours from Dynamicdrive.

View the demo on codepen. Here’s the code:

.page {

/* Setup the basic presentation of the div */
font-family: 'Just Another Hand', cursive;
width: 700px;
position: relative;
margin: auto;
padding: 15px 0;
color: #212121;

/* Curl the corners to make it look more like paper */
-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;

/* Set the background */
background: white;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#333),
color-stop(2%, white)
);

background:
-moz-repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

background:
repeating-linear-gradient(
top,
#fff,
#fff 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);

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

Original article on NetTuts.

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-lined-paper/feed/ 0