Create CSS Tabs
With Rounded Corners
It’s a mean feat to design menu tabs with rounded corners
and without using images, and one Menno
van Slooten has managed to come up with the best approach we've seen so
far.
In this tutorial, we'll be using the CSS :before and :after
pseudo elements to create this effect but let us start off with the basic HTML
first.
HTML Markup
|
<!DOCTYPE html>
<html>
<head>
<meta
charset='UTF-8'>
<title>(Better)
Round Out Tabs</title>
</head>
<body>
<ul
class="tabrow">
<li class="selected"><a
href="#">First Tab</a></li>
<li><a
href="#">Second Tab</a></li>
<li ><a
href="#">Third Tab</a></li>
<li><a
href="#">Fourth Tab</a></li>
</ul>
</body>
</html>
|
We can now start applying some CSS on our tabs to give it
its distinctive look AND of course to give our tabs that rounded corner that
every web designer and developer has been trying to achieve until now.
CSS
|
.tabrow {
text-align: center;
list-style: none;
margin: 200px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background:
-o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background:
-ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background:
-moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background:
-webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background:
linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius:
6px;
border-top-right-radius:
6px;
box-shadow: 0 3px 3px
rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid
#AAA;
z-index: 1;
}
.tabrow li:before, .tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius:
6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0
#D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius:
6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0
#D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0
#FFF;
}
|
And there you have it. That’s one quite lengthy piece of CSS
code isn’t? But I’m sure you’ll find it all worth it especially if you’re one
of those people who have really been waiting for this resolution. Oh and as far
as browser compatibility is concerned, as usual, it works with all browswers
except IE.
The curve does reflect on IE8 and IE9 since it supports the :before and :after pseudo elements as reported by others who’ve tried it BUT
NOT border-radius, so be warned.
Well, hope you get to use this in your website. Have fun
tinkering with it!
Well that's it for now for more of the tutorials like this you can visit Web Design tutorials for more of design resources.
No comments:
Post a Comment