Otimizando o desempenho de um site
Ao preencher um formulário de emprego, fui solicitado a responder a esta pergunta: Quais são algumas das maneiras de melhorar o desempenho de um aplicativo da web que você escreveu? …
Continuar lendoEtiqueta: sprites
Um melhor alinhamento para ícones de sprite
Você pode ter visto essa técnica antes de alinhar horizontal e verticalmente um ícone … .icon { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: #000; margin-left: …
Continuar lendoAltura e largura automáticas com sprites de bússola
Uma maneira de economizar tempo para obter as dimensões css de grandes coleções de sprites. folder é o nome da pasta onde seus sprites estão. $folder-sprite-dimensions: true; // the magic!@import …
Continuar lendoCompass Sprites como marcadores de posição
[EDIT] Uma solução melhor seria adicionar esta opção ao núcleo da Compass. Criei uma solicitação pull para isso em https://github.com/chriseppstein/compass/pull/1448 O que saber antes de ler Para entender totalmente este …
Continuar lendoSprites usando bússola
Tem uma tonelada de imagens? Deixe que a bússola os sprite para você. Use o ajudante de sprite da bússola: http://compass-style.org/reference/compass/helpers/sprites/ Exemplo Digamos que temos algumas imagens .png em uma …
Continuar lendoMENOS Mixin para sprites prontos para retina
Se você deseja deixar seus ícones prontos para a retina, há duas maneiras de fazer isso: Use ícones de fonte, como Font Awesome Fornece imagens alternativas de tamanho duplo que …
Continuar lendoManeira super simples de unir quadros individuais em uma imagem longa
Você recebeu um monte de imagens individuais que você precisa para animar em CSS como sprites? Instale o ImageMagick e faça o seguinte: convert file1.png file2.png file3.png +append concat.png Super …
Continuar lendoCSS (sass) limpa cache para sprites!
// Variável global cacheBust $ cacheBust: ‘? V = 20130314’; // variáveis de sprite $ sprite-items: ‘img / sprite-items.png’ + $ cacheBust; $ sprite-btns: ‘img / sprite-btns.png’ + $ cacheBust; …
Continuar lendo