Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created April 7, 2012 00:04
Show Gist options
  • Save dziudek/2324161 to your computer and use it in GitHub Desktop.
Save dziudek/2324161 to your computer and use it in GitHub Desktop.
Download ZIP
Text-shadow unfortunately doesn't work so good as the multi-layers layout
Raw
dabblet.css
/**
* Text-shadow unfortunately doesn't work so good as the multi-layers layout
*/
body {
background: #11A9E2;
perspective: 600px;
}
#wrap {
border: 1px solid #000;
width: 200px;
height: 200px;
margin: 0 auto;
perspective: 100%;
transform: rotateY(75deg);
transform-style: preserve-3d;
transition: transform 1s ease-out;
}
body:hover #wrap {
transform: rotateY(-75deg);
}
h1 {
margin: 0;
font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #C9C9C9,
0 3px 0 #BBB,
0 4px 0 #B9B9B9,
0 5px 0 #AAA,
0 6px 1px rgba(0, 0, 0, 0.1),
0 0 5px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.3),
0 3px 5px rgba(0, 0, 0, 0.2),
0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.2),
0 20px 20px rgba(0, 0, 0, 0.15);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="wrap">
<h1>3D Ready</h1>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment