Tudo começou com uma maldita música, ou melhor, maldito verso de determinada música, que não saía da minha cabeça mas nem por decreto judicial.
A Juliana não quer sambar. Samba Juliana, samba Juliana, samba Juliana, samba!
Resolvi canalizar essa porra em forma de ~~ arte ~~
Eis o passo-a-passo seguido do resultado final:
Samba, ordinária.
Queria avisar que terão outros como esse, e que o próximo é com Sidney Magal.
Todo mundo tem cantores(as), bandas e, principalmente, músicas que marcaram a vida de uma certa forma. No meu caso, não teve nenhum evento marcante ou coração partido - tá, teve, mas tratei de desassociar rapidinho. Vamos relembrar (ou conhecer) algumas dessas bandas - que já vou adiantando, são incríveis.
O jeito como conheci essa banda foi tão surreal quanto o fanatismo que desenvolvi por ela posteriormente (e que deixa sequelas até hoje). Era 1998, 6ª série, eu já achava que era gente. Estava na casa da minha amiga, pra festinha de aniversário dela. Na TV, o Disk MTV. De repente, começa a passar um dos clipes mais dorgas que eu já vi: Push It - SIM, GARBAGE NO DISK MTV.
Fiquei hipnotizada. Nunca tinha visto um clipe tão WTF. Mas esqueci rápido :D
Uns dias depois, pra ser mais precisa, num sábado de manhã, estava assistindo à MTV (e pensar que esse canal já foi bom e me proporcionou bons momentos musicais). Aí me começa a passar Only Happy When it Rains, que é somente a melhor fucking música de todos os fucking tempos!!!
Pronto, aquilo foi o suficiente. O que era aquela música? E os vestidos da Shirley Manson, o cabelo? O CABELO!!! Quem nunca quis ter aquele cabelo e vestir aqueles vestidos? ALOKA.
Ultimamente, ninguém tinha mais notícias do Garbage, e muitos achavam que a banda tinha acabado (NÃOOOOO D:). Mas, recentemente, eles anunciaram que estão gravando um álbum novo (AEEEEEEEEE :D). E estão bastante ativos no Twitter (eles me seguem *______*) e Facebook, sempre postando novidades sobre o andar da carruagem, com direito a fotos e vídeos, para o meu, o seu, o nosso deleite *_*
Mais uma do tempo que a MTV era boa. Também num dia e horário aleatórios, passou o clipe de Naked Eye e, pra minha sorte, já existia Internet. E o Napster. Mas elas eram tão alternativas que eu tive que recorrer ao Audiogalaxy (saudades dolorosas) pra baixar a discografia completa, que é SENSACIONAL.
Essa música não é Ó-T-I-M-A? Naked is a state of mind!
Era 1996, meu pai havia acabado de comprar nosso primeiro aparelho de som que tocava CD. E um dos primeiros CDs que ele adquiriu foi o Greatest Hits do Roxette. VICIEI na hora e roubei o CD pra mim. Escutei tanto aquilo (e bem alto) que ninguém aguentava mais, nem minha própria família, quem dirá os vizinhos. Such a classic.
Não lembro direito, mas acho que conheci as Spice como todo mundo - sendo bombardeada de repente com notícias e músicas delas, já que foram um belo de um fenômeno, na época. E, como toda pré-adolescente dos anos 90, virei fã, dancei as músicas, imitei (eu era a Geri), pendurei pôsteres em todos os espaços que meu humilde quarto oferecia. Achava elas lindas e fashion, hoje olho as fotos daquele tempo e...
Conheci do mesmo jeito que a maioria das pessoas (Don't Speak :D). Mas a banda despertou meu interesse mesmo quando, numa das minhas assistidas aleatórias à MTV, passou o clipe de Just a Girl.
Um tempo depois, num dia de muita sorte, achei o Tragic Kingdom numa loja de CDs usados. Eta dinheiro bem gasto! A partir daí foi só amor por essa banda, que, como o Garbage, está no estúdio e não sei se meu coração vai aguentar as minhas bandas favoritas lançando álbuns em breve. É MUITA EMOÇÃO!!
Eu só sei que ODIAVA com todas as minhas forças Linger, e toda vez que ela tocava no rádio, eu desligava, mudava de estação, sei lá. Criança é um bicho besta! Aí eu cresci, virei mulher, encarei com muita fé e baixei a discografia dos Cranberries, e Linger se tornou uma das minhas músicas favoritas de todos os tempos, com direito a ser tocada no violão.
Ah, o Curve. Talvez a banda mais diferente, alternativa (falam que o gênero é "Shoegaze" -q), obscura dessa lista. Não consigo descrever o que é, só sei que me arrepia. Conheci essa banda no Orkut (risos), na comunidade do Garbage, num daquelas tópicos "que outras bandas você curte?". Alguém falou do Curve, e sua vocalista Toni Halliday que tem a voz muito parecida com a da Shirley Manson. E tem mesmo, mas não sei, a pegada era diferente. Só ouvindo pra entender. Uma pena que acabou. :'(
Ai, gente, Girls Aloud é TÃO LEGAL! Muito triste que elas estão nessa pausa ridícula! Nem sei se voltam, mas o material que elas produziram já é lendário! Conheci as GA já velha, na faculdade. Uma amiga me emprestou um CD desses que a gente grava com várias músicas de vários artistas (uma espécie de mixtape das antigas, só que com as músicas separadas. RISOS). Tive que ouvir umas 15 faixas até chegar em Sound of the Underground. É possível ficar completamente viciada numa música ouvindo-a somente uma vez? É.
Hahaha, como elas eram mal-produzidas, meu Deus!!! Acho que esse clipe me traumatizou, e eu fiquei um tempo sem ouvir. Aí sei lá, meu deu a louca um dia e resolvi baixar uns CDs delas. Nem precisa dizer o estrago que elas fizeram no meu Last.fm. Acho que nunca nenhum outro artista irá ultrapassá-las.
Algumas bandas deveriam ser proibidas de acabar. Uma delas é o The Cardigans. O motivo, é que só me apaixonei por eles depois que tocaram no Brasil. MUITO TRISTE :((((((
Bom, como todo mundo, também os conheci por causa de Lovefool. E um tempo depois, achei bem legal o clipe de My Favourite Game, que tinha 4 finais (amo que descobri isso pelo Vídeo Show).
Mas naquela época era só uma banda legal, nada mais. Aí que no meu último ano de facul, decidi que eu ia baixar a discografia deles. Pra que... Só para eles pularem pro 2º lugar de banda mais executada do meu Last.fm em menos de 3 meses. O melhor dos Cardigans é que eles têm ao mesmo tempo músicas alegres e fofinhas (Lovefool), e músicas deprê-corta-pulso (todo o álbum Long Gone Before Daylight). Tinha uma música pra cada oscilação de humor minha, afinal, eu estava em ano de TCC. E isso é mais um motivo da banda ter marcado tanto, pois foi nessa época tão louca da minha vida que eu mais ouvi The Cardigans.
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.
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>
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!
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á?
Feliz ano-novoooo! Uhuuuul! \o/
Como notaram, esse é o primeiro post de 2011 aqui no PlayStop. Sou bonita?
Estou aqui para falar de mais um trabalho bacana que surgiu nesse meio-tempo, o de reformular o blog do Tanlup. Pra quem não conhece, Tanlup é um serviço onde você pode criar a sua própria loja virtual para vender a sua muamba linda e com uma cara profissional! Eles te oferecem tudo já bonitinho, inclusive módulos de pagamento. E você pode personalizar o layout da loja pra ficar com a cara da sua marca. Muuuuito bonito!
E abaixo vocês conferem como ficou! :D
Clique para ampliar!
Aumenta, que eu não tô enxergando.
HTML5, CSS3? Versão pra iPhone e iPad? Trabalhamos.
Quer ver ao vivo? Visite o Blog do Tanlup.
Ah, e experimente aumentar e diminuir a janela pra ver o layout se encaixando conforme a resolução. Agradeça ao Less Framework 4, meu novo framework preferido. :)
Obrigada pela atenção e até qualquer dia (qualquer, mesmo)! o/
Eu sei que, mesmo quando não temos tempo para nada, sempre sobra um pouquinho pra fazer as coisas que gostamos. Mas eu tava tão sem tempo que o que eu tinha de sobra, usava pra dormir. Dormir é algo que eu adoro, apesar de achar o maior desperdício de tempo. Pegou o círculo vicioso que tava rolando? Pois é. Eu vivo de temporadas de falta de tempo. Quando uma acaba, eu posto. Aí vem outra, e fico mais 2 meses sem dar as caras. Mas acho que me cansei.
Aí vai um pouco do que aconteceu nas minhas temporadas de falta de tempo:
Depois que eu me formei no final de 2009 (estou chocada que já faz 1 ano), eu não conseguia encontrar um bom motivo pra continuar em Bauru (a não ser os amigos). Então resolvi tentar a sorte na cidade grande. Quer dizer, na cidade monstro que é São Paulo. Eu SEMPRE quis voltar pra cá. Sim, porque pra mim é mais um retorno do que um começo, visto que eu nasci e passei boa parte da infância aqui.
Resumindo a história, em 5 meses que estou aqui já estou no 3º emprego. Depois de muitos (MUITOS) altos e baixos, salários não pagos, vagas mal-interpretadas e afins, acho que agora as coisas se acertam. Enquanto isso não acontece, sigo falida e morando de favor em casa de parente (pelo menos até terça, quando me mudo pra uma pequena filial da minha antiga república). ^^
Mas o sonho continua. Em 2011 quero botar em prática alguns planos empreendedores. Vou levando paralelamente à minha vida de proletariado. Se vingar, ótimo. Se não, eu penso em outra coisa. A única coisa que posso adiantar é que envolve pixel-art. :D
Tudo bem que eu não tava falando de nada ruim, mas mesmo assim eu vou chamar a Aracy, porque quando envolve Webdesign, portfolio atualizado, amigos e dinheiro, é melhor ainda, né? Hehehe!
Recentemente, fui incumbida com a responsabilidade de redesenhar o blog do Caio Caprioli, o Sem Paletó! Caio é um amigo de muitos anos que, ao contrário de mim, não perdeu o tesão por postar, e hoje é um dos blogueiros mais amados desse Brasil varonil.
O layout ainda está com uns bugs. Confesso que ainda não testei nos IEs da vida. Só dei uma olhada por cima e, como não encontrei nada absurdo, não me desesperei. Mas vou arrumar tudinho em breve! Mas se você é uma pessoa moderna que usa Firefox/Chrome/Safari/Opera, já pode usufruir 100% do layout :P
Bom, é isso. Que venha 2011!
p.s. 1: O Sem Paletó agora está disponível no meu Portfolio.
p.s. 2: Não estou disponível para freelas até a segunda ordem, ok? Sorry :)