Ferramentas CSS3 úteis
Ok, eu admito. Nunca consigo me lembrar das diferentes declarações do navegador e da sintaxe correta para todos aqueles efeitos CSS interessantes. Pelo menos uma vez por dia, uso uma …
Continuar lendocss3
Tabela Zebra usando apenas CSS3
tr:nth-child(2n+1){ background: #fff } tr:nth-child(2n+0){ background: #ffffec }
Continuar lendoFundo em relevo sutil
Aqui está um fundo sutil para os elementos que você deseja realçar. Contanto que sua cor de fundo não seja branca! Texturas, cores sólidas e qualquer outra coisa parecerão elegantes. …
Continuar lendoUm efeito de pairar com jQuery ou CSS3
Eu só queria compartilhar uma forma interessante de mostrar preços de produtos para um site de e-commerce, ou qualquer conteúdo que caiba em uma imagem com um simples cursor hover. …
Continuar lendoÓtima maneira de usar a sombra da caixa
Uma maneira muito fácil de usar o box-shadow de uma maneira agradável -HTML- <div class=”header”> <h2> Nice way to use box-shadow V2</h2></div> -CSS- .header{ width:70%; height:140px; /*If you want to …
Continuar lendoCaixa de seleção e entrada de rádio personalizadas com CSS puro e substituto
INTRODUÇÃO: Atualmente, estou trabalhando em uma nova diretriz de estilo e aqui está minha dica profissional para personalizar caixas de seleção e botões de opção com CSS3 puro e um …
Continuar lendoCrie triângulos facilmente com CSS3 e LESS
Eu escrevi um mixin MENOS simples para criar triângulos com CSS3. Uso .triangle(@direction, @size, @color) @direction define a direção: ‘up’, ‘down’, ‘left’ ou ‘right’. @size define o tamanho @color define …
Continuar lendoCSS3, por favor, menos mixins
CSS3 Mixins para acelerar o fluxo de trabalho e evitar prefixos de fornecedores. Exemplo de uso .element { .box-gradient(top, #f47a20, #faa51a); .box-shadow(0, 0, 5px, rgba(0, 0, 0, 0.8)); }/* G5Framework …
Continuar lendoMelhore a renderização de texto no webkit
Para melhorar a renderização de fontes no navegador baseado em webkit, basta adicionar a propriedade CSS * { -webkit-font-smoothing: antialiased;} onde você quiser. Também funciona para a propriedade CSS3 @ …
Continuar lendoCorrigir bug do WebKit vw
O bug vw é muito chato! Se você ainda não experimentou, é quando você redimensiona seu navegador e o WebKit não atualiza os tamanhos vw ou vh para se ajustarem …
Continuar lendoIntrodução ao SASS
O que é SASS? SASS é uma linguagem de extensão que permite que você descreva suas folhas de estilo (CSS) de maneira concisa – além de estender o CSS com …
Continuar lendoCSS Stripey Backgrounds Made Easy
Recentemente, eu precisei criar um tema boostrap, não querendo adicionar elementos adicionais, eu precisei implementar um fundo listrado verticalmente. Aqui está o CSS: background: -webkit-linear-gradient( left center, #F69087, #F69087 25%, …
Continuar lendoResoluções CSS reais para dispositivos móveis para telas de retina e design responsivo
Recentemente, vi um ótimo post de Elad Schechter ( https://coderwall.com/p/ygcyha ) dando a todos nós uma ótima visão sobre o tamanho real da tela do dispositivo e o tamanho da …
Continuar lendoBotão de login elegante usando transições CSS3.
Desde que vi pela primeira vez o botão de login do GiantBomb ( e subsequentemente do Whiskey Media ), me perguntei como eles conseguiram o efeito. O efeito deslizante foi …
Continuar lendoEfeito de pêndulo simples usando animações CSS3.
Esta é minha primeira animação CSS3 absoluta! Estou muito animado com as possibilidades e com certeza vou ler alguns dos livros recomendados sobre o assunto. Aqui está um efeito de …
Continuar lendoQual solução você deve escolher para imagens responsivas agora?
Se você pensa em usar imagens responsivas a partir de hoje em um site, considere o seguinte: Eu realmente preciso de imagens responsivas nesse projeto agora ? A maioria dos …
Continuar lendo