mostrando e escondendo: antes e: depois no IE8
Parece que o :beforee :afterno IE8 têm problemas com a exibição. Se uma classe dá um display: blocke sem ele, o display: noneIE8 não é um campista feliz. Ele começa …
Continuar lendocss
Truque simples para otimizar suas bibliotecas de mixins MENOS
Quando se trata de criar um mixin não paramétrico, a página inicial do LESS diz: .bordered { border-top: dotted 1px black; border-bottom: solid 2px black;} Então você pode fazer: .container …
Continuar lendoHabilitar mapas de origem CSS no Compass
Eu estava conversando com um colega de trabalho esta manhã sobre mapas de origem CSS. Eu nunca consegui fazer o Compass criar mapas de origem para mim. Tentei novamente esta …
Continuar lendoSASS ClearFix Mixin
CSS Clear FIx Mixin para SASS # [email protected] clearFix(){ &:before, &:after{ content: ” “; display: table; } &:after{ display: block; clear: both; height: 1px; margin-top: -1px; visibility: hidden; } &{ …
Continuar lendoFormulários Symfony2: maneira mais fácil de adicionar um * aos rótulos de campo obrigatórios
Por padrão, os rótulos dos campos obrigatórios são renderizados com a classe “obrigatória”. Para adicionar um asterisco a esses rótulos, basta adicionar o seguinte em sua folha de estilo: .required:after …
Continuar lendoSobre a direção de animações
Encontrei este pequeno artigo de Paul Lewis e me lembrou da importância de animações adequadas na IU. É quase como dirigir um filme, cada quadro tem que ser colocado ali …
Continuar lendoNúmeros de lista ordenados de estilo
Ao estilizar listas, eu inevitavelmente removo os marcadores ou números padrão com CSS, usando algo como: li { list-style-type: none;} E acabam substituindo o marcador ou número por uma imagem …
Continuar lendoAbsurdly Abstract @ font-face PT.2 – estilo da fonte
6 meses atrás eu criei um protip chamado Absurdly Abstract @ font-face mixin com a intenção de tornar mais fácil incluir fontes de marca. No final daquele artigo, observei que …
Continuar lendoCriação de um site com zoom com unidades em
Recentemente, atualizamos o site da nossa empresa ( http://theagilemonkeys.com ). Quando estávamos na mesa de design, o que queríamos é que a experiência do site fosse a mesma, independentemente do …
Continuar lendoComo definir a largura do widget do Twitter> 520px
Do usuário Kevin Woodberry sobre essa discussão : #twitter-widget-0{ width:760px; } “760px” pode ser, é claro, qualquer valor. Se você tiver mais de um widget na página, talvez precise usar: …
Continuar lendoSASS Best Practice
Se você precisar criar muitos estilos diferentes, mas semelhantes, lembre-se do tipo de dados da lista e da regra @each. Mau .x-icon { width: 40px; height: 40px; background-size: contain; &.cat …
Continuar lendoColorir um Div, Span ou ícone Glyph em resposta aos dados
O Problema: Queremos que os recursos no dom tenham uma de 3 cores e queremos que essa cor seja determinada pelos dados. A Solução: Insira uma string, que por acaso …
Continuar lendoSe não houver imagem de perfil, mostre um ícone de glifo de espaço reservado usando Angular
O problema: Queremos tirar uma foto de uma pasta que contém fotos de perfil. No entanto, não temos fotos de perfil para todos. Quando não há uma foto de perfil, …
Continuar lendoImplementando ícones Glyph com Angular
Leia a história de fundo ou vá direto para os produtos, rolando para baixo até “Processo de implementação” … No projeto mais recente da minha equipe, usamos um conjunto de …
Continuar lendoQuão impressionantes são os pseudo seletores CSS?
Resposta: MUITO! Vá para a demonstração: http://dabblet.com/gist/3333961 Uma dica muito legal que eu gostaria de compartilhar é ocultar / mostrar conteúdo usando pseudo seletores CSS. Na demonstração, temos uma caixa …
Continuar lendoLayout de 5 colunas com Twitter Bootstrap
Por padrão, o Bootstrap não fornece um sistema de grade que nos permite criar um layout de cinco colunas, mas como você pode ver, é bastante simples. Em primeiro lugar, …
Continuar lendo