Skip to content

Instantly share code, notes, and snippets.

@rondevera

rondevera/taped-paper.html

Created April 7, 2011 13:59
Show Gist options
  • Save rondevera/907819 to your computer and use it in GitHub Desktop.
Save rondevera/907819 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
taped-paper.html
<html lang="en">
<head>
<style>
div {
position: relative;
display: inline-block;
margin: 2em;
padding: 5em;
background: #fcfcfc;
background: -webkit-gradient(linear, left top, left bottom,
from(#fcfcfc), to(#fff));
background: -moz-linear-gradient(top, #fcfcfc, #fff);
background: -webkit-linear-gradient(top, #fcfcfc, #fff);
background: linear-gradient(top, #fcfcfc, #fff);
border: 1px solid #e9e9e9;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: #666;
}
div::after {
position: absolute;
left: 4em;
top: -1em;
display: block;
width: 5em;
height: 2em;
background: #f9f9f9;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(240, 240, 240, 0.75)), to(rgba(248, 248, 248, 0.75)));
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(248, 248, 248, 0.75));
background: -webkit-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(248, 248, 248, 0.75));
background: linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(248, 248, 248, 0.75));
border-left: 1px dashed #fff;
border-right: 1px dashed #fff;
content: "";
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
</style>
</head>
<body>
<div>All CSS.
<!-- Based on: http://www.tutorialshock.com/tutorials/fancy-css3-boxes/ -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment