Skip to content

Instantly share code, notes, and snippets.

@sthembi

sthembi/dabblet.css

Created February 7, 2013 19:30
Show Gist options
  • Save sthembi/4733478 to your computer and use it in GitHub Desktop.
Save sthembi/4733478 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 borders and box-shadow experiment - passport left & right
Raw
dabblet.css
/**
* CSS3 borders and box-shadow experiment - passport left & right
*/
body {
/*background: #f06;
background: linear-gradient(45deg, #f06, yellow);*/
min-height: 100%;
min-width:1100px;
}
#container {
width:1100px;
border:1px solid green;
float:left;
}
.passportpg {
float:left;
width:400px;
height:600px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #050505;
padding: 30px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background-color: #AEC5D0;
}
.passportright {
/*background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));*/
-moz-border-radius: 0px 20px 18px 0px;
-webkit-border-radius: 0px 20px 18px 0px;
border-radius: 0px 20px 18px 0px;
border-top:1px solid #949494;
border-right: 3px double #CFCBCB;
border-bottom: 2px double #949494;
border-left:3px double #515151;
/* outline: 0px 5px 5px 0px solid hsl(1, 20%, 60%);
*/
box-shadow:
4px 2px 10px 6px rgba(7, 6, 6, 0.1),
4px 2px 8px 5px rgba(7, 6, 6, 0.1),
4px 2px 3px 0px rgba(7, 6, 6, 0.6),
inset -6px -1px 7px rgba(148, 138, 148, 0.1),
inset -6px -5px 7px rgba(148, 138, 148, 0.5),
inset 30px 0px 10px rgba(200, 200, 200, 0.2) /*inner shadow */
;
text-shadow: 0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}
.passportleft {
background-color: #AEC5D0;
margin-left:20px;
-moz-border-radius:20px 0px 0px 18px;
-webkit-border-radius:20px 0px 0px 18px;
border-radius: 20px 0px 0px 18px;
border-top:1px solid #949494;
border-left: 3px double #CFCBCB;
border-bottom: 2px double #949494;
border-right:2px double #515151;
/* outline: 0px 5px 5px 0px solid hsl(1, 20%, 60%);
*/
box-shadow:
-4px 2px 10px 6px rgba(7, 6, 6, 0.1),
-4px 2px 8px 5px rgba(7, 6, 6, 0.1),
-4px 2px 3px 0px rgba(7, 6, 6, 0.6),
inset 6px -1px 7px rgba(148, 138, 148, 0.1),
inset 6px -5px 7px rgba(148, 138, 148, 0.5),
inset -30px 0px 10px rgba(200, 200, 200, 0.2) /*inner shadow */
;
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}
​
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="container">
<div id="openleft" class="passportleft passportpg"><p>left</p></div>​
<div id="openright" class="passportright passportpg"><p>right</p></div>​
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment