Skip to content

Instantly share code, notes, and snippets.

@rlemon

rlemon/demo.markdown

Created February 24, 2012 14:28
Show Gist options
  • Save rlemon/1901237 to your computer and use it in GitHub Desktop.
Save rlemon/1901237 to your computer and use it in GitHub Desktop.
Download ZIP
Paper in CSS
Raw
index.html
<html>
<head>
<style>
body {
padding: 20px;
}
h4 {
color: #cd0000;
font-size: 42px;
letter-spacing: -2px;
}
</style>
<link rel="stylesheet" type="text/css" href="paper.css" />
</head>
<body>
<h4>Notes</h4>
<ul class='paper'>
<li>Eat Breakfeast</li>
<li>Feed Pugsly, the cow</li>
<li>Sit Down</li>
<li>Eat lunch</li>
<li>Call mom</li>
<li>Tweet about feeding my cow, pugsly</li>
<li>Join a hangout in google+</li>
<li>Prepare Dinner</li>
<li>Eat Dinner</li>
<li>Get ready for bed</li>
<li>Go to bed</li>
</ul>​
</body>
</html>
Raw
paper.css
.paper {
border: 1px solid #dedede;
color: #555;
font-family: courier, monospace;
font-size: 22px;
padding: 0px;
width: 500px;
}
.paper li {
border-bottom: 1px dotted #ccc;
list-style: none;
padding: 10px 10px 10px 55px;
position: relative;
text-transform: capitalize;
}
.paper li:before {
border-left: 3px double #ffaa9f;
content: '';
height: 110%;
left: 35px;
position: absolute;
top: -5%;
}
.paper li:hover {
background-color: #f0f0f0;
moz-transition: all 0.2s;
ms-transition: all 0.2s;
o-transition: all 0.2s;
webkit-transition: all 0.2s;
}​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment