jdsteinbach
4/25/2012 - 3:33 AM

Testing Gradient Fade

Testing Gradient Fade

settings.json
content_copyfile_download
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
dabblet.html
content_copyfile_download
<!-- 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>
dabblet.css
content_copyfile_download
/*
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;
}