Currently browsing category

HTML/CSS

Um modelo de layout em duas colunas de uma carteira virtual utilizando CSS e layout.

Adaptando um sistema aos dispositivos móveis na prática, com CSS3 e Javascript

Já falei bastante da necessidade em um projeto novo de adotar Mobile First para atender a demanda dos usuários que atualmente navegam muitas vezes mais pelo celular do que pelo Desktop. No entanto, pensar numa experiência mobile como primordial nem sempre é possível, principalmente em projetos já consolidados. Sendo assim, precisamos …

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 …

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; …