Arara Azul Websites » css http://www.araraazulwebsites.com.br/blog Criação e desenvolvimento de sites Sun, 26 Jun 2011 01:55:53 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 As 30 melhores ferramentas para CSS e recursos online http://www.araraazulwebsites.com.br/blog/2009/10/06/as-30-melhores-ferramentas-para-css-e-recursos-online/ http://www.araraazulwebsites.com.br/blog/2009/10/06/as-30-melhores-ferramentas-para-css-e-recursos-online/#comments Tue, 06 Oct 2009 22:59:35 +0000 Leonardo Cardoso http://www.araraazulwebsites.com.br/blog/?p=54 Hoje em dia saber CSS é essencial para o desenvolvimento de um site, há algum tempo venho trabalhando e pesquisando muito com esta linguagem e em uma destas pesquisas sobre CSS na internet acabei achando um post em um blog estrangeiro bem interessante sobre o assunto.

O post reune as 30 melhores ferramentas para criação e edição de CSS e recursos online, segundo o outor do post, os softwares disponibilizados são todos gratuitos.

Então para você que tem alguma dificuldade na criação e utilização de CSS, ou mesmo querendo encontrar um sisteminha para facilitar a criação dos códigos, clique aqui e confira o Post.

Nenhum post relacionado.

]]> http://www.araraazulwebsites.com.br/blog/2009/10/06/as-30-melhores-ferramentas-para-css-e-recursos-online/feed/ 0 Jump Animação com Jquery http://www.araraazulwebsites.com.br/blog/2009/04/18/jump-animacao-com-jquery/ http://www.araraazulwebsites.com.br/blog/2009/04/18/jump-animacao-com-jquery/#comments Sat, 18 Apr 2009 06:12:48 +0000 Leonardo Cardoso http://www.araraazulwebsites.com.br/blog/?p=18 Olá, Galera

Estive um tempo afastado do Blog, mais foi por motivos de tempo mesmo… estava com alguns projetos pendentes e em paralelo também reformulando a versão HTML do nosso site conforme vocês podem conferir no post abaixo.

Bem, hoje trago uma dica muito legal chamada Jump Animação, são aquelas Box de textos que surgem quando você clica em um determinado link.

Aqui tem um exemplo do que estou falando.

Bem para desenvolve-lo vamos precisar do seguinte plugin:
jquery.min.js

No código HTML de sua página insira o plugin e a seguinte função javascript dentro da tag <head>:

<script src=”jquery.min.js”></script>
<script type=”text/javascript” charset=”utf-8″>
$(document).ready(function () {
var $div = $(‘#test’);
var height = $div.height();
$div.hide().css({ height : 0 });

$(‘a’).click(function () {
if ($div.is(‘:visible’)) {
$div.animate({ height: 0 }, { duration: 2500, complete: function () {
$div.hide();
} });
} else {
$div.show().animate({ height : height }, { duration: 2500 });
}

return false;
});
});
</script>
Ainda no HTML agora dentro da tag <body> insira um link:

<div><a href=”#test”>Revelar</a></div>
Abaixo a divo onde vai contar a Box:

<div id=”container”>
<div id=”test”>
<p>Olá, </p>
<p id=”hello”>Este conteúdo esta bloqueado até o momento de ser revelado ao clicar em “Revelar” :-) </p>
<p>Aqui você entra com o conteúdo que você quiser, não hamisterio para fazer isso, script muito fácil de ser executado, mais um tutorial da <strong>Agência de Web</strong> Arara Azul Websites, a sua agência de <a title=”Criação de sites” href=”http://www.araraazulwebsites.com.br”>Criação de sites</a>.</p>
<p>Tudo o que esta nesta DIV vai ficar dentro da box escondida. Espero que tenham gostado, comentem lá no blogo suas dúvidas, críticas ou elogios.</p>
<p>Vlw, fui. Só clicar em REVELAR novamente q isso tudo aqui some… XD</p>
</div>
</div>
Obs.:
O id que esta definido na div “<div id=”test”>” é o mesmo que foi definido na função, por tanto se você mudar esse (Aconselho não mudar) você vai ter q mudar na função também.

CSS:
Vamos adicionar agora o CSS, dentro da tag <head> pode ser acima da função, adicione o seguinte código CSS:
<style type=”text/css” media=”screen”>
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; font-size: 16px; line-height: 20px; padding: 20px; }
a { line-height: 40px; }
#container { width: 300px; }
#test { background: #395aff; color: #fff; }
#test p { margin: 0; margin-bottom: 16px; }
</style>

Pronto, é só isso…

Clique aqui para ver um exemplo funcionando.

Qualquer dúvida só postar aqui que estarei respondendo.

Um abraço e até a próxima.

Leonardo Cardoso
Criação de sites

Nenhum post relacionado.

]]> http://www.araraazulwebsites.com.br/blog/2009/04/18/jump-animacao-com-jquery/feed/ 1