Tag: CSS


  • Fiz uma pequena experiência com animações CSS: O truque é usar gradientes CSS e animar o background-size e background position. Fiz isso em várias camadas, com opacidade variável. Veja aqui.

  • Aprenda os fundamentos: cores no CSS

    Quando você se deparar com algum tipo de código, tenha a curiosidade de decifrá-lo. Me impressiono com a quantidade de programadores que precisam escrever CSS com regularidade e nunca pararam para entender o significado dos código de cores. É simples: uma cor RGB é composta de três números, representando as cores vermelho (R), verde (G)…

  • Agora que o Internet Explorer 8 morreu, e o número de usuários do Internet Explorer 9 é quase insignificante, há uma porção de recursos do CSS que finalmente podemos usar. Essa é a primeira palestra de uma série, que inclui outros recursos do CSS, HTML5, SVG e Javascript. Em breve publicarei as outras, incluindo vídeos.…

  • Mandei esse e-mail para o pessoal da Visie: Pessoal, Quando foi a última vez que você fez um site na Visie que não tinha versão mobile? Então. Tudo tem que funcionar no celular. É praxe. O que não for responsivo é a exceção. Então, ao receber um wireframe, layout ou especificação do projeto, não precisa…

  • Dica do Hans Mösl no grupo de trabalho de acessibilidade do W3C Brasil: Plugin de Acessibilidade para Twitter Bootstrap. Plugin de código aberto, no GitHub. Promete tornar acessíveis uma porção de componentes Javascript do Bootstrap e, até onde eu consegui conferir, funciona muito bem. Considere incluir em seu próximo projeto. Considere incluir nos seus projetos…

  • Minha palestra no GAiN

    Update: saiu o vídeo: Tendências para o futuro da Web: uma leitura a partir do trabalho do W3C – SAC/GAiN 2014. Apresentei hoje cedo uma palestra no GAiN, um encontro de profissionais de comunicação e internet da minha igreja. Há um tempo que venho falando às pessoas que trabalham com internet na igreja sobre os…

  • Tabelas responsivas de um jeito fácil: “There are a lot of very clever responsive table solutions available now. There are solutions that flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and even allow partial scrolling across the table. All of them are…

  • O que vai acontecer com seu site WordPress se ele receber muitas visitas? Aprenda neste Workshop as técnicas e segredos para manter seu site no ar, mesmo sob intenso tráfego. Site bom é site rápido A Amazon fez um trabalho de redução do tempo de carregamento em suas páginas e descobriu que cada décimo de…

  • Site Recomendado: TidBits

    A recomendação desse mês é o TidBits. O Danilo tem feito interessantíssimos experimentos com HTML5 e CSS3, sempre postando o código e explicando. Além disso, tem dicas, notícias e outros assuntos interessantes, principalmente para quem trabalha com front-end.

  • HTML5 é mais que canvas

    Acesse o HTML5 Please. Clique em use e dê uma olhada na lista. Agora clique em use with caution e confira a lista. Viu quanta coisa? Por que a maioria dos exemplos de site em HTML5 brasileiros, dois anos depois de começarmos a usar esse treco, ainda são um mark-up levemente vitaminado e canvas? Onde…

  • Discussões sobre o melhor sistema operacional, o melhor navegador ou a melhor linguagem de programação tendem a entrar em loop infinito. Cada um dos lados parece achar o outro um completo idiota por não se convencer de suas opiniões. Semana passada troquei algumas mensagens com o René de Paula que me fizeram pensar bastante sobre…

  • Algumas pessoas têm me escrito perguntando como extender o validador de formulários universal que publiquei há algum tempo. O manual do programador é um excelente recurso para isso. Mas você que é de São Paulo, tem a oportunidade de ver tudo funcionando ao vivo. Nessa quinta-feira, na palestra “Formulários Definitivos“, vou construir um validador igualzinho…

  • Novo Tableless

    O Diego colocou no ar agora há pouco: www.tableless.com.br Layout novo. Eu gostei bastante.

  • ClientSide: mostre seu código

    Está lançado: clientside.com.br. É um site para falar sobre Javascript, Ajax, CSS, XHTML. Mas não é um site para opinião e recomendações, é um lugar para você ler sobre código, ler código, e colaborar. O site é aberto ao cadastro e colaboração dos usuários, embora todos os artigos devam ser aprovados pelos editores. Entenda a…

  • EyeOS

    Ei, está legal isso aqui: http://www.eyeos.info/ Não é útil, mas dá uma boa idéia a respeito do que é possível fazer.

  • Veja como essa notícia no Terra explica mal as coisas e espalha o terror: A versão mais recente do navegador Firefox, a 2.0.0.5, possui uma falha em seu gerenciador de senhas que pode permitir o acesso a elas por sites maliciosos. O problema só se manifesta se o Javascript e o gerenciador de senhas estiverem…

  • CSS de impressão no fechaTag

    Acabo de criar um CSS de impressão para este blog. Levei uns dez minutos. O código ficou assim: form,#sidebar,iframe,#otop,#respond,.navigation,.rec6,.linkk{ display:none; } h2{ margin:0; } .entry{ line-height: 150%; } #header h1{ margin:0; padding:0; font-size:24px; } #header .description{ padding:0; } h2{ padding:40px 0 0; margin:0; } E o resultado: Em suma: você esconde tudo o que não…

  • Imite o Mac OS X você também

    Dashboard, Exposè, estilo Aqua, tudo já foi copiado no elegante Mac OS X. Mas a marca registrada do sistema ainda é o Dock. Há uma porção de cópias interessantes para o Dock em diversos ambientes. Mas, com javascript e CSS, eu nunca tinha visto uma razoável. Até que vi essa aqui. Veja esse Dock rodando…

  • Desafio dos 4KB

    Momento Jabá: Quanta coisa você consegue fazer com apenas 4KB? Crie uma página que faça algo impressionante com apenas 4KB de código. Pode usar HTML válido ou inválido, XML, Javascript, CSS e o que mais você quiser, desde que esteja tudo em uma única página. Nada de Flash, imagens externas, scripts externos ou Ajax. O…

  • Google Code Prettify.

    Agora este blog tem syntax highlight para os trechos de código que eu escrevo, por exemplo: function Pessoa(nome,idade,email){ // Para criar as propriedades da classe usamos a palavra-chave this this.nome=nome this.idade=idade this.email=email // Não existe, em javascript, o conceito de método. Um método é uma // propriedade como outra qualquer, cujo valor é uma função…