Geek asks and answers

CSS for inverted curved tabs

I'm stuck on how to code CSS for these inverted seductive tabs that were provided by a design agency.

enter image description here

see here: http://max-guedy.com/images/tab.png

+3
source share
6 answers

EDIT example added with hover state.

I created a demo, how would I do it:

jsBin demo

  • We set brown to the whole ul element
  • 25x52 sprite image .png curve: (will change the bg position on hover) http://img401.imageshack.us/img401/258/bg2d.png , which will be installed in the element li, but without the color bg.
  • importnt - z- li, hover
  • , a , "" .

, , !

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;
  }
+3

CSS.

, .

border-radius, , .

, . .

, , CSS :before :after , border-radius.

: http://css-tricks.com/better-tabs-with-round-out-borders/... . , , , CSS.

, IE. IE8 :before :after, border-radius. CSS3Pie , , . , .

, . , , . SVG , , IE.

, .

+2

.

CSS, , border-radius

+1

.

, , .

, http://dabblet.com/gist/2759785

, , CSS.

+1

I would say that this is possible, but the amount of time it would take would not be worth it, especially because it would not work in IE <9 ...

There is a good tutorial that I used in the past in css-tricks

However, as others have pointed out, I would recommend using images.

0
source

This is actually no longer necessary for CSS. Of course, you have to play with a radius "to get the desired bias."

HTML

<div role="tablist">
    <a href="#" role="tab" aria-controls="active-tab1" aria-selected="true">active tab</a>
    <a href="#" role="tab" aria-controls="active-tab2">inactive tab</a>
    <a href="#" role="tab" aria-controls="active-tab3">inactive tab</a>
</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 the chances that you can lose weight even on that down, did it in about 10 minutes.

http://jsfiddle.net/darcher/819yz9Ly/

0
source

More articles:


All Articles