Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

CSS clip put to good use. Idea is that the clip is used to cut off the box-shadow from top of the drop-down navigation and from the bottom of the parent item so that the current item doesn't cast it's shadow onto the content. This creates seamless areas with shadows without using images. Unfortunately this method requires that one extra span. Example works only in modern browsers but clip is CSS2 property and is supported widely.

View clip-nav.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
* { margin: 0; padding: 0; }
 
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
zoom: 1;
}
.clearfix:after {
clear: both;
}
 
#container {
margin: 20%;
}
#content {
background: #E8E8E8;
padding: 50px;
}
ul {
list-style: none outside;
}
#tabs {
background: #CCC;
width: 100%;
}
#tabs > li {
position: relative;
float: left;
z-index: 10;
}
#tabs > li:hover {
z-index: 20;
}
#tabs > li > .clipper {
display: none;
position: absolute;
width: 100%; height: 100%;
top: 0px; left: 0px;
background: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
clip: rect(-10px, 1000px, 50px, -10px);
margin: 0;
}
#tabs > li.current > .clipper {
display: block;
top: -3px;
background: #E8E8E8;
padding: 3px 0 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
clip: rect(-10px, 1000px, 53px, -10px);
}
#tabs > li:hover > .clipper, #tabs > li.current:hover > .clipper {
display: block;
background: rgba(255,255,255,0.8);
}
#tabs > li > a {
position: relative; overflow: hidden;
display: block; padding: 0 10px;
height: 50px; line-height: 50px;
}
#tabs > li:hover > a {
}
#tabs > li > ul {
display: none;
position: absolute; top: 50px; left: 0px;
background: rgba(255,255,255,0.8);
width: 240px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
clip: rect(0px, 1000px, 1000px, -10px);
}
#tabs > li:hover > ul {
display: block;
}
#tabs > li > ul > li > a {
display: block;
padding: 10px;
}
View clip-nav.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS clip</title>
<meta name="author" content="Miska Närhi">
<link rel="stylesheet" type="text/css" href="css-clip.css">
</head>
<body>
 
<div id="container">
<ul id="tabs" class="clearfix">
<li><span class="clipper"></span><a href="#">First link</a>
<ul>
<li><a href="#">Second link</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Finishing third</a></li>
</ul>
</li>
<li class="current"><span class="clipper"></span><a href="#">Another one</a>
<ul>
<li><a href="#">Second link</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Finishing third</a></li>
</ul>
</li>
<li><span class="clipper"></span><a href="#">Finishing third</a>
<ul>
<li><a href="#">Second link</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Finishing third</a></li>
</ul>
</li>
</ul>
<div id="content">
<p>Current item shouldn't cast it's shadow on this content area.</p>
</div>
</div>
 
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.