Vamos aproveitar o mês de junho, e falar de algo sempre presente nas festas juninas e, ultimamente, também no webdesign? Gente, ignorem esse parágrafo, foi péssimo.
Sabe aqueeeele efeito acordeon, acordeão, accordion, sanfona, whatever, que todo mundo usa ou um dia já quis usar? Dá pra ser reproduzido apenas com CSS3! E eu vou lhes mostrar como.
Você vai precisar de:
- 1 página simples em .html
- 1 arquivo .css para o estilo
- 1 div com a id "accordion"
- 4 sub-divs com o conteúdo
- 1 tesoura sem ponta
Modo de preparo
Crie a página base, dispondo os elementos de forma a criar um código harmonioso:
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8"/>
<title>Efeito Acordeon com CSS3</title>
</head>
<body>
</body>
</html>
Este é o código do menu, que deverá se acrescentado ao <body> da mistura:
<div id="accordion">
<div class="content" id="item1">
<h4><a href="#">Item 1</a></h4>
<p>Texto contido no item 1.</p>
</div>
<div class="content" id="item2">
<h4><a href="#">Item 2</a></h4>
<p>Texto contido no item 2.</p>
</div>
<div class="content" id="item3">
<h4><a href="#">Item 3</a></h4>
<p>Texto contido no item 3.</p>
</div>
<div class="content" id="item4">
<h4><a href="#">Item 4</a></h4>
<p>Texto contido no item 4.</p>
</div>
</div>
Senti que estava faltando sustância, então incrementei com o Bacon Ipsum:
<div id="accordion">
<div class="content" id="bacon">
<h4><a href="#">Bacon ipsum</a></h4>
<p>Bacon ipsum dolor sit amet eiusmod tail ut pig, in veniam shoulder pork belly short loin cupidatat drumstick rump meatball. Non flank pancetta, tempor shankle tail rump jowl pork loin. Tail nisi cow, short loin ut biltong pig beef ribs fatback aliqua. Ham proident salami, minim aliqua nisi tenderloin ex pastrami incididunt. Strip steak consequat enim fugiat drumstick ullamco ut incididunt laboris flank, hamburger pork meatball. Culpa hamburger tenderloin, jerky turkey corned beef mollit pork chop aliqua ex. Officia duis culpa, pork chop ea meatloaf proident.</p>
</div>
<div class="content" id="ribs">
<h4><a href="#">Spare ribs</a></h4>
<p>Est sint incididunt venison corned beef irure. Spare ribs shoulder do, elit meatball sint dolore sed. Sirloin pig biltong cillum, meatball labore meatloaf. Ex est chicken, minim ut pancetta nostrud pork belly magna shankle. Drumstick pancetta jerky aliqua dolor, in ad. Culpa shank in t-bone swine aliqua, excepteur jowl meatball dolore reprehenderit. Proident ham flank pariatur venison, pig in bresaola est ut eu officia ham hock pancetta.</p>
</div>
<div class="content" id="hamburger">
<h4><a href="#">Culpa hamburger</a></h4>
<p>Consectetur pork loin nulla strip steak ut, ex id venison adipisicing irure beef shank fatback dolore. Turkey dolore sed deserunt, pork consectetur jowl pork chop dolore elit dolor do flank. Hamburger sirloin velit, tempor flank ribeye meatball reprehenderit short ribs fatback fugiat tail. Enim chicken t-bone drumstick dolore, do eiusmod pig laborum consectetur irure sint spare ribs strip steak sausage. Reprehenderit bacon id, dolor aliqua t-bone pork belly ham hock irure sed laborum chuck minim voluptate. Sed qui spare ribs, shoulder sirloin nostrud exercitation officia enim flank venison in beef ribs magna. Jerky elit turkey adipisicing, pork belly officia pariatur occaecat.</p>
</div>
<div class="content" id="pork">
<h4><a href="#">Consectetur pork</a></h4>
<p>Exercitation turkey ex, shoulder veniam chuck proident dolore pork chop nisi. Tongue cillum meatloaf, pork laboris dolore qui aute cupidatat nulla. Minim aliquip hamburger, veniam nulla fugiat laborum dolore esse cupidatat commodo sunt. Tongue veniam ground round, minim bresaola ullamco exercitation. Hamburger do sunt, t-bone ut pig laboris drumstick. Ea drumstick tri-tip short ribs, eu salami dolore shank shankle meatloaf tail aliqua meatball sint. Ullamco exercitation labore pork.</p>
</div>
</div>
Fazendo funcionar
Agora vamos dar liga a essa massa. Insira o código abaixo na <head>, que chama a folha de estilo:
<link rel="stylesheet" type="text/css" href="style.css" />
Crie o dito cujo do style.css e cole este código:
/* reset */
* {
list-style: none;
margin: 0;
padding: 0;
outline: none;
border: none;
text-decoration: none;
font: 14px/16px tahoma, sans-serif;
}
#accordion {margin: 50px auto; width: 400px;} /* margin auto centraliza o menu */
#accordion .content {
border: 1px solid #bbb;
padding: 10px;
cursor: pointer;
/* altura fixa e overflow hidden para que o conteúdo que deve ser ocultado, seja ocultado */
height: 17px;
overflow: hidden;
/* transition */
transition: height ease-in-out 300ms;
-o-transition: height ease-in-out 300ms;
-moz-transition: height ease-in-out 300ms;
-webkit-transition: height ease-in-out 300ms;
}
/* uma altura para cada conteúdo, que será exibido ao passar o mouse */
#accordion #bacon:hover {height: 195px;}
#accordion #ribs:hover {height: 165px;}
#accordion #hamburger:hover {height: 230px;}
#accordion #pork:hover {height: 180px;}
#accordion .content h4 {padding-bottom: 15px;}
É com o seletor transition que conseguimos o efeito do acordeon. Com ele, podemos criar efeitos diversos para a ação que for realizada com o elemento em questão (no caso, :hover na div .content). O efeito usado foi o ease-in-out, que nada mais é que o vai-e-vem, e o tempo em que ele é realizado é de 300ms (milissegundos). Não é feitiçaria, é tecnologia!
Bônus! Tapinha no visual
Mas tá tão feinho assim, né? Vamos decorar esse bolo com algumas firulas de CSS. Na <head>, acrescente o código abaixo. Vamos usar uma fonte diferente!
<link href="http://fonts.googleapis.com/css?family=Amaranth:regular,regularitalic,bold,bolditalic" rel="stylesheet" type="text/css" />
Agora, no CSS, vamos colocar a fonte nova lá no Reset:
font: 14px/16px Amaranth, tahoma, sans-serif;
A cereja do bolo vem aí. Já que estamos brincando com CSS3, vamos logo estrapolar e colocar gradiente, sombra e bordas arredondadas!
#accordion .content {
color: #666;
margin-bottom: -1px;
/* gradiente */
background-image: -moz-linear-gradient(#f0f0f0, #ddd);
background-image: -webkit-linear-gradient(#f0f0f0, #ddd);
background-image: -o-linear-gradient(#f0f0f0, #ddd);
/* sombra */
box-shadow: inset 1px 1px 0 #fff;
-moz-box-shadow: inset 1px 1px 0 #fff;
-webkit-box-shadow: inset 1px 1px 0 #fff;
/* bordas arredondadas */
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Mais uma estilizadinha no <h4>:
#accordion .content h4 a {
font-size: 16px;
font-style: italic;
color: #444;
text-shadow: 1px 1px 0 #fff;
}
Eeeee... Voilá!
Baixe aqui o código-fonte completo.
Espero que vocês tenham entendido, porque sei lá né, eu não sou a melhor professora, mas eu fiz com carinho, tá?
DIE, BITCH!
