Currently browsing category

HTML/CSS

Twitter Bootstrap

Vamos começar por Bootstrap

Desde os guias de design, até os padrões de interação, temos a eterna necessidade de definir os padrões e a consistência em uma aplicação web de modo a reutilizar o máximo possível os elementos de design. Se não bastasse isto, o twitter, com o Bootstrap foi além e implementou um …

Utilizando fontes alternativas sem ferir a semântica

Já tem um tempinho que não escrevo nada no Blog. Estava realmente muito ocupado tanto como tempo tanto com a cabeça por causa da recente mudança para o Rio de Janeiro, cidade realmente maravilhosa, mas meu amor por Belo Horizonte ainda permanece. O motivo da mudança é que agora estou …

Usando folha de estilos em cascata literalmente

Bem, a abreviação do CSS já diz tudo sobre sua arquitetura. Ela funciona em cascata. Novidade para uns, obsoleto para outros, mas que quando aplicado da maneira correta, pode te ajudar em muito na leitura do CSS. Bem, o usuário final não vai ver o resultado, mas para desenvolvedores web …

Projetando formulários tableless

Problema Você quer incluir campos de formulários e nomes nas linhas sem usar tabela HTML, com isso assegurando um puro layout CSS usando somente as marcações de formulário Solução Primeiro use rótulos em conjunção com campos de formulários na marcação (veja Figura 5-10): Username Password Remember you? Figura 5-10. O …

Criando Rollovers sem Javascript

Problema Você quer criar um simples efeito rollover sem usar Javascript para trocar imagens. Solução Use as pseudo-classes :hover e :active para criar o rollover: a:link {color: #777;text-decoration: none;}a:visited { color: #333; text-decoration: none; } a:link:hover, a:visited:hover { color: #777; background-color: #ccc; } a:link:active, a:visited:active { color: #ccc; background-color: #ccc; …

Use class com a semântica em mente

Há sempre uma dica quando você valida o código na W3C. Estes dias eu li um que foi muito útil. Basicamente ele dizia: Muitas pessoas usam nome de classes como textoazul ou bordavermelha. A melhor maneira de nomear suas classes é pela sua função no html que ela está inserida …

Modelo de tabelas com CSS

Os layouts devem ser Tableless e não os sites. Tabelas tem seu lugar, não no layout, mas sim para mostrar dados tabulares. Até para formulários de contato e de registro não é nenhum “pecado” usá-las. Posteriormente irei postar sobre a construção de formulários com CSS, sem tabelas para mostrar que …

A propriedade que faltava

Para quem trabalha com Float, as vezes há a necessidade de colocar o layout em uma DIV que podemos chamar de container. Ela é responsável por controlar mais duas divs que funcionam como uma coluna no Layout onde tudo se encaixa em uma estrutura simples e objetiva, como o Holy …

Bug da dupla margem no IE

Este é o meu primeiro Post. Demorei muito antes de escolher por onde começar, deveria iniciar por problemas antigos que já resolvi e deveria compartilhar com os sofredores desenvolvedores HTML / CSS, ou deveria começar com problemas recentes? Resolvi começar então com um problema que um companheiro de trabalho teve …