Currently browsing category

HTML/CSS

responsivedesign1

Design Responsivo e Mobile First

Atualmente, os sites estão tendo uma grande necessidade de se adaptarem para diversos dispositivos, e com isto estão surgindo diversas formas para se conseguir este objetivo da melhor forma possível. Atualmente, chegamos na era responsive, onde os sites já construídos, usando media-queries, podem se adaptar ao dispositivo. No entanto, para …

Screen shot 2012-08-27 at 11.09.31 PM

Globo Bootstrap

Baseado no Twitter Bootstrap, o Globo Bootstrap é um framework de front-end poderoso, totalmente intuitivo para facilitar no desenvolvimento dos elementos de interface nos sites da Globo.com. Pode ser também usado em seus projetos como um guideline para produzir de forma consistente os padrões consolidados do Twitter e da Globo.com. …

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 …

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 …