Tabela de preços simples
Algum tempo atrás, fiz esta demonstração de uma tabela de preços . Acabou sendo muito legal 🙂 Aqui está o link para minha postagem no blog sobre ele. E o …
Continuar lendocss
Desacople as classes JavaScript das CSS usando o prefixo
Ao usar o js-prefixo para classes em elementos DOM, você desacopla aspectos funcionais desses elementos dos CSS. Um exemplo: <a class=”btn js-popup”>Click me!</a> Agora: como codificador css, você pode facilmente …
Continuar lendologotipo do coderwall feito com HTML e CSS
Recriei o logotipo do coderwall com HTML e CSS: Você pode encontrar a versão ao vivo e a fonte aqui: http://codepen.io/TimPietrusky/pen/hLolB O logotipo A fonte usada é ITC Avant Garde …
Continuar lendoFerramentas 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 lendoCarregamento automático de Sass em Sinatra
Você pode usar injeção de estilo ao desenvolver aplicativos sinatra, permitindo que você veja as alterações de css / sass sem atualizar seu navegador. Isso é especialmente útil ao fazer …
Continuar lendoComo criar uma função complexa no Stylus
Tenho experimentado muito a Stylus recentemente e cada vez que a uso aprendo mais e mais truques. A seguir, mostrarei como criar a função calc () sem ter que repeti-la …
Continuar lendoCrie um tabuleiro de damas em CSS3
.checker { height: 0; width: 20%; padding-top: 20%; float: left; background: black;}.checker:nth-of-type(even) { background: white;} Demo http://jsbin.com/afikin/1/
Continuar lendoMostrando URLs de links em páginas da web impressas
Um truque simples, mas muito útil para implementar em css é tornar a url dos links visível nas páginas html quando impressos. Isso pode ser realizado automaticamente com o seguinte …
Continuar lendoTabela Zebra usando apenas CSS3
tr:nth-child(2n+1){ background: #fff } tr:nth-child(2n+0){ background: #ffffec }
Continuar lendoNÃO USE largura mínima do dispositivo em consultas de mídia
Bem, para ser mais específico. Acabei de descobrir por que algumas pessoas na minha empresa reclamaram que “o trabalho do freelancer parece diferente no meu dispositivo móvel do que na …
Continuar lendoUsando SASS em vez de SCSS por padrão no Rails
Presumivelmente porque as pessoas amam CSS (?) Rails padroniza para SCSS ao gerar folhas de estilo. Eu uso HAML em vez de HTML, então SASS é um ajuste muito melhor. …
Continuar lendoSubstituição de texto com @ font-face e base64
Estilizável, escalável, leve e sem esforço snippet de substituição de texto: my own logo é uma fonte de um único caractere compactada e depois codificada em base64, carregada via @ …
Continuar lendoUsando as variáveis globais Compass e Zen Grids
Eu estava tendo alguns problemas ao usar bússola e grades Zen, enquanto lidava com $zen-column-countvariáveis em um tema Drupal. Se você está tendo o mesmo problema, é devido a uma …
Continuar lendoSass mixin para rem tamanho de fonte e altura de linha com px fallback
@mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) { font-size: ($sizeValue) + px; line-height: ($line) + px; font-size: ($sizeValue / 16) + rem; line-height: ($line / 16) + rem;}
Continuar lendoÍcones corretos do Google Maps em combinação com a base
Estou usando o Foundation CSS Framework para construir meus temas WordPress, e quando gosto de inserir um mapa do Google no meu documento, obtenho um resultado com ícones danificados, como …
Continuar lendoCorrigindo a renderização funky @ font-face no webkit
Basta adicionar esta linha de CSS à tag do corpo: body { -webkit-font-smoothing: antialiased;}
Continuar lendo