Skip to content

Instantly share code, notes, and snippets.

@Cifro

Cifro/fade-out-divider.html

Created January 29, 2011 22:22
Show Gist options
  • Save Cifro/802269 to your computer and use it in GitHub Desktop.
Save Cifro/802269 to your computer and use it in GitHub Desktop.
Download ZIP
2px height divider with fade-out effect. Demo: http://jsbin.com/utuga4
Raw
fade-out-divider.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fade-out divider</title>
<style>
::-moz-selection{ background: #bbb; color:#fff; text-shadow: none !important; }
::selection { background: #bbb; color:#fff; text-shadow: none !important; }
html{
height:100%;
background-image: -webkit-gradient(radial, 50% 0, 0, 50% 100, 400, from(#ffffff), to(#d7d7d7));
background-image: -moz-radial-gradient(center 0, circle cover, #ffffff 0%, #d7d7d7 45%);
background-repeat:no-repeat;
background-color:#d7d7d7;
}
body{padding:5% 0;font-family:Ubuntu, Arial, sans-serif;}
#box{
width:960px;
margin:100px auto;
position:relative;
}
#box:before{
position:absolute;
bottom:1px;
left:0;
content:' ';
display:block;
width:100%;
height:1px; /* 215 == #d7d7d7 */
background: -moz-linear-gradient(left, rgba(215,215,215,0) 5%, #c6c6c6 40%, #c6c6c6 60%, rgba(215,215,215,0) 95%);
background: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(215,215,215,0)), color-stop(0.4, #c6c6c6), color-stop(0.6, #c6c6c6), color-stop(90%, rgba(215,215,215,0)));
}
#box:after{
position:absolute;
bottom:0;
left:0;
content:' ';
display:block;
width:100%;
height:1px;
background: -moz-linear-gradient(left, rgba(215,215,215,0) 5%, #ffffff 40%, #ffffff 60%, rgba(215,215,215,0) 95%);
background: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(215,215,215,0)), color-stop(0.4, #ffffff), color-stop(0.6, #ffffff), color-stop(90%, rgba(215,215,215,0)));
}
.unnecessary{
font-size:60px; font-weight:bold; text-align:center; color:#fff; padding-bottom:50px;
/* http://markdotto.com/playground/3d-text/ */
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,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
footer{position:absolute; bottom:10px; right:10px; font-size:13px; color:#999;} footer *{color:#999;}
</style>
</head>
<body>
<div id="box" class="unnecessary">
&darr; Fade-out divider &darr;
</div>
<footer>by <a href="//github.com/cifro">Cifro</a></footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment