08/04/2010
CSS3: Painel horizontal totalmente em css
Passeando por bons blogs na web que falam sobre CSS3, eu encontrei no W3Avenue um post mostrando como montar um painel horizontal totalmente com CSS3. Para verem do que se trata, vejam uma demo do painel horizontal.
Gostei muito do post, por isso vou trazer para vocês um resumo dele, assim como um exemplo que eu fiz. Como é de costume, torno a falar que a utilidade deste recurso dependerá da necessidade e da criatividade de quem for usá-lo.
HTML
<div class="horizontalPanel"> <ul> <li> <h3>Título 1</h3> <div>Conteúdo</div> </li> <li> <h3>Título 2</h3> <div>Conteúdo</div> </li> <li> <h3>Título 3</h3> <div>Conteúdo</div> </li> <li> <h3>Título 4</h3> <div>Conteúdo</div> </li> </ul> </div>
O HTML é simples, colocamos uma div com classe “horizontalPanel” para conter uma lista simples, composta de um ul e quatro li, sendo que dentro de cada li colocamos um h3 e uma div.
CSS3 - Gradiente Color + Transition + Transform
.horizontalPanel{
margin:50px auto;
width:500px;
}
.horizontalPanel ul{
margin:0;
padding:0;
list-style:none;
height:300px;
}
.horizontalPanel ul li{
display:block;
overflow:hidden;
float:left;
margin:0;
padding:0;
list-style:none;
width:40px;
height:300px;
background:#9fd14e;
}
.horizontalPanel ul li h3{
display:block;
float:left;
margin:0;
padding:10px;
height:19px;
width:280px;
border-left:#f0f0f0 1px solid;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
text-transform:uppercase;
color:#333;
background:#b0d89c;
/* CSS3 Transform Rotate & Translate */
white-space:nowrap;
-moz-transform:rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
-moz-transform-origin:0 100%;
-o-transform:rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
-o-transform-origin:0 100%;
-webkit-transform:rotate(90.0deg) translate(-40px,0px);
/* Saf3.1+, Chrome */
-webkit-transform-origin:0 100%;
transform:rotate(90.0deg) translate(-40px,0px);
/* Saf3.1+, Chrome */
transform-origin:0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ff4f8f3c, endColorstr=#ffb0d89c); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage
(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ff4f8f3c, endColorstr=#ffb0d89c)"; /* IE8 */
/* CSS3 - Efeito Gradiente */
background: -moz-linear-gradient( top, #4f8f3c, #b0d89c);
background: -webkit-gradient(linear, left top, left bottom,
from(#4f8f3c), to(#b0d89c));
}
.horizontalPanel ul li div{
display:none;
float:left;
overflow:auto;
position:relative;
top:-40px;
left:40px;
*top:0px; /* IE7 */
*left:0px; /* IE7 */
margin:0;
width:320px;
height:280px;
padding:10px;
text-align:center;
}
A parte acima define, inicialmente, a formatação da estrutura que nosso painel horizontal terá, tais como cor de fundo, altura e largura, cor da letra, etc. Também definimos que o h3 será rotacionado em 90°, além do efeito gradiente que colocamos como background.
O resultado do código acima é o que podemos ver na imagem abaixo:
.horizontalPanel ul li:hover{
overflow:hidden;
width:380px;
}
.horizontalPanel:hover ul li:hover div{
display:block;
}
.horizontalPanel:hover ul li:hover h3{
color:#fff;
background:#000000;
}
.horizontalPanel ul li h3:hover{
cursor:pointer;
}
O CSS acima é simples. Apenas define algumas configurações para o hover dos elementos que estamos usando. Dessa formatação surtirá o resultado demonstrado na figura abaixo.
CSS3 Transition - Incluindo a animação
transition:width 0.4s ease-in-out; -moz-transition:width 0.4s ease-in-out; -webkit-transition:width 0.4s ease-in-out; -o-transition:width 0.4s ease-in-out;
Acima incluímos o proriedade transition, que dará um efeito de animação na hora de expandir o li. Esse código deverá ser posto na formatação do li.
Para simplificar, veja abaixo o código completo.
.horizontalPanel{
margin:50px auto;
width:500px;
}
.horizontalPanel ul{
margin:0;
padding:0;
list-style:none;
height:300px;
}
.horizontalPanel ul li{
display:block;
overflow:hidden;
float:left;
margin:0;
padding:0;
list-style:none;
width:40px;
height:300px;
background:#9fd14e;
transition:width 0.4s ease-in-out;
-moz-transition:width 0.4s ease-in-out;
-webkit-transition:width 0.4s ease-in-out;
-o-transition:width 0.4s ease-in-out;
}
.horizontalPanel ul li h3{
display:block;
float:left;
margin:0;
padding:10px;
height:19px;
width:280px;
border-left:#f0f0f0 1px solid;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
text-transform:uppercase;
color:#333;
background:#b0d89c;
/* CSS3 Transform Rotate & Translate */
white-space:nowrap;
-moz-transform:rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
-moz-transform-origin:0 100%;
-o-transform:rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
-o-transform-origin:0 100%;
-webkit-transform:rotate(90.0deg) translate(-40px,0px);
/* Saf3.1+, Chrome */
-webkit-transform-origin:0 100%;
transform:rotate(90.0deg) translate(-40px,0px);
/* Saf3.1+, Chrome */
transform-origin:0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ff4f8f3c, endColorstr=#ffb0d89c); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage
(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient
(startColorstr=#ff4f8f3c, endColorstr=#ffb0d89c)"; /* IE8 */
/* CSS3 - Efeito Gradiente */
background: -moz-linear-gradient( top, #4f8f3c, #b0d89c);
background: -webkit-gradient(linear, left top, left bottom,
from(#4f8f3c), to(#b0d89c));
}
.horizontalPanel ul li div{
display:none;
float:left;
overflow:auto;
position:relative;
top:-40px;
left:40px;
*top:0px; /* IE7 */
*left:0px; /* IE7 */
margin:0;
width:320px;
height:280px;
padding:10px;
text-align:center;
}
.horizontalPanel ul li:hover{
overflow:hidden;
width:380px;
}
.horizontalPanel:hover ul li:hover div{
display:block;
}
.horizontalPanel:hover ul li:hover h3{
color:#fff;
background:#000000;
}
.horizontalPanel ul li h3:hover{
cursor:pointer;
}
Espero que este recurso seja útil para vocês. Novamente dou créditos ao post da W3Avenue, que foi quem teve a idéia e a estrutura do projeto acima. Se você ainda não viu a nossa demo do painel horizontal.
Espero que tenham gostado desse artigo, eu particularmente adorei a idéia da W3Avenue de utilização para essas novas propriedades do CSS3. Espero que vocês também encontrem utilidade com esse painel.
Autor: Léo - ComunicaWeb
