Untitled

<!DOCTYPE html><html xmlns:fb="http://ogp.me/ns/fb#" lang="pt-br" itemscope itemtype="http://schema.
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"> <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"/><link rel="alternate" type="application/rss+xml" title="Feed de Tableless
»" href="http://tableless.com.br/feed/" /><link rel="alternate" type="application/rss+xml" title="Tableless
»
Feed de comentrios" href="http://tableless.com.br/comments/feed/" /><link rel="alternate" type="application/rss+xml" title="Tableless
» Elementos de interface utilizando apenas CSS3
Feed de comentrios" href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/feed/" /><link rel='stylesheet' id='jetpack-widgets-css'
href='http://tableless.com.br/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003' type='text/css' media='all' /><link rel='stylesheet' id='widget-grid-and-list-css'
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>
<form role="search" method="get" id="searchform" action="http://tableless.com.br" >
<fieldset><label class="screen-reader-text" for="s">
<input type="text" value="" name="s" id="s" /></label>
<input type="submit" id="searchsubmit" value="Buscar" />
</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>
</div> </div> </header>
<section class="content limit"> <article itemprop="articleBody">
<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>
<time datetime="2013-05-09 9:00"> 9 de maio de 2013</time>
<a href="http://tableless.com.br/?cat=224" class="categ">CSS3</a>
<h1 itemprop="name"><a href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/">Elementos de interface utilizando apenas CSS3</a></h1>
<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>
<span class="author">Por <a href="http://tableless.com.br/?author=7" rel="author"><strong>Davi Ferreira</strong></a></span>
</header>
<div class="socialBar"> <div class="toolbar-social">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_tweet" tw:via="tableless"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>



</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<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 class="socialBar"> <div class="toolbar-social">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_tweet" tw:via="tableless"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>



</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<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">
<h3>Por <a rel="me" href="http://tableless.com.br/?author=7">Davi Ferreira</a></h3>
<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>
<a href="http://tableless.com.br/?author=7" class="morePostsAuthor btn">Mais posts do autor</a>
</div>
</div>
</footer>
<hr>
<div id="comments">
<div id="disqus_thread">
<div id="dsq-content">
<ul id="dsq-comments">
<li class="comment even thread-even depth-1" id="dsq-comment-142492">
<div id="dsq-comment-header-142492" class="dsq-comment-header">
<cite id="dsq-cite-142492">http://twitter.com/LFeh
<span id="dsq-author-user-142492">Felipe</span>
</cite>
</div>
<div id="dsq-comment-body-142492" class="dsq-comment-body">
<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>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-142494">
<cite id="dsq-cite-142494">
<span id="dsq-author-user-142494">Abigail</span>
</cite>
</div>
<div id="dsq-comment-message-142494" class="dsq-comment-message"><p>Mas d pra usar um transition neles.</p></div>
</div>
</li>
<cite id="dsq-cite-142495">http://fernandomhahne.net/
<span id="dsq-author-user-142495">Fernando Miguel Hahne</span>
</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>
</li>
<cite id="dsq-cite-142496">http://www.facebook.com/arash.kaffashi
<span id="dsq-author-user-142496">Arash Kaffashi</span>
</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>
</li>
</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>
</li>
</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>
</li>
<cite id="dsq-cite-142501">http://tableless.com.br/
<span id="dsq-author-user-142501">Diego Eis</span>
</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>
</li>
<span id="dsq-author-user-142502">joao henrique</span>
</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>
</li>
<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>
</li>
<cite id="dsq-cite-142504">http://www.facebook.com/arash.kaffashi
<span id="dsq-author-user-142504">Arash Kaffashi</span>
</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>
</li>
<span id="dsq-author-user-142505">joao henrique</span>
</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>
</li>
<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>
</li>
</cite>
</div>
<div id="dsq-comment-message-142510" class="dsq-comment-message"><p>Verdade.</p></div>
</div>
</li>
<span id="dsq-author-user-142511">Thiago</span>
</cite>
</div>
<div id="dsq-comment-message-142511" class="dsq-comment-message"><p>teste</p></div>
</div>
</li>
<cite id="dsq-cite-142513">http://www.facebook.com/people/Ivan-Banov/1565469552
<span id="dsq-author-user-142513">Ivan Banov</span>
</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>
</li>
<span id="dsq-author-user-142514">Wallace Erick</span>
</cite>
</div>
<div id="dsq-comment-message-142514" class="dsq-comment-message"><p>Muito boa coleo.</p></div>
</div>
</li>
<li class="post pingback">
<p>Pingback: <a href='http://tableless.com.br/jquery-2-0/' rel='external nofollow' class='url'>jQuery 2.0 - Tableless</a></p>
</li>
</li>
<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>
</li>
<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>
</li>
<span id="dsq-author-user-142629">Joao A T Nogueira</span>
</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>
</li>
</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>
<p>Pingback: <a href='http://www.programadorzero.net/blog/jquery-2-0/' rel='external nofollow' class='url'>jQuery 2.0 : Programador zero</a></p>
</li>
</li>
<cite id="dsq-cite-142995">http://www.ambiss.com.br/
</cite>
</div>
<div id="dsq-comment-message-142995" class="dsq-comment-message"><p>Valeu amigo <img src='http://tableless.com.br/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />
Era isso mesmo</p></div>
</div>
</li>
<span id="dsq-author-user-143213">Carlos Augusto</span>
</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>
</li>
<span id="dsq-author-user-143269">Paulo Dias</span>
</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>
</li>
</ul>
</div>
</div><script type="text/javascript">/* <![CDATA[ */
var disqus_url = 'http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/';
var disqus_identifier = '37335 http://tableless.com.br/?p=37335';
var disqus_container_id = 'disqus_thread';
var disqus_domain = 'disqus.com';
var disqus_shortname = 'tableless';
var disqus_title = "Elementos de interface utilizando apenas CSS3";
var disqus_config = function () {
var config = this; // Access to the config object
config.language = '';
/*
All currently supported events:
* preData fires just before we request for initial data
* 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
* afterRender - fires when template is rendered but before we show it
* onReady - everything is done
*/
config.callbacks.preData.push(function() {
// clear out the container (its filled for SEO/legacy purposes)
document.getElementById(disqus_container_id).innerHTML = '';
});
config.callbacks.onReady.push(function() {
// sync comments in the background so we don't block the page
var script = document.createElement('script');
script.async = true;
script.src = '?cf_action=sync_comments&post_id=37335';
var firstScript = document.getElementsByTagName( "script" )[0];
firstScript.parentNode.insertBefore(script, firstScript);
});
};/* ]]> */</script><script type="text/javascript">/* <![CDATA[ */
var DsqLocal = {
'trackbacks': [
'author_name':
"jQuery 2.0 - Tableless",
'author_url':
"http:\/\/tableless.com.br\/jquery-2-0\/",
'date':
"05\/23\/2013 10:59 AM",
'excerpt':
"[...] HTML5 e o CSS3 ganharam mais espao (afinal voc pode criar diversos elementos da user interface utilizando apenas estas …",
'type':
"pingback"
},
'author_name':
"Conhea as vantagens (e desvantagens) do novo jQuery 2.0 | ReWeb",
'author_url':
"http:\/\/www.reweb.me\/javascript\/conheca-as-vantagens-e-desvantagens-do-novo-jquery-2-0\/",
'date':
"05\/27\/2013 10:01 AM",
'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':
"jQuery 2.0 : Programador zero",
'author_url':
"http:\/\/www.programadorzero.net\/blog\/jquery-2-0\/",
'date':
"06\/14\/2013 10:16 AM",
'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\/"
};/* ]]> */</script><script type="text/javascript">/* <![CDATA[ */(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.' + 'disqus.com' + '/embed.js?pname=wordpress&pver=2.74';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);})();/* ]]> */</script>
</div>
</article> <aside class="sidebar">
<div id="text-20" class="widget-container widget_text">
<div class="textwidget"><script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-8115861735629092"
data-ad-slot="9772200027"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
</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="http://tableless.com.br/loja/?utm_source=sidebar&utm_medium=bannerSidebarLoja&utm_campaign=bannerLojaSidebar"><img src="http://tableless.com.br/loja/img/visite-loja-banner.jpg" alt="Visite nossa loja"></a></div>
</div><div id="text-31" class="widget-container widget_text"><h3 class="widget-title">Vote no Tableless</h3>
<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><div id="text-28" class="widget-container widget_text"><h3 class="widget-title">Seja um autor</h3>
<div class="textwidget"><ul><li><a href="http://tableless.com.br/seja-um-autor/?utm_source=sidebar&utm_medium=sejaAutor&utm_campaign=linkSejaAutor">Quer escrever no Tableless?</a></li></ul></div>
</div><div id="text-30" class="widget-container widget_text"><h3 class="widget-title">Newsletter</h3>
<div class="textwidget"><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-error-response" style="display:none"></div>
<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></div>
</div><div id="execphp-5" class="widget-container widget_execphp">
<div class="execphpwidget"> <div id="last-post-37335" class="last-post">
<figure class="imgpost"><a href="http://tableless.com.br/5-razoes-nao-atendimento-redes-sociais/?utm_source=sidebar&utm_medium=bannerLast&utm_campaign=bannerPostSidebar"
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><div id="text-22" class="widget-container widget_text">
<div class="textwidget"><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pt-BR'}</script><g:plus href="https://plus.google.com/110760106663830150111" rel="publisher"></g:plus></div>
</div><div id="text-11" class="widget-container widget_text">
<div class="textwidget"><script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-8115861735629092"
data-ad-slot="5410841979"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
</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;
height: 262px; background: #fff"></iframe></div>
<div id="recent-posts-6" class="widget-container widget_recent_entries">
<h3 class="widget-title">Mais recentes</h3>
<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>
<a href="http://tableless.com.br/efeito-parallax-flash/" title="Efeito Parallax, o novo Flash?">Efeito Parallax, o novo Flash?</a>
</li>
<li>
<a href="http://tableless.com.br/reducao-progressiva/" title="Reduo Progressiva">Reduo Progressiva</a>
</li>
<li>
<a href="http://tableless.com.br/sobre-organizar-informacao/" title="Sobre organizar informao">Sobre organizar informao</a>
</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>

Untitled

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Untitled

Hochgeladen von

Copyright:

Verfügbare Formate

<!DOCTYPE html><html xmlns:fb="http://ogp.me/ns/fb#" lang="pt-br" itemscope itemtype="http://schema.

&raquo;" href="http://tableless.com.br/feed/" /><link rel="alternate" type="application/rss+xml" title="Tableless

Feed de comentrios" href="http://tableless.com.br/comments/feed/" /><link rel="alternate" type="application/rss+xml" title="Tableless

&raquo; Elementos de interface utilizando apenas CSS3

Feed de comentrios" href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/feed/" /><link rel='stylesheet' id='jetpack-widgets-css'

href='http://tableless.com.br/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003' type='text/css' media='all' /><link rel='stylesheet' id='widget-grid-and-list-css'

<form role="search" method="get" id="searchform" action="http://tableless.com.br" >

<fieldset><label class="screen-reader-text" for="s">

<input type="text" value="" name="s" id="s" /></label>

<input type="submit" id="searchsubmit" value="Buscar" />

</div> </div> </header>

<section class="content limit"> <article itemprop="articleBody">

<time datetime="2013-05-09 9:00"> 9 de maio de 2013</time>

<a href="http://tableless.com.br/?cat=224" class="categ">CSS3</a>

<h1 itemprop="name"><a href="http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/">Elementos de interface utilizando apenas CSS3</a></h1>

<span class="author">Por <a href="http://tableless.com.br/?author=7" rel="author"><strong>Davi Ferreira</strong></a></span>

<div class="socialBar"> <div class="toolbar-social">

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_button_tweet" tw:via="tableless"></a>

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

<!-- <a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend"></a>

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

<div class="socialBar"> <div class="toolbar-social">

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_button_tweet" tw:via="tableless"></a>

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

<!-- <a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend"></a>

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

<h3>Por <a rel="me" href="http://tableless.com.br/?author=7">Davi Ferreira</a></h3>

<a href="http://tableless.com.br/?author=7" class="morePostsAuthor btn">Mais posts do autor</a>

<li class="comment even thread-even depth-1" id="dsq-comment-142492">

<div id="dsq-comment-header-142492" class="dsq-comment-header">

<div id="dsq-comment-body-142492" class="dsq-comment-body">

</li>

<li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-142494">

<div id="dsq-comment-header-142494" class="dsq-comment-header">

<div id="dsq-comment-body-142494" class="dsq-comment-body">

<div id="dsq-comment-message-142494" class="dsq-comment-message"><p>Mas d pra usar um transition neles.</p></div>

</li>

<li class="comment even thread-even depth-1" id="dsq-comment-142495">

<div id="dsq-comment-header-142495" class="dsq-comment-header">

<span id="dsq-author-user-142495">Fernando Miguel Hahne</span>

<div id="dsq-comment-body-142495" class="dsq-comment-body">

</li>

<li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-142496">

<div id="dsq-comment-header-142496" class="dsq-comment-header">

<span id="dsq-author-user-142496">Arash Kaffashi</span>

<div id="dsq-comment-body-142496" class="dsq-comment-body">

</li>

<li class="comment even thread-even depth-1" id="dsq-comment-142497">

<div id="dsq-comment-header-142497" class="dsq-comment-header">

<div id="dsq-comment-body-142497" class="dsq-comment-body">

</li>

<li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-142499">

<div id="dsq-comment-header-142499" class="dsq-comment-header">

<div id="dsq-comment-body-142499" class="dsq-comment-body">

</li>

<li class="comment even thread-even depth-1" id="dsq-comment-142501">

»" href="http://tableless.com.br/feed/" /><link rel="alternate" type="application/rss+xml" title="Tableless

» Elementos de interface utilizando apenas CSS3