CSS for inverted curved tabs - css

I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency.
see here: http://max-guedy.com/images/tab.png

EDIT added example with hover state.
I created a demo how I would do it:
jsBin demo
We set the brown color to the whole ul element
a 25x52 sprite image .png of the curve : (will change bg-position on hover)
http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color.
The most importsnt here is to setup a higher z-index to the li elements, decreasing it on hover
Take care to set to the a elements left padding and respective -left margin to allow the anchor to 'hide' below the previous element image.
Done that you can have wide and wider links and your template will do the work!
and this CSS:
ul#nav{
height:26px;
background:#A15049;
border-bottom:1px solid #fff;
}
ul#nav li{
position:relative;
background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
height:26px;
display:inline;
float:left;
padding:0 25px 0 5px;
z-index:1;
}
ul#nav li a{
padding-left:24px;
margin-left:-24px;
height:26px;
display:block;
color:#fff;
}
ul#nav li:hover{
z-index:0;
background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
}
ul#nav li:hover a{
background:#CE392C;
}

It is just about possible to achieve this kind of thing with CSS.
Very difficult, but possible.
By default, border-radius of course only gives you regular rounded corners.
You can stretch them to some interesting shapes by adjusting the radius values. This will get you some of the way to your goal.
But the real trick here, to get the round-out parts of the tabs, is to use the CSS :before and :after pseudo-selectors to create additional styling elements, to which you need to add further border-radius.
The technique is described here: http://css-tricks.com/better-tabs-with-round-out-borders/ ... albeit for a fairly simple vertical-shaped tab. But it does a good job of explaining how to achieve the turn-out effect, which will be critical to you if you want to do this in CSS.
Bear in mind also that none of this will work in old versions of IE. IE8 does support :before and :after, but not border-radius. And while hacks like CSS3Pie exist to fix that, I wouldn't recommend using them for this kind of thing. It is likely to break.
If all the above sounds quite tricky and not really worth it, I would tend to agree. I think you'll find that a few simple images will work much better for your tabs in this instance. You could also try SVG to draw them if you want to be clever, but this will also have issues with old versions of IE.
Hope that helps.

You're easier off using images.
But if you insist on using CSS, I'd say that you need to use a lot ofborder-radius

That's an interesting challenge.
My first idea was to apply a skew transform to the tabs, a border radius to the top right corner and take care of the rounded lower part using a pseudo-element.
Unfortunately, this looks ugly http://dabblet.com/gist/2759785
Still, it bugs me that there must be a better way to do it with pure CSS.

I would say it's possible, but the amount of time that it would take would not be worth it, especially because it won't work in IE < 9...
There is a good tutorial that I have used in the past at css-tricks
However, as others have pointed out, I would recommend using images.

It really doesn't take THAT much CSS to achieve this anymore. Granted you'll have to toy with the radius' to get the desired slant.
HTML
<div role="tablist">
active tab
inactive tab
inactive tab
</div>
<div class="pane">
<section id="active-tab1" role="tabpanel">
<p>Show whatever</p>
<p>You Want</p>
<ul>
<li>inside</li>
<li>This</li>
<li>Section</li>
</ul>
</section>
<section id="active-tab2" role="tabpanel">
</section>
<section id="active-tab3" role="tabpanel">
</section>
</div>
CSS
[role=tablist]{padding:15px 15px 0;margin-left:88px;}
[role=tab]{
color:#222;
display:inline-block;
padding-left:15px;
padding-right:15px;
text-decoration:none;
line-height:44px;
position:relative;
min-width:150px;
text-align:center;
border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
background-color:#3498db;
color:white; }
[role=tab]:before,
[role=tab]:after{
content:'';
border-bottom:10px solid #3498db;
position:absolute;
bottom:-10px;
width:44px;
height:22px;
z-index:1; }
[role=tab][aria-selected=true]:before{
left:-44px;
border-right:10px solid #3498db;
border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
right:-44px;
border-left:10px solid #3498db;
border-bottom-left-radius:25px;
}
.pane{
background-color:#3498db;
padding:25px;
margin-left:5px;
margin-right:5px;
color:white;
border-radius:15px;
}
And odds are you can slim even that down, made it in about 10 minutes.
http://jsfiddle.net/darcher/819yz9Ly/

Related

html5 header tags, anchor tags in nav tags are unusual/undesired height

I've been trying format a new webpage header/nav bar with the html5 mark-up. I'm having difficulties getting my css to format things correctly. Using divs and tables I was able to produce the following:
I want to produce the above image without using divs or tables, the following is a summary of my attempt that didn't work. I believe my understanding of display:table-cell is missing something.
Changing to the html below and using the following css attributes display:table,display:table-row,display:table-cell,ect. is causing an undesired anchor height - I poked around with some dev tools and I'm fairly certain the anchor height is the issue. (complete css is on this JsFiddle):
<header>
<nav>
<img class="logo" src="img.png"/>
<h1>Home</h1>
<h1>Blog</h1>
<h1>About</h1>
<h1>Contact</h1>
</nav>
</header>
trying to set the anchor and header tag max-height:100px didn't work (along with a handful of other attempts), it keeps getting computed to ~130px.
Please see JsFiddle for the code.
replace your CSS with mine
nav h1{
color:lightgray;
font-size: 150%;
border-left:2px solid whitesmoke;
padding:0px;
min-width:50px;
padding-right:30px;
}
nav a{
float:left;
width:20%;
max-height:100px;
}
nav a h1:hover{
color:lime;
}
nav{
height:100px;
background-color:#000000;
box-shadow: 0px 0px 10px #000000;
}
header{
background-color:black;
background-position:-50px 0px;
float:left;
width:100%;
max-height:100px;
}
header img.logo{
background-size:contain;
background-repeat:no-repeat;
width:430px;
float:left;
}
key is to add float:left instead of using display:table,display:table-row,display:table-cell
The extra 30px is coming from the 15px padding on the h1 tags as padding is not included in the max-height
Alternative Solution and explanation using display:table,display:table-row,display:table-cell
Alternatively I figured out what was causing the obscure height. when using table, tr, and td tags the max-height of the table-cell (td) was never overwritten.
When I changed the tags to header,nav elements the anchor tag, even thought it had display:table-cell and max-height:100px was still allowing the height to be overwritten, by it's internal contents, the h1 tag. The h1's margin was causing the height of the anchor tag to be higher than desired. I resolved the issue by setting margin:0px of the h1 tag.
Using float it caused the anchor tags to re-render below the logo. I wanted it to stay in scale in the same line. I didn't specify this is my question, so I'm leaving the previous selected answer selected.
This fiddle shows I can widen/narrow the page and keep the navigation elements scaled and spread out accordingly.

3-col navigation menu with images

I am working on the css for a website and am trying to determine the best approach for the navigation menu. The layout of the menu is as follows:
between col 1 and 2, and also between col 2 and 3 are double vertical lines, which because of their style will probably need to be an image.
SO, my question is this:
Semantically, all of these links are part of one unordered navigation list. But, I can't find any way to create such a list using css only that will work in IE. The images between list items only muddles it up more. Is there a clean way to do this?
My second approach was to create 3 columns, and place a list in col 1 and col 3. But this still seems messy with the image dividers. I thought about using li:after to place the images, but IE7 doesn't recognize the "content" property.
Right now, it seems like the cleanest way to build this is without lists. But then I feel like I'm losing proper semantics. Is there a better approach that I'm not thinking of? The layout is very tabular, so I could certainly make it a table . . . : )
Thanks!
I solved as follows for links where you substitute the names you need and the class image with the image and your measurements.
<style type="text/css">
ul{
width:400px;
height:200px;
}
ul li{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
height:99x;
width:100px;
}
.left{
float:left;
}
.right{
float:right;
}
.second{
margin-top:100px;
margin-left:-100px;
}
.image{
background:red;
border-left:3px double gray;
border-right:3px double gray;
display:block;
float:left;
height:200px;
width:194px;}
</style>
<body>
<ul>
<li class="left">Home</li>
<li class="left second">Home</li>
<li class="image">Home</li>
<li class="right second">Home</li>
<li class="right">Home</li>
</ul>
<body>
I hope I can help. A greeting.
I think that you can make one UL with four LIs and give absolute position to first and last li (maybe "events" and "about us"). This can be achieved by pseudo selectors :first-child and :last-child.

IE7 creates empty text notes between floated elements

I'm working on a pagination sort of thing, which is simply just a bunch of floated anchor-tags inside a div. Now, in IE7, it inserts empty text nodes here and there, seemingly at random, which breaks the layout.
Result:
Example of how it looks on different pages. Note the empty text nodes. Neat, huh?
CSS:
.nwsPaging {
width:200px; /* Have also tried fluid size */
height:30px;
display:block; }
.nwsPaging a {
width:auto; /* Have also tried fixed size */
margin:0 0 0 1px;
padding:2px 8px;
border:solid 1px #ccc;
background:#eee;
float:left;
line-height:20px;
display:block;
zoom:1;
vertical-align:top; /* Should not do any difference */ }
.nwsPaging a:hover, .nwsPaging .isActive {
background:#D150A1;
color:#fff;
display:block; /* Should be redundant, but just in case */
zoom:1; }
As you can see, I've tried some different things, including setting a fixed width for the container and the floated -tags, plus giving it hasLayout. The .isActive class has nothing special in it, and it makes no difference if I never add the class.
I had the exact same problem in a different system, however I can't remember how I fixed it. I don't have access to the code, and the inspector is no help.
Bonus info:
The site is built on HTML5Boilerplate, which uses normalize reset CSS.
Edit:
The markup is very simple, and although the tags are dynamically created, there should be no line breaks which could possibly create empty text nodes.
How the markup should be presented as parsed:
<div class="nwsPaging clearfix">
Previous
1
2
3
Next
</div>
This could actually be caused by line-breaks in your code.
Strip them and see if it still does that.

Alternative to text-indent:-999em for creating accessible links with background css

I've been doing some reading recently about text-indent:-999em potentially being mistaken by search engine bots as a spammy technique.
One of our front end designers regularly uses this technique for adding links to areas use background image sprites.
Take the following html/css:
//html
<div id="masthead">
View this in more detail
</div>
//css
#masthead {
background:transparent url(/path/to/image.png) top left no-repeat;
position:relative;
}
#masthead a {
display:block;
width:100%
height:100%;
text-indent:-999em;
}
This then having the effect of the background image being clickable.
Is there a nicer alternative to this?
I can sort of achieve the same thing without the text-indent trick using a transparent gif and alt text, however kinda feels old skool.
<img src="transparent.gif" alt="View this in more detail" />
Just interested to hear what the general consensus is on this.
You can use this as a text indent alternative and with less markup:
CSS
a{
background: url("http://www.google.co.in/intl/en_com/images/srpr/logo1w.png") no-repeat;
display:block;
width:100px;
height:100px;
font-size:0;
}
Check this example: http://jsfiddle.net/sandeep/epq2F/

How to add rounded borders on a a:hover in ul li list?

I have a WordPress site where the li width changes in my navigation depending on the width/length of the link in my navigation ul li list. I am trying to add a rounded-border background image to each of the li elements, yet since each one is different in size, I am lost on how to implement this.
How can I create a background image that will change in width with rounded borders for each of my li links? Any help would be greatly appreciated.
I suggest starting with defining the CSS3 rounded corners styles (see also here). In the long run every browser should support this.
As a fallback mechanism you could use background images with the sliding door technique.
Adjusting the size of a background image is not possible without heavy Javascript and possibly even server-side stuff.
Two workaround ideas (both not tested):
CSS 2 only:
You could give the li "position: relative" and then position a DIV or other element with rounded corners and "position :absolute" within it. Give it "left:0px;right:0px;top:0px;bottom:0px" so it should always be as large as the li. To avoid the content being overlaid by the element, give the content "position: relative" and a z-index.
Cross browser code swamp:
Give the li position:relative and position four rounded corner images using "position:absolute" and "left:0px;top:0px", "right:0px;top:0px" and so on.
Here's a technique I "borrowed" that doesn't require images!:
http://blog.benogle.com/2009/04/29/css-round-corners/
He fully explains the technique so you know how he does it.
Future way
Pros: easy and simple
Cons: non IE compatible
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Javascript way
Pros: Simple
Cons: Do not work if javascript is turned off
Use Jquery and the JQuery Corner plug-in
<script type="text/javascript">
$("#menuItem1").hover(function(){
$('#menuItem1').corner();
});
</script>
Pure CSS way
As described in http://blog.benogle.com/2009/04/29/css-round-corners/
Pros: Pure css
Cons: Add lots of unneeded markup
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>Round FILL!!</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
The only solution that will be readily compatible with all browsers everywhere is slicing your background image up and making the corners their own little images.

Resources