Skip to content

Instantly share code, notes, and snippets.

@jdsteinbach

jdsteinbach/dabblet.css

Created April 25, 2012 03:33
Show Gist options
  • Save jdsteinbach/2486019 to your computer and use it in GitHub Desktop.
Save jdsteinbach/2486019 to your computer and use it in GitHub Desktop.
Download ZIP
Testing Gradient Fade
Raw
dabblet.css
/*
Testing Gradient Fade
*/
body{
background:#000;
margin:0;
padding:0;
color:#eee;
font-weight:bold;
font-family:Helvetica,Arial,sans-serif;
}
div{
width:800px;
margin:0 auto;
text-align:center;
}
h1 {
text-align: center;
color: white;
text-transform: uppercase;
padding: 0 0 01px;
font-family: 'Palatino Linotype', cursive;
font-style: italic;
font-weight: 700;
position: relative;
background: -webkit-linear-gradient(left, black, #eee, black);
background: -moz-linear-gradient(left, black, #eee, black);
background: -ms-linear-gradient(left, black, #eee, black);
background: -o-linear-gradient(left, black, #eee, black);
}
#header-glow{
background-color:#6e78c3;
border-bottom-right-radius: 75% 50%;
border-bottom-left-radius: 75% 50%;
height:105px;
display:block;
box-shadow: -2px -2px 10px -2px #6e78c3;
box-shadow: -2px -2px 20px -2px #6e78c3;
box-shadow: -2px -2px 30px -2px #6e78c3;
box-shadow: -2px -2px 50px -2px #6e78c3;
}
/*h1:before {
content: "";
position: absolute;
left: 50%;
top: -50px;
width: 600px;
margin-left: -300px;
margin-top: -220px;
height: 600px;
background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #6e78c3, black);
background: -moz-radial-gradient(50% 50%, ellipse closest-side, #999, black);
background: -ms-radial-gradient(50% 50%, ellipse closest-side, #999, black);
background: -o-radial-gradient(50% 50%, ellipse closest-side, #999, black);
z-index: -1;
}*/
h1 a {
background: black;
display: block;
padding: 20px;
text-decoration: none;
letter-spacing: 30px;
color: white;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
<div id="header-glow"><h1><a href="#">BIG HEADER</a></h1></div>
<p>This text should fade when I scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In gravida, ante id ultricies vehicula, elit massa euismod orci, ac faucibus velit velit a quam.</p>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment