Escolar Documentos
Profissional Documentos
Cultura Documentos
org/Blog"><head>
<meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Voc sabia que j possvel criar interfaces ricas sem escrever cdigo JavaScript? Nesse artigo voc confere algumas implementaes de elementos de interfaces ricas que utilizam apenas CSS3."> <link rel="canonical" href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/"> <link href="http://tableless.com.br/favicon.png" rel="icon" sizes="64x64"> <link rel="stylesheet" type="text/css" href="http://tableless.com.br/wp-content/themes/tableless/css/normalize.css" media="all"> <link rel="stylesheet" type="text/css" href="http://tableless.com.br/wp-content/themes/tableless/style.css" media="screen"> <link rel="stylesheet" type="text/css" href="http://tableless.com.br/wp-content/themes/tableless/js/prettify/src/prettycss.css" media="all"> <link rel="stylesheet" type="text/css" href="http://tableless.com.br/wp-content/themes/tableless/css/mobile.css" media="screen and (max-width:920px)"> <link rel="stylesheet" type="text/css" href="http://tableless.com.br/wp-content/themes/tableless/css/royalslider.css" media="screen and (max-width:640px)"> <link rel="stylesheet" type="text/css" href="http://tableless.com.br/wp-content/themes/tableless/css/print.css" media="print"> <link rel="pingback" href="http://tableless.com.br/xmlrpc.php"> <!-- This site is optimized with the Yoast WordPress SEO plugin v1.4.15 - http://yoast.com/wordpress/seo/ --><title>Elementos de interface utilizando apenas CSS3 - Tableless</title><meta name="robots" content="noodp,noydir"/><meta name="description" content="Voc sabia que j possvel criar interfaces ricas sem cdigo JavaScript? Nesse artigo voc confere algumas implementaes que utilizam apenas CSS3"/><link rel="canonical" href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/" /><link rel="publisher" href="https://plus.google.com/u/1/b/110760106663830150111/110760106663830150111/posts"/><meta property="og:locale" content="pt_BR"/><meta property="og:type" content="article"/><meta property="og:title" content="Elementos de interface utilizando apenas CSS3 - Tableless"/><meta property="og:description" content="Voc sabia que j possvel criar interfaces ricas sem cdigo JavaScript? Nesse artigo voc confere algumas implementaes que utilizam apenas CSS3"/><meta property="og:url" content="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/"/><meta property="og:site_name" content="Tableless "/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/interface-css3-589x310.png"/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/gallery-css.jpg"/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/lightbox-css.jpg"/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/dropdown-css.jpg"/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/tabs-css.jpg"/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/tooltip-css.jpg"/><meta property="og:image" content="http://tableless.com.br/wp-content/uploads/2013/05/buttons-css.jpg"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@tableless"/><meta name="twitter:domain" content="Tableless "/><meta name="twitter:creator" content="@tableless"/><!-- / Yoast WordPress SEO plugin. --><link rel="alternate" type="application/rss+xml" title="Feed de Tableless
»
href='http://tableless.com.br/wp-content/plugins/jetpack/modules/widgets/widget-grid-and-list.css?ver=3.6' type='text/css' media='all' /><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script><link rel='shortlink' href='http://wp.me/p1vY5N-9Ib' /><link rel="payment" type="text/html" title="Flattr this!" href="https://flattr.com/submit/auto?user_id=tableless&popout=1&url=http%3A%2F%2Ftableless.com.br%2Felementos-de-interface-utilizando-apenas-css3%2F&language=pt_PT&category=text&title=Elementos+de+interface+utilizando+apenas+CSS3&description=Se+por+um+lado+est%C3%A1+na+hora+de+voc%C3%AA+parar+de+usar+jQuery+para+tudo+e+investir+mais+em+c%C3%B3digos+JavaScript%2C+por+outro+j%C3%A1+%C3%A9+poss%C3%ADvel+criar+elementos+animados+e...&tags=2013%2Canimacao+css%2Ccss2%2CCSS3%2Celementos+de+interface%2Chtml%2Cinterface%2CJavascript%2Cblog" /><style type='text/css'>img#wpstats{display:none}</style></head><body class="single single-post postid-37335 single-format-standard"><div class="main"> <header class="header"> <div class="limit">
<span class="menuAnchor">Menu</span>
<ul id="menu-social" class="socialLinks"><li id="menu-item-4091" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4091"><a title="Siga-nos os bons" href="http://twitter.com/tableless">Twitter</a></li><li id="menu-item-4092" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4092"><a title="Nossa pgina no Facebook" href="http://www.facebook.com/tablelessbr">Facebook</a></li><li id="menu-item-4093" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4093"><a title="Nossas novidades direto no Feed RSS" href="http://tableless.com.br/feed">FEED Rss</a></li><li id="menu-item-7790" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7790"><a href="https://plus.google.com/u/1/+tableless?rel=publisher">Google+</a></li></ul>
<h1 class="logo"><a href="http://tableless.com.br" title="Desenvolvimento inteligente com padres web e design">Tableless </a></h1>
</fieldset>
</form>
<div class="menuPrincipal">
<menu type="list">
<li id="menu-item-7636" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-7636"><a href="http://tableless.com.br/">Blog</a></li><li id="menu-item-7789" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7789"><a title="Caneca, livros, broches" href="http://tableless.com.br/loja/">Lojinha</a></li><li id="menu-item-38542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38542"><a href="http://tableless.com.br/anuncie-no-tableless/">Anuncie</a></li><li id="menu-item-7996" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7996"><a href="http://tableless.com.br/servicos/">Nossos Servios</a></li><li id="menu-item-4897" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4897"><a href="http://tableless.com.br/forum/?utm_source=tableless&utm_medium=link&utm_campaign=linkAtalho">Frum</a></li><li id="menu-item-7857" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7857"><a href="http://workajobs.com.br/?utm_source=tableless&utm_medium=linkToolbar&utm_campaign=workajobs">Vagas e Trampos</a></li><li id="menu-item-4899" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4899"><a href="http://campus.tableless.com.br/">Vdeos Tutoriais</a></li><li id="menu-item-17988" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17988"><a href="http://tableless.com.br/tablelessconf">Nosso Evento</a></li><li id="menu-item-7641" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7641"><a href="http://tableless.com.br/contato/">Contato</a></li>
</menu>
<nav class="menu-menu-principal-container"><ul id="menu-menu-principal" class="limit"><li id="menu-item-37363" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-37363"><a href="http://tableless.com.br/categoria/o-basico/">Para Iniciantes</a></li><li id="menu-item-5272" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5272"><a href="http://tableless.com.br/categoria/client-side/html-css/css3/">CSS3</a></li><li id="menu-item-5273" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5273"><a href="http://tableless.com.br/categoria/client-side/html-css/html5-client-side/">HTML5</a></li><li id="menu-item-5277" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5277"><a href="http://tableless.com.br/categoria/client-side/javascript/">Javascript</a></li><li id="menu-item-5278" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5278"><a href="http://tableless.com.br/categoria/client-side/jquery/">JQuery</a></li><li id="menu-item-5276" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5276"><a href="http://tableless.com.br/categoria/wordpress/">WordPress</a></li><li id="menu-item-5275" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5275"><a href="http://tableless.com.br/categoria/usabilidade-2/">UX & Design</a></li><li id="menu-item-5279" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5279"><a href="http://tableless.com.br/categoria/seo/">SEO</a></li><li id="menu-item-5269" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5269"><a href="http://tableless.com.br/categoria/acessibilidade-2/">Acessibilidade</a></li><li id="menu-item-5270" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5270"><a href="http://tableless.com.br/categoria/artigos/">Artigos</a></li><li id="menu-item-7642" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7642"><a href="http://tableless.com.br/categoria/artigos/traducoes/">Tradues</a></li></ul></nav>
<header>
<figure class="imgpost"><a href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/"><img src="http://tableless.com.br/wp-content/uploads/2013/05/interface-css3.png" itemprop="image" alt="Imagem post: Elementos de interface utilizando apenas CSS3"></a></figure>
<p itemprop="headline">Voc sabia que j possvel criar interfaces ricas sem escrever cdigo JavaScript? Nesse artigo voc confere algumas implementaes de elementos de interfaces ricas que utilizam apenas CSS3.</p>
</header>
-->
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=diegoeis"></script> </div> <span class="commentsNumber"><a href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/#comments" title="Comentrio para Elementos de interface utilizando apenas CSS3"><span class="dsq-postid" rel="37335 http://tableless.com.br/?p=37335">25</span></a></span></div>
<p>Se por um lado est na hora de voc <a href="http://tableless.com.br/criando-um-plugin-javascript-sem-jquery/">parar de usar jQuery para tudo e investir mais em cdigos JavaScript</a>, por outro j possvel criar elementos animados e interativos utilizando apenas CSS3.</p><p> claro que voc vai precisar abrir mo de efeitos em navegadores antigos (ou, na maioria dos casos, da implementao inteira). claro tambm que as implementaes so at certo ponto limitadas em comparao a
plugins e bibliotecas JavaScript, mas do um show em performance e otimizao.</p><p>Botes, galerias/slides, tabs e at mesmo o famoso efeito de lightbox j podem ser implementados sem nenhuma linha de JavaScript. Confira alguns exemplos.</p><h2>Galeria</h2><p><a href="http://benschwarz.github.io/gallery-css/" title="http://benschwarz.github.io/gallery-css/"><img src="http://tableless.com.br/wp-content/uploads/2013/05/gallery-css.jpg" alt="gallery-css" width="660" height="342" class="alignnone size-full wp-image-37344" /></a></p><p><a href="http://benschwarz.github.io/gallery-css/" title="http://benschwarz.github.io/gallery-css/">http://benschwarz.github.io/gallery-css/</a></p><p>Ben Schwarz caprichou e lanou recentemente uma galeria utilizando apenas CSS3. A galeria permite controles personalizados e vem com uma animao para autoplay. </p><p>Os slides podem conter qualquer contedo em HTML e o grande segredo por trs dessa galeria o uso de ncoras (#) aliado a elementos com position:absolute e o pseudo-atributo <a href="http://www.w3.org/TR/css3-selectors/#target-pseudo" title="http://www.w3.org/TR/css3-selectors/#target-pseudo">:target</a>.</p><p>O pseudo atributo target aplicado em elementos referenciados por uma ncora. Por exemplo, sua pgina tem um elemento section com o id “section-1″ e um link para a ncora #section-1. Quando o usurio clicar nesse link, o CSS definido na regra section:target ser aplicado no elemento #section-1.</p><h2>Lightbox</h2><p><a href="http://tympanus.net/codrops/2011/12/26/css3-lightbox/" title="http://tympanus.net/codrops/2011/12/26/css3-lightbox/"><img src="http://tableless.com.br/wp-content/uploads/2013/05/lightbox-css.jpg" alt="lightbox-css" width="660" height="342" class="alignnone size-full wp-image-37345" /></a></p><p><a href="http://tympanus.net/codrops/2011/12/26/css3-lightbox/" title="http://tympanus.net/codrops/2011/12/26/css3-lightbox/">http://tympanus.net/codrops/2011/12/26/css3-lightbox/</a></p><p>O efeito Lightbox um dos grandes responsveis pela popularizao do JavaScript e suas bibliotecas. Hoje j existem centenas de clones do original, com diferentes configuraes e a verso CSS supera muitas dessas implementaes em JavaScript.</p><h2>Menu Dropdown</h2><p><a href="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu" title="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu"><img src="http://tableless.com.br/wp-content/uploads/2013/05/dropdown-css.jpg" alt="dropdown-css" width="660" height="342" class="alignnone size-full wp-image-37343" /></a></p><p><a href="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu" title="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu">http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu</a></p><p>Outro elemento bastante popular em JavaScript o menu dropdown.
Sua verso CSS usa apenas o atributo :hover dos links para exibir e esconder os mltiplos nveis de submenus.</p><p>Ainda d para usar algum tipo de transition ou animation para deixar o menu mais atraente. Quem se habilita? <img src='http://tableless.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p><h2>Abas</h2><p><a href="http://www.sitepoint.com/css3-tabs-using-target-selector/" title="http://www.sitepoint.com/css3-tabs-using-target-selector/"><img src="http://tableless.com.br/wp-content/uploads/2013/05/tabs-css.jpg" alt="tabs-css" width="660" height="342" class="alignnone size-full wp-image-37346" /></a></p><p><a href="http://www.sitepoint.com/css3-tabs-using-target-selector/" title="http://www.sitepoint.com/css3-tabs-using-target-selector/">http://www.sitepoint.com/css3-tabs-using-target-selector/</a></p><p>E que tal uma interface separada por abas sem usar JavaScript? isso que este tutorial do Sitepoint oferece, mais uma vez fazendo uso do atributo target.</p><h2>Tooltip</h2><p><a href="http://kushagragour.in/lab/hint/" title="http://kushagragour.in/lab/hint/"><img src="http://tableless.com.br/wp-content/uploads/2013/05/tooltip-css.jpg" alt="tooltip-css" width="660" height="342" class="alignnone size-full wp-image-37347" /></a></p><p><a href="http://kushagragour.in/lab/hint/" title="http://kushagragour.in/lab/hint/">http://kushagragour.in/lab/hint/</a></p><p>Tooltips possuem dezenas de implementaes utilizando JavaScript. Sua verso CSS3 usa e abusa dos pseudo atributos <a href="http://www.w3.org/TR/css3-selectors/#gen-content">:after e :before</a>. </p><p>Uma nota importante: as transies nos atributos after e before s foram implementadas recentemente no Chrome (verso 26). Nada que impea a tooltip de funcionar – ela apenas ser renderizada sem animaes.</p><h2>Botes</h2><p><a href="http://hellohappy.org/css3-buttons/" title="http://hellohappy.org/css3-buttons/"><img src="http://tableless.com.br/wp-content/uploads/2013/05/buttons-css.jpg" alt="buttons-css" width="660" height="342" class="alignnone size-full wp-image-37342" /></a></p><p><a href="http://hellohappy.org/css3-buttons/" title="http://hellohappy.org/css3-buttons/">http://hellohappy.org/css3-buttons/</a></p><p>No s JavaScript que pode ser cortado – tambm podemos parar de utilizar sprites para botes. Hoje em dia j possvel criar botes consistentes e interativos utilizando apenas CSS3.</p><p>O designer Chad Mazzola mantm um repositrio de botes “que utilizam o markup mais simples possvel”. Este um bom ponto de partida, mas os exemplos de botes utilizando apenas CSS so os mais fceis de encontrar.</p><h2>Evento de clique</h2><p><a href="http://www.ryancollins.me/?p=1041" title="http://www.ryancollins.me/?p=1041">http://www.ryancollins.me/?p=1041</a></p><p>Esse ltimo exemplo no bem um elemento, mas sim uma aplicao do evento de clique utilizando o atributo active de um elemento. Com poucas linhas de cdigo possvel exibir/esconder um menu ao clicar em um boto.</p><p>E voc, j deixou de fazer alguma coisa em JavaScript para implementar utilizando apenas CSS? Diz a nos comentrios!</p><p class="wp-flattr-button"><a class="FlattrButton" style="display:none;" href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/" title=" Elementos de interface utilizando apenas CSS3" rev="flattr;uid:tableless;language:pt_PT;category:text;tags:2013,animacao css,css2,CSS3,elementos de interface,html,interface,Javascript,blog;">Se por um lado est na hora de voc parar de usar jQuery para tudo e investir mais em cdigos JavaScript, por outro j possvel criar elementos animados e...</a></p>
<footer>
-->
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=diegoeis"></script> </div> <span class="commentsNumber"><a href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/#comments" title="Comentrio para Elementos de interface utilizando apenas CSS3"><span class="dsq-postid" rel="37335 http://tableless.com.br/?p=37335">25</span></a></span></div>
<div id="author">
<a href="http://www.daviferreira.com/blog" id="author-image"><img alt='' src='http://0.gravatar.com/avatar/42622d486504b4cda83308da76890b93?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G' class='avatar avatar-60 photo' height='60' width='60' /></a>
<div class="author-bio">
<p>Programador apaixonado pelo que faz.Responsvel pelo desenvolvimento de sistemas e interfaces paraGlobo.com, Confederao Brasileira de Vlei, RicohBrasil, Embratel entre outros.</p>
<p><a href="http://www.daviferreira.com/blog">http://www.daviferreira.com/blog</a></p>
</div>
</div>
</footer>
<hr>
<div id="comments">
<div id="disqus_thread">
<div id="dsq-content">
<ul id="dsq-comments">
<cite id="dsq-cite-142492">http://twitter.com/LFeh
<span id="dsq-author-user-142492">Felipe</span>
</cite>
</div>
<div id="dsq-comment-message-142492" class="dsq-comment-message"><p>Desses elementos, uso o submenu em pure CSS desde 2009.</p><p>Mas ele tem um problema bem chato, no possvel definir o delay, o que torna a experiencia de navegao ruim para mais de 1 subnivel…</p><p>Uma pena. </p><p>De resto, acredito que boa parte j esteja usando as transies do CSS invs de usar javascript para isso. No funcionar em navegadores antigos no atrapalha em nada a experiencia do usurio.</p><p>A tendencia que elementos inteiro em CSS se tornem cada mais mais comuns.</p></div>
</div>
<cite id="dsq-cite-142494">
<span id="dsq-author-user-142494">Abigail</span>
</cite>
</div>
</div>
<cite id="dsq-cite-142495">http://fernandomhahne.net/
</cite>
</div>
<div id="dsq-comment-message-142495" class="dsq-comment-message"><p>Para mim, uma boa usar alguns frameworks CSS, como o Bootstrap, que tem vrias desses recursos em CSS ou com muito pouco JS.</p></div>
</div>
<cite id="dsq-cite-142496">http://www.facebook.com/arash.kaffashi
</cite>
</div>
<div id="dsq-comment-message-142496" class="dsq-comment-message"><p>Sempre que possvel deixo de usar javascript, ou pelo menos quando me custa menos linhas XD (contando os frameworks e etc, claro!).<br />Estou desenvolvendo meu mais novo projeto com Meteor e aproveitei para implantar o Bootstrap do Twitter, por isso, enquanto perco menos tempo com estilos triviais, coloco mais animaes CSS!</p></div>
</div>
<cite id="dsq-cite-142497">http://twitter.com/LFeh
<span id="dsq-author-user-142497">Felipe</span>
</cite>
</div>
<div id="dsq-comment-message-142497" class="dsq-comment-message"><p>Voc diz nos submenus?</p><p>Mesmo assim eles “somem” com qualquer clique fora da rea de hover, manja?</p></div>
</div>
<cite id="dsq-cite-142499">http://twitter.com/LFeh
<span id="dsq-author-user-142499">Felipe</span>
</cite>
</div>
<div id="dsq-comment-message-142499" class="dsq-comment-message"><p>A no ser que esteja falando em usar transition para diminuir a velocidade em que perde o “hover”, isso eu nunca tentei.</p></div>
</div>
<cite id="dsq-cite-142501">http://tableless.com.br/
</cite>
</div>
<div id="dsq-comment-message-142501" class="dsq-comment-message"><p>Ns temos um exemplo de lightbox em nosso GitHub. </p><p><a href="http://tableless.github.io/exemplos/lightboxcss/index.html" rel="nofollow">http://tableless.github.io/exemplos/lightboxcss/index.html</a></p></div>
</div>
<cite id="dsq-cite-142502">
</cite>
</div>
<div id="dsq-comment-message-142502" class="dsq-comment-message"><p>Fala em deixar de usar js pra economizar linhas e usa frameworks…meio controverso da sua parte no?</p></div>
</div>
<cite id="dsq-cite-142503">
<span id="dsq-author-user-142503">Guest</span>
</cite>
</div>
<div id="dsq-comment-message-142503" class="dsq-comment-message"><p>No pois eu nunca fui muito bom em server-side e banco de dados usando php e mysql.</p></div>
</div>
<cite id="dsq-cite-142504">http://www.facebook.com/arash.kaffashi
</cite>
</div>
<div id="dsq-comment-message-142504" class="dsq-comment-message"><p>Mas frameworks so bons dependendo do projeto.<br />Se voce ve que com jquery se tem, no total, um aplicativo mais leve e que custa menos tempo, claro que voce deve usar ele!</p></div>
</div>
<cite id="dsq-cite-142505">
</cite>
</div>
<div id="dsq-comment-message-142505" class="dsq-comment-message"><p>jquery nunca vai ser mais leve que js puro, se ele toma menos tempo ai bem provavel, mas mais leve no.</p></div>
</div>
<cite id="dsq-cite-142509">
<span id="dsq-author-user-142509">WellingtonFialho</span>
</cite>
</div>
<div id="dsq-comment-message-142509" class="dsq-comment-message"><p>Acho justo, sempre que cabvel ao tipo de projeto que estou trabalhando “restries”, tento usar ao mximo estes recursos de animao com CSS3.<br />Como Felipe disse e concordo, a tendencia que os elementos inteiros em CSS se tornem mais comuns daqui para frente, no tem porque correr ou evitar o uso dele quando se h a oportunidade de usa-los.</p></div>
</div>
<cite id="dsq-cite-142510">http://twitter.com/LFeh
<span id="dsq-author-user-142510">Felipe</span>
</cite>
</div>
</div>
<cite id="dsq-cite-142511">
<span id="dsq-author-user-142511">Thiago</span>
</cite>
</div>
</div>
<cite id="dsq-cite-142513">http://www.facebook.com/people/Ivan-Banov/1565469552
</cite>
</div>
<div id="dsq-comment-message-142513" class="dsq-comment-message"><p>O triste de usar apenas css que nao temos a opcao de fazer um preload por exemplo :/ mesmo assim a evolucao e agilidade que o css nos traz gigante, e acredito que o fato de alguns browser nao aceitarem tal comportamento nao desculpa pra nao ser utilizada tais tecnicas, use o melhor em quem pode aceitar o melhor (graceful degradation =D)</p></div>
</div>
<cite id="dsq-cite-142514">
</cite>
</div>
</div>
</li>
<cite id="dsq-cite-142616">
<span id="dsq-author-user-142616">Ambiss</span>
</cite>
</div>
<div id="dsq-comment-message-142616" class="dsq-comment-message"><p>Seria possvel usar o CSS como soluo para menus de navegao onde o link clicado muda de cor ao evento, para denotar ao usurio que ele est na pagina cujo link clicado mudou de cor?</p></div>
</div>
<p>Pingback: <a href='http://www.reweb.me/javascript/conheca-as-vantagens-e-desvantagens-do-novo-jquery-2-0/' rel='external nofollow' class='url'>Conhea as vantagens (e desvantagens) do novo jQuery 2.0 | ReWeb</a></p>
</li>
<cite id="dsq-cite-142629">
</cite>
</div>
<div id="dsq-comment-message-142629" class="dsq-comment-message"><p>@ambiss:disqus acho que esse recurso “automtico” s possivel com uso de js, porque o link da pgina pode vir de outro site, ou de um link que no seja do prpio menu de navegao, da preciso utilizar um script que faa esse tratamento…</p><p>S corrigindo uma coisa – o estado :active do seletor a se refere ao estilo do link qdo o clique ativo (qdo solta ele volta ao estado normal). o :visited que deixa rastros de quais links foram abertos.</p></div>
</div>
<cite id="dsq-cite-142630">
<span id="dsq-author-user-142630">Ambiss</span>
</cite>
</div>
<div id="dsq-comment-message-142630" class="dsq-comment-message"><p>Grande Joo, vlw pela resposta, imaginava mesmo que no tinha soluo pra isso com CSS. verdade me desculpe eu quis dizer :viseted.</p><p>Agora voc acha que o evento onClick( ) do JS pode ser emulado de alguma forma no CSS?</p></div>
</div>
</li>
<cite id="dsq-cite-142995">http://www.ambiss.com.br/
<span id="dsq-author-user-142995">Ambiss</span>
</cite>
</div>
</div>
<cite id="dsq-cite-143213">
</cite>
</div>
<div id="dsq-comment-message-143213" class="dsq-comment-message"><p>Algum tem esse tutorial do evento de click ai?<br />O link esta fora do ar…… =/</p></div>
</div>
<cite id="dsq-cite-143269">
</cite>
</div>
<div id="dsq-comment-message-143269" class="dsq-comment-message"><p> muito bom usar Frameworks prontos, eu uso sempre. Mas aprender a fazer na unha is good dimais !!!!</p></div>
</div>
</ul>
</div>
config.language = '';
/*
* preInit - fires after we get initial data but before we load any dependencies
* onInit
- fires when all dependencies are resolved but before dtpl template is rendered
*/
config.callbacks.preData.push(function() {
document.getElementById(disqus_container_id).innerHTML = '';
});
config.callbacks.onReady.push(function() {
script.async = true;
script.src = '?cf_action=sync_comments&post_id=37335';
firstScript.parentNode.insertBefore(script, firstScript);
});
var DsqLocal = {
'trackbacks': [
'author_name':
'author_url':
"http:\/\/tableless.com.br\/jquery-2-0\/",
'date':
'excerpt':
"[...] HTML5 e o CSS3 ganharam mais espao (afinal voc pode criar diversos elementos da user interface utilizando apenas estas …",
'type':
"pingback"
},
'author_name':
'author_url':
"http:\/\/www.reweb.me\/javascript\/conheca-as-vantagens-e-desvantagens-do-novo-jquery-2-0\/",
'date':
'excerpt':
"[...] HTML5 e o CSS3 ganharam mais espao (afinal voc pode criar diversos elementos da user interface utilizando apenas estas tecnologias) e …",
'type':
"pingback"
},
'author_name':
'author_url':
"http:\/\/www.programadorzero.net\/blog\/jquery-2-0\/",
'date':
'excerpt':
"[...] HTML5 e o CSS3 ganharam mais espao (afinal voc pode criar diversos elementos da user interface utilizando apenas estas tecnologias) e …",
'type':
"pingback"
],
'trackback_url': "http:\/\/tableless.com.br\/elementos-de-interface-utilizando-apenas-css3\/trackback\/"
dsq.async = true;
</div>
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-8115861735629092"
</div><div id="nav_menu-5" class="widget-container widget_nav_menu"><h3 class="widget-title">Nossos servios</h3><div class="menu-nos-fazemos-container"><ul id="menu-nos-fazemos" class="menu"><li id="menu-item-3657" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3657"><a title="Desenvolvimento de cdigo front-end semntico e compatvel" href="http://tableless.com.br/servicos/front-end.php?utm_source=sidebar&utm_medium=menuServicos&utm_campaign=tablelessNosFazemosFRONT">Produzimos seu cdigo front-end</a></li><li id="menu-item-4532" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4532"><a href="http://tableless.com.br/servicos/aula-particular.php?utm_source=sidebar&utm_medium=menuServicos&utm_campaign=tablelessNosFazemosAULA">Aula particular</a></li><li id="menu-item-4514" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4514"><a href="http://campus.tableless.com.br/?utm_source=sidebar&utm_medium=menuServicos&utm_campaign=linkCampusOnlineCAMPUS">Vdeos tutoriais</a></li></ul></div></div><div id="top-posts-2" class="widget-container widget_top-posts"><h3 class="widget-title">Mais visitados</h3><ul><li><a href="http://tableless.com.br/menu-retratil-com-css-e-jquery/" class="bump-view" data-bump-view="tp">Menu Retrtil com CSS e jQuery</a></li><li><a href="http://tableless.com.br/criando-um-menu-horizontal-com-css/" class="bump-view" data-bump-view="tp">Criando um Menu Horizontal com CSS</a></li><li><a href="http://tableless.com.br/5-razoes-nao-atendimento-redes-sociais/" class="bump-view" data-bump-view="tp">5 Razes para no fazer atendimento em redes sociais</a></li><li><a href="http://tableless.com.br/efeito-parallax-flash/" class="bump-view" data-bump-view="tp">Efeito Parallax, o novo Flash?</a></li><li><a href="http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/" class="bump-view" data-bump-view="tp">Design Responsivo na prtica: do rascunho ao digital</a></li></ul></div><div id="text-32" class="widget-container widget_text">
<div class="textwidget"><a href="javascript: void(0);" onclick="window.open('http://www.revistawide.com.br/peixegrande-link-voto/5540704E5B011B5349450A1450414E090C5B4A45FCD6C482830D55EE7A9CA5268F65CA','peixegrande','width=570,height=590')"><img src="http://www.newwws.com.br/imagesarteccom/peixegrande_SelosVOTE2013.png" alt="Concurso peixe Grande 2013" border="0" /></a></div>
<div class="textwidget"><!-- Begin MailChimp Signup Form --><div class="newsletter" id="mc_embed_signup"><form action="http://tableless.us5.list-manage.com/subscribe/post?u=37ca8a9582721a3edc47504fd&id=26928da126" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div class="mc-field-group"> <label for="mce-EMAIL">Email </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address"></div><div class="mc-field-group"> <label for="mce-FNAME">Primeiro nome</label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="Primeiro nome"></div><div class="mc-field-group"> <label for="mce-LNAME">Sobrenome</label> <input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Sobrenome"></div> <div id="mce-responses" class="clear">
<div class="response" id="mce-success-response" style="display:none"></div> </div> <div class="clear"><input type="submit" value="Cadastrar" name="subscribe" id="mc-embedded-subscribe" class="button"></div></form></div><!--End mc_embed_signup--></div>
onclick="_gaq.push(['_trackEvent', 'Sidebar', 'Click', 'Ultimo Post Sidebar']);"><img src="http://tableless.com.br/wp-content/uploads/2013/08/featured-image3.jpg" itemprop="image" alt="Imagem post: 5 Razes para no fazer atendimento em redes sociais"></a></figure>
<a href="http://tableless.com.br/5-razoes-nao-atendimento-redes-sociais/?utm_source=sidebar&utm_medium=bannerLast&utm_campaign=bannerPostSidebar" class="titLast" onclick="_gaq.push(['_trackEvent', 'Sidebar', 'Click', 'Ultimo Post Sidebar']);"> <h3 itemprop="name">5 Razes para no fazer atendimento em redes sociais</h3></a>
</div> </div>
<div class="textwidget"><!-- Place this tag in your head or just before your close body tag. --><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pt-BR'}</script><!-- Place this tag where you want the badge to render. --><g:plus href="https://plus.google.com/110760106663830150111" rel="publisher"></g:plus></div>
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-8115861735629092"
</div><div id="facebook-likebox-2" class="widget-container widget_facebook_likebox"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftablelessbr&width=300&height=262&colorscheme=light&show_faces=true&stream=false&show_border=true&header=false&force_wall=false&locale=pt_BR" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 300px;
<ul>
<li>
<a href="http://tableless.com.br/5-razoes-nao-atendimento-redes-sociais/" title="5 Razes para no fazer atendimento em redes sociais">5 Razes para no fazer atendimento em redes sociais</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
<a href="http://tableless.com.br/3-patinhos-passear-eram/" title="3 patinhos foram passear. Por que? Quem eram eles?">3 patinhos foram passear. Por que? Quem eram eles?</a>
</li>