Caixa para menu com cantos arredondados em css3

O css3 veio mesmo para facilitar as nossas vidas. Onde antes era necessário usar várias imagens, podemos fazer isso hoje simplesmente sem usar nenhuma. O css3 já nos dá funcionalidade nativa de cantos arredondados, sombras e degradês , não 100% para o IE (sempre ele), mas com a ajuda de alguns Hacks CSS é possível deixar uma código mais compatível com  o navegador em questão.

Hoje você irá aprender a criar uma caixa para menus, com cantos arredondados, sombreada, com degradês (o degradê não funciona no IE9) e no padrão tableless ou seja sem o uso de nenhuma tabela e a caixa também se comportará de maneira a adaptar-se à largura da coluna onde estiver contida, o que chamamos de layout líquido.

Para que os cantos arredondados funcione no IE9 é preciso usar o arquivo  “border-radius.htc”,  que você pode baixa-lo no seguinte endereço:

http://curved-corner.googlecode.com/files/border-radius-demo.zip

Então vamos a nossa 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<style type="text/css">
/* |||||| CONFIGURAÇÃO DO MENU |||||| */
.caixa_cantos_arredondados{

overflow:hidden;
height:auto;
width:100%;
margin:auto;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
-webkit-border-radius:14px;
border-radius: 14px;
behavior:url(border-radius.htc);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
background-color:#fab514;

}
.topo_caixa{

width:100%;
height:22px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:arial;
font-weight:bold;
text-align:center;
padding-top:5px;

}
.meio_caixa{

height:100%;
width:100%;
margin:auto;
padding:0px;
background-image: -moz-linear-gradient(100% 100% 90deg, #ffff33,#ffcc00);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffcc00), to(#ffff33));
background-color:#ffff33;

}
.rodape_caixa{

width:100%;
height:15px;

}
/* |||| FIM CONFIGURAÇÃO DO MENU |||| */

/* |||| CONFIGURAÇÃO DOS LINKS |||||| */
a.linkcaixa:link,a.linkcaixa:visited{

text-decoration:none;
line-height: 15px;
display:block;
border-top:1px solid #c4991a;
border-bottom:1px solid #ffff66;
color:#464646;
text-shadow: 0 -1px 1px rgb(250, 250, 250);
font-family:verdana,arial;
font-weight:bold;
font-size:12px;
padding:3px;

}
a.linkcaixa:hover{

text-decoration:none;
line-height: 15px;
display:block;
border-top:1px solid #c4991a;
border-bottom:1px solid #ffff66;
color:#a2337b;
text-shadow: 0 -1px 1px rgb(250, 250, 250);
font-family:verdana,arial;
font-weight:bold;
font-size:12px;
padding:3px;

}
/* ||| FIM CONFIGURAÇÃO DOS LINKS ||| */
</style>

A classe “caixa_cantos_arredondados” cuida da caixa externa onde serão incluídos todos os outros elementos do nosso menu.

O menu é dividido em 3 linhas: o cabeçalho do menu, a linha do meio onde será implementado os links e o roadpé.

Você pode notar que na linha do cabeçalho, apenas os cantos superiores são arredondados assim como no rodapé, apenas os cantos inferiores, porém não dá pra definir apenas os cantos superiores ou inferiores e o que você vê na verdade é uma caixa inteira com cantos arredondados onde são colocadas tres divs dentro.

A primeira div e a terceira, respectivamente cabeçalho e rodapé, são transparente é servem apenas para marcarem o lugar do título e do rodapé que ficará em branco.

A div do meio é que dá o efeito de trê linhas, como se a primeira (cabeçalho) tivesse os cantos superiores arredondados e os inferiores retos assim como o rodapé parece ter os cantos inferiores arredondados e os superiores retos, mas é só uma ilusão de ótica, pois como já dissemos é uma caixa inteiramente com os cantos arredondados.

Importante: observe que você tem duas propriedades css para o degradê:

background-image: -moz-linear-gradient
background-image: -webkit-gradient

Acontece que o primeiro funciona para o Firefox  e o segundo para o Google Chrome e preste atenção na sequencia de cores para um e para outro. Os valores são invertidos. No Chrome é mais lógico, a primeira cor é a de cima e a segunda a de baixo, já para o Firefox os valores são invertidos e no IE o degradê infelizmente não funciona mas mesmo assim o efeito no IE ainda vale a pena.

Observe também na classe da caixa externa a chamada do arquivo que criará bordas arredondadas para o IE:

behavior:url(border-radius.htc);

Para não ser necessário incluir mas um par de divs para cada link, foram colocadas bordas superiores e inferiores nos próprios links, como delimitadores de acada item de menu. A cores das bordas também diferem, uma mais clara e outra mais escura, para criar um efeito tridimensional.

Agora vamos ao nosso código html:

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

<!-- Essa div não faz parte do menu -->
<div style="width:200p">

<div class="caixa_cantos_arredondados">

<div class="topo_caixa">
Categoria
</div>

<div class="meio_caixa">

<a href="#" class="linkcaixa">Primeiro link</a>
<a href="#" class="linkcaixa">Segundo link</a>
<a href="#" class="linkcaixa">Terceiro link</a>
<a href="#" class="linkcaixa">Quarto link</a>

</div>

<div class="rodape_caixa">
&nbsp;
</div>

</div>

<!-- Essa div não faz parte do menu -->
</div>

Veja que  a primeira div não faz parte do menu, é apenas para simular uma coluna onde o nosso menu estaria contido, e aumentando ou diminuindo a largura na css inline dessa div (width:200px) você poderá perceber que a caixa de menu sempre se adapta para refletir a nova largura.

Agora é só montar o nosso exemplo, criando um arquivo html, colocando o código da css no cabeçalho e o código html no corpo do mesmo documento.

Use antes da tag <html> a tag de definição XTTML como está abaixo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Obs: não esqueça de colocar o arquivo “border-radius.htc” no mesmo diretório onde salvar o html, para que funcione também no IE9.

Aproveite e veja também outros códigos e dicas da categoria css: Dicas e códigos css

Até a próxima.