Bordas arredondas para menus em abas

Postado por Daniel Lopes em 23/01/2009 XHTML/CSS

Existem várias formas para arrendondar coisas no html, mas várias delas podem ser infernais de fazer e de manter através de vários browsers.

Muitos scripts em JS fazem este trabalho (apesar de até hoje não ter encontrado nenhum 100% compatível com o IE6) em divs e outras tags, mas pessoalmente quando o assunto são menus em abas gosto mais de uma solução puramente em HTML e CSS.

Veja abaixo o resultado:

Veja agora o código:

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


<head>

<style type="text/css" charset="utf-8">
#header ul { 
   font-family:Tahoma; 
   position: absolute; 
   margin:0; list-style:none; 
}

#header li { display:inline; margin:0; padding:0; }

#header a {
   float:left;
   background: url(corner_left.jpg) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(corner_right.jpg) no-repeat right top;
   padding:4px 14px 4px 6px;
   color:#FFF;
}

#header a:hover span { color:#FFF; }
#header a:hover { background-position:0% -43px; }
#header a:hover span { background-position:100% -43px; }
#header #current a { background-position:0% -43px; }
#header #current a span { background-position:100% -43px; }

</style>
</head>

<body>
<div id="header">      
     <ul>
          <li><a href="#"><span>Home</span></a></li>
          <li><a href="#"><span>Quem Somos</span></a></li>
          <li><a href="#"><span>Portif&oacute;lio</span></a></li>
          <li><a href="#"><span>Contato</span></a></li>
    </ul>
</div>

</body>

Explicando:

Criamos um seletor para o div com id header e suas lista (ul), e definimos que seu list-style é none, desta forma as listas dentro dentro deste div não terão os marcadores de lista… próximo passo é definir um seletor para li forçando a lista exibir tudo lado a lado (display:inline).

Definido o básico, agora precisamos especificar nossas bordas arredondas. Neste caso estou trabalhando com apenas duas imagens, uma para esquerda e outra para o centro e direita. Então para posicionarmos estas imagens usaremos um link (a) com a imagem na esquerda e um span com a imagem para a direita. Foi o que fizemos neste trecho:

   
#header a {
   float:left;
   background: url(corner_left.jpg) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(corner_right.jpg) no-repeat right top;
   padding:4px 14px 4px 6px;
   color:#FFF;
}

Desta forma informamos que os link dentro de header terão imagem de fundo alinhada a esquerda e no topo com a imagem da curva a esquerda. Enquanto os span dentro de links dentro do header terão imagem de fundo alinha a direita e no topo.

O restante do código é apenas para definir um nossos estados de hover e current (current é o id que a aba que usuário está deve conter). Para estes estados usamos a técnica de CSS Sprite ( já mostrada aqui no blog ) para usar uma imagem para conter dois estado, desta forma posicionamos o fundo de acordo com a imagem, veja o trecho abaixo:


/* posicionando em 0 e -43 */
#header a:hover { background-position:0% -43px; } 
/* posicionando em 100% e -43 */
#header a:hover span { background-position:100% -43px; } 
...

2 Comentários to “Bordas arredondas para menus em abas”

Junio Vitorino diz:
23/01/2009 em 01:27 PM

Muito legal a dica, parabéns. Eu particurlamente estou utilizando css3 em meus projetos pessoais e no blog, bordas arredondadas ficaram bem simples com ele, mas para os projetos da agência sua dica será muito útil, valeu!

daniel lopes diz:
24/01/2009 em 03:04 PM

Como eu gostaria de poder usar CSS3 mas infelizmente ainda tenho que pensar em pessoas que não usam os browsers devidos ainda.

Comentário

CATEGORIAS

Home
Design
SEO
Empreendimento
Cifras
Ruby e Rails
Flex
Photoshop
Flash
XHTML/CSS
JavaScript
Variados
Database
Firefox
Projetos
3D
Projetos
TextMate
Smalltalk
Mac
Livros

ARQUIVO

03/2010 (2)
02/2010 (7)
01/2009 (4)
12/2009 (7)
11/2009 (4)
10/2009 (10)
09/2009 (7)
08/2009 (6)
07/2009 (12)
06/2009 (5)
05/2009 (6)
04/2009 (9)
03/2009 (14)
02/2009 (18)
01/2009 (14)
12/2008 (20)
11/2008 (18)
10/2008 (9)
09/2008 (12)
08/2008 (6)
07/2008 (12)
06/2008 (10)
05/2008 (15)
04/2008 (19)

ÚLTIMOS COMENTÁRIOS

Botões de Logout
comentado por Leonardo

GAIA, o maior amigo do programador Flash
comentado por criação de sites

Seja produtivo consumindo tomates
comentado por Gabriel Sobrinho

Cifras: novas funcionalidades
comentado por Juarez P. A. Filho

Cifras: novas funcionalidades
comentado por Mário Santos