Skip to content

Instantly share code, notes, and snippets.

@zmmbreeze

zmmbreeze/bookstyle.css

Created October 25, 2013 05:25
Show Gist options
  • Save zmmbreeze/7149776 to your computer and use it in GitHub Desktop.
Save zmmbreeze/7149776 to your computer and use it in GitHub Desktop.
Download ZIP
book css style test
Raw
bookstyle.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="book">
<h1>背影</h1>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p>
<p>那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”</p>
</div>
<style type="text/css">
body {
}
.book {
position:relative;
font-size: 16px;
max-width: 680px;
padding: 0 1em;
margin: 2em;
border: 1px solid #DDD;
border-right-color: #AAA;
border-bottom-color: #AAA;
background: #FFF;
box-shadow:
0px 1px 0 #FFF,
1px 0px 0 #FFF,
1px 2px 0 #AAA,
2px 1px 0 #AAA,
3px 2px 0 #FFF,
2px 3px 0 #FFF,
4px 3px 0 #AAA,
3px 4px 0 #AAA;
}
.book:before {
content:"";
position:absolute;
top:0;
right:0;
border-width: 0 32px 32px 0;
border-style: solid;
border-color: #FFF #FFF #FBB556 #FBB556;
background: #FBB556;
-webkit-box-shadow:
0 1px 1px rgba(0,0,0,0.3),
-1px 1px 1px rgba(0,0,0,0.2);
box-shadow:
0 1px 1px rgba(0,0,0,0.3),
-1px 1px 1px rgba(0,0,0,0.2);
}
.book h1 {
color: #FBB556;
text-shadow:
1px 1px 1px #FFF,
0 0 0 #000,
0 1px 0 rgba(255, 255, 255, 0.8);
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment