Bardzo realistycznie wykonany notatnik. Autor zadbał o gradient w górnej części oraz o kilka kartek pod spodem, co daje lekki efekt trójwymiaru.
Źródło:
http://cssdeck.com/labs/notepad
HTML
<![CDATA[<!--DOCTYPE html-->
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Notepad</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="notepad">
<div class="notepad-heading">
<h1>Notepad</h1>
</div>
<blockquote>
The essence of the independent mind lies not in what it thinks, but in how it thinks.
— Christopher Hitchens
</blockquote>
<blockquote>
The best way to predict the future is to invent it.
— Alan Kay
</blockquote>
</div>
</body>
</html>]]>
CSS
<![CDATA[/*
* Copyright (c) 2012-2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* View the Sass/SCSS source at:
* http://www.cssflow.com/snippets/notepad/demo/scss
*
* Original PSD by Mathieu Berenguer: http://goo.gl/WYgk5
*/
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #3782b0;
}
/* Note: I didn't use borders because WebKit extends shadows underneath them, creating inconsistencies with other browsers. When the border is semi-transparent, as this snippet requires, it appears darker because of the shadow underneath it. */
.notepad, .notepad:before, .notepad:after {
background-color: white;
background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#e8e8e8 1px, transparent 1px);
background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#e8e8e8 1px, transparent 1px);
background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e8 1px, transparent 1px);
background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px, transparent 1px);
background-size: 1px 1px, 1px 1px, 23px 23px;
background-repeat: repeat-y, repeat-y, repeat;
background-position: 22px 0, 24px 0, 0 50px;
border-radius: 2px;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
}
.notepad {
position: relative;
margin: 40px auto;
padding: 0 23px 14px 35px;
width: 200px;
line-height: 23px;
font-size: 11px;
color: #666;
}
.notepad p, .notepad blockquote {
margin-bottom: 23px;
}
.notepad :last-child {
margin-bottom: 0;
}
.notepad:before, .notepad:after {
content: '';
position: absolute;
z-index: -1;
top: 100%;
left: 3px;
right: 3px;
margin-top: -2px;
height: 4px;
background-size: 1px 1px, 1px 1px, 0 0;
}
.notepad:before {
z-index: -2;
left: 6px;
right: 6px;
height: 6px;
background-color: #eee;
}
.notepad-heading {
position: relative;
margin: 0 -23px 14px -35px;
height: 38px;
background: #14466a;
border-radius: 2px 2px 0 0;
background-image: -webkit-linear-gradient(top, #226797, #0c3452);
background-image: -moz-linear-gradient(top, #226797, #0c3452);
background-image: -o-linear-gradient(top, #226797, #0c3452);
background-image: linear-gradient(to bottom, #226797, #0c3452);
-webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
}
.notepad-heading > h1 {
line-height: 36px;
font-size: 14px;
color: white;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
}
.notepad-heading:before, .notepad-heading:after {
content: '';
position: absolute;
bottom: 2px;
left: 1px;
right: 1px;
height: 0;
border-top: 1px dashed #617c90;
border-color: rgba(255, 255, 255, 0.35);
}
.notepad-heading:after {
bottom: 3px;
border-color: #071c2c;
border-color: rgba(0, 0, 0, 0.5);
}
]]>
0 komentarze:
Prześlij komentarz