Categoria: CSS

Por padrão as propriedades width e height não definem o tamanho final dos elementos HTML. Isso porque o tamanho final do elemento vai ser calculado com a soma das propriedades width, padding e border, por exemplo.

Aprenda como alinhar qualquer elemento HTML na vertical com apenas três linhas de CSS. A técnica consiste em usar a propriedade CSS transform, que normalmente é usada para girar elementos. Além dela utilizamos também a função translateY. Dessa forma centralizamos qualquer elemento na vertical, mesmo sem sabermos a altura do elemento. Recomendo que leia também…

Após escrever seu HTML tendo em mente Progressive Enhancement (melhoria progressiva) e ter a certeza que caso um navegador não tenha suporte ao um determinado elemento o usuário não será prejudicado, podemos começar a implementar nossa segunda camada de tecnologia, nesse caso o CSS, responsável pelo design da nossa página. Igual ao HTML, o CSS…

O pouco conhecido pseudo-classe :empty é utilizado para selecionar os elementos vazios, elementos sem qualquer conteúdo ou elementos que contenham apenas comentários. É útil para ocultar elementos vazios, por exemplo, que possam causar espaçamentos indesejados. Esse pseudo-classe funciona na maioria dos navegadores. No Internet explorer funciona a partir da versão 9. Confira o suporte do…

Criar validação de formulário com o Foundation é uma tarefa rápida. Os scripts de validação do framework ficam no componente chamado abide. Foundation utiliza o atributo required da HTML5 para fazer a validação em Formulários. Não esqueça de baixar o Foudation e inserir as chamadas necessárias em suas páginas: Site oficial do Foudation Artigo sobre…

Os navegadores da Web permitem que você personalize a aparência da maioria dos aspectos de uma página usando CSS. Mas alguns elementos tornam-se um pouco mais difícil de aplicarmos uma estilização. Uma dúvida seguida que vejo é de como mudar o estilo do marcador em listas não ordenadas ou números em listas ordenadas. Normalmente usamos…

Para dimensionar vídeos para se adaptar em qualquer dispositivo, seja esse dispositivo um desktop, tablet, dispositivo móvel… podemos usar CSS ou Javascript como solução para cumprir essa meta. Os exemplos abaixo utilizei apenas soluções em CSS. Página de exemplo Vídeo do YouTube e Vimeo Abaixo você encontra uma típica marcação HTML para inserir vídeos do…

Apresento hoje o plugin LiveStyle onde você poderá sincronizar seu navegador com o editor Subline Text, e toda alteração feita no CSS poderá ser vista sem atualizar a página do navegador. Essa extensão mapeia seus arquivos CSS em uma pasta e a atualização do navegador acontece sempre que algo é alterado nesses arquivos.

Usando LESS para criar suas folhas de estilos é possível deixar seu CSS muito mais dinâmico. Já imaginou usar variáveis dentro da sua folha de estilos, ou melhor ainda, usar funções iguais as que usamos quando estamos programando em PHP, JAVA, etc. A boa notícia é que com a ajuda de LESS nós podemos.

As propriedades margin e padding podem ser confusas para desenvolvedores iniciantes. Esse artigo é para aqueles que estão começando a aprender CSS. Aqui explico de forma bem detalhada as propriedades fundamentais do CSS, margin e padding. Saiba quando usar um ou o outro.