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 lendo »

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 lendo »

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 lendo »

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 lendo »

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 lendo »

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 lendo »

@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 lendo »

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 lendo »

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 lendo »

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 lendo »

© 2014 Edson S. Júnior

Tema por Anders NorenTopo ↑