LESS mixins: Snippets úteis para dispositivos móveis

LESS

Essa é uma dica pra quem usa LESS para escrever suas folhas de estilo.
De front-end para front-end, se você não usa LESS ou qualquer preprocessador CSS, meu amigo, só lamento. O ganho de produtividade com eles é assustador!

Gosto de trabalhar com LESS mas, usando qualquer preprocessador, variáveis, funções e mixins deixam seu código mais modular, mais reutilizável, mais limpo e organizado. Isso faz toda a diferença em um projeto, seja ele grande ou pequeno.

Continue reading

Entendendo float, clear e clearfix de uma vez por todas

O que é float? Pra que serve? E clear? Onde e quando posso aplicar? Por que quando se usa um às vezes é necessário usar o outro?
E esse tal de clearfix que a gente vê em todo código? Pra que serve?

De tanto ver aplicações equivocadas, achei que pudesse ser necessário explicar de uma forma que fique [bem] clara cada uma dessas propriedades.

Exemplos de aplicação de float, clear e clearfix

Continue reading

Seu CSS é bom ou ruim?

Artigo original “Code smells in CSS” escrito por Harry Roberts, que gentilmente me permitiu traduzi-lo para o nosso idioma.

Chris Coyier recentemente respondeu a seguinte pergunta:

O que você diria se um código CSS está um lixo? Quais são os sinais de que o código é poluído ou que o programador front-end fez m3rd@? O que você analisaria nele para determinar se ele é bom ou ruim?

Pensei em estender a resposta de Chris adicionando um tempero próprio…

Meu cotidiano se passa trabalhando em casa para a BSkyB. Trabalho em grandes sites, dos quais o último me tomou mais de um ano para desenvolver o front-end (e ainda não terminou). Para mim CSS ruim é uma coisa muito específica e problemática; quando você está trabalhando em um site por meses a fio você não pode se permitir escrever um código poluído, seja ele CSS ou não, e qualquer código ruim precisa ser re-escrito.

Vou compartilhar apenas alguns pontos que eu analisei no CSS (e há, sem dúvida, alguns que deixei passar batido) para que você possa ter uma idéia quanto a qualidade, sua manutenção e sua integridade…

Continue reading

Qual a medida em pixels de uma folha de papel A4?

As caixas de diálogo do Photoshop NEW DOCUMENT e IMAGE SIZE

Antes de qualquer explicação, você sabe converter centímetros para polegadas, e vice-versa?

1 cm = 0,3937 pol ou 1 pol = 2,54 cm (mais fácil de gravar, não?)

Agora, você com certeza já deve ter ouvido falar em dpi. Sabe o que significa?

Continue reading

Qual o tamanho do background do Twitter?

mascote do twitter pensando "background? #comofaz"

Você, usuário um pouco mais, digamos, experimentado, já tentou posicionar uma imagem no background do seu perfil no Twitter?

Convenhamos, é meio chato! Vou explicar como adaptar (criar é com você!) uma imagem, de modo que seu background apareça melhor em algumas resoluções de monitor mais comuns.

Continue reading

Por que usar CSS Reset?

botão CSS Reset (uma metáfora para o problema)

Muito se discute sobre o uso de CSS Reset em desenvolvimento web. É um verdadeiro divisor de águas. Há quem o odeia e quem não viva sem (meu caso).

Especialistas divergem entre si e são muito políticos em suas defesas quanto ao uso ou não de resets. Tanto que confundem a cabeça de novatos nessa área e só fazem aumentar a necessidade de um veredito.

Pois bem, resolvi peitar uma defesa baseada em problemas que enfrento diariamente. E defino minha conclusão com uma pergunta mais que direta: “Como eu criava sites antes sem usar um CSS Reset?”

Continue reading

@font-face CSS com ajuda do Google font API

Google font directory

Em um artigo que escrevi sobre o uso de @font-face e a conversão de fontes do formato TTF para EOT abordei o modo mais prático de implementação de fontes diversas para criação de sites mais, digamos, elaborados. Expliquei como e com o que converter fontes, e as linhas de código em CSS para implementação.

Agora vou explicar novamente o uso do @font-face abordando uma, na verdade duas, ajudas muito bem-vindas do gigante do Vale do Silício: a Google font API e o Google font directory.

Continue reading

Photoshop: Tratamento de imagem (parte 1)

Como tratar uma imagem?

duas fotos lado a lado de um combinado de sushi mostrando o antes e depois: do lado esquerdo a foto bruta, sem tratamento de imagem. do lado direito após um tratamento com correção de branco, tom, volume e seleção de cores

Lembro que quando comecei a mexer com tratamento de imagem – em meados de 1995 – o Photoshop (versão 3.x) era muito limitado e não podíamos cometer erros. Aliás, um erro só podia, pois não havia múltiplos undos (o “desfazer”), dá pra imaginar?! Também não tinha recursos de layers (camadas) e os pincéis não eram elaborados, além de outras tantas limitações. Mas, desde aquela época o processo de Seleção de Cores (grosso modo, é como chamam o tratamento de imagem para mídia impressa), sofre apenas a interferência das melhorias da ferramenta: as evoluções do programa.

Continue reading

Photoshop: Criando uma textura de background para seu site

Você encontrou “aquela” textura pela internet e deseja usá-la como background no seu site. Mas a imagem não é grande o suficiente para cobrir a tela toda. Ao perceber que quando a textura se multiplica pela página (formando um pattern), as bordas dessa imagem ficam visíveis “quebrando” a homogeneidade da textura.

Tomemos o exemplo abaixo (clique na imagem para ampliar).

textura original com vigas de madeira horizontais

Continue reading

Salvando favicons direto do Photoshop

Existem algumas dezenas de serviços online que podem tanto gerar quanto salvar uma imagem criada por você como favicon para seu site (alguns até hospedam o arquivo).

Cito alguns que gosto de testar:

exemplo de favicon

Continue reading

© 2014 Edson S. Júnior

Theme by Anders NorenUp ↑