Sobre o maravilhoso Blend Mode do CSS3

Alguns projetos que eu pego usam algum blend mode do Photoshop para deixar imagens com algum tom de cor baseado na paleta de cores do site. Na maioria das vezes algum designer ou alguém com photoshop fica com a responsabilidade de alterar essa imagem antes de subi-la como conteúdo do site. Não é um processo muito inteligente já que criamos mais um passo para que a tal imagem vá pro ar.

O CSS3 e o HTML5 estão cada vez mais completos, permitindo uma reprodução mais fácil do que fazemos nas ferramentas gráficas, como sombras, degradês, etc. Hoje em dia já podemos utilizar o blend mode do próprio CSS3. Mágico, não?

O código é simples, dá pra decorar em uma olhadinha. Vamos ao exemplo!

Multiply

Os seguintes efeitos de blend mode estão disponíveis: Darken, Lighten, Color-dodge, Color-burn, Hard-light, Soft-light, Difference, Excluse, Hue, Saturation, Color, e Luminosity.

Temos uma lista enorme pra reproduzir quase tudo que existe nos softwares gráficos, como o Photoshop:

Untitled-3

Gostou? Confira a documentação do blend mode!

 

Paginação do Cycle semanticamente correta

Durante meus últimos trabalhos o Cycle tem sido o meu plugin de slider favorito, por ser fácil, flexível, leve e ter uma documentação bacana, além de não ter problemas crossbrowser (Internet Explorer 7 +).

Como sou rígido com meus códigos, resolvi mudar um código que está semanticamente errado no cycle. Esse código é o que gera os bullets de navegação do slider.

Na linha 859 do arquivo jquery.cycle.all.js você encontrará esse conteúdo:

	a = ''+(i+1)+'';

Utilizar um anchor tag (<a>) para esse elemento não é o certo, já que o anchor tag deve ser utilizado somente em links – logo, o correto é mudarmos para outro elemento.

Eu costumo mudar para um list item (li), ja que os bullets são parte de uma lista. O código depois de alterado fica assim:

	a = '
  • ‘+(i+1)+’
';

O código acima vai gerar cada bullet em um li, então você deve inserir os bullets dentro de uma ul, e o código será gerado assim:

  • 1
  • 2
  • 3

Lembre-se que o bullet do banner visível tem a classe activeSlide, onde você pode deixar em um estilo diferente dos outros.

 

Especificando classes no html conforme versão do Internet Explorer

Esse é um esquema utilizado com frequência na comunidade de desenvolvedores, está em vários boilerplates. É uma solução rápida e fácil pra quem precisa especificar algum estilo pra algum objeto somente no IE ou em algum versão dele.

O código abaixo exibe uma classe “ie” junto de uma “ie+versão do IE”. Ex: No Internet Explorer 8, ele vai exibir duas classes, são elas: “ie” e “ie8”.

	
	
	
	

Logo, o html no Internet Explorer 8 ficará assim:

	< html class="ie ie8">

E caso você vá usar um seletor específico pra corrigir algum pepino no IE, ficará assim:

	.ie SELETOR {
		/* estilos */	
	}
	.ie7 SELETOR {
		/* estilos */	
	}

Em breve posto a alternativa que eu costumo usar – que é feita em JS.

 

Utilizando RGBA do CSS3

Há um tempo atrás eu não utilizava CSS3 pra declarar cores por um motivo bem conhecido: Suporte no IE. O nosso amado navegador da Microsoft só implementou o suporte na versão 9. Resolvi começar a usar CSS3 com mais frequência e aplicar Progressive Enchancement nos projetos – e é claro, usar sempre um fallback pros usuários que usam o maldito IE.

O RGBA é uma declaração simples, que utiliza o RGB normal com uma última declaração – o “A” – para o alpha, que é responsável pela transparência.

Aplicando o RBGA

Declarando uma fonte com a cor vermelha com 50% de transparência.

.exemplo {
    color: rgba(255,0,0,0.5)
}

Pra pegar os valores com precisão, veja no layout a opacidade (opacity) e a cor do objeto que ja é exibida em RGB, entre outros. Ex: Na imagem abaixo.

Bem, por enquanto é isso! Comentem, perguntem, enviem feedbacks, whatever.

 

Se livrando do “.last” em uma listagem em blocos

É comum vermos desenvolvedores “sujando” o código html com uma classe “.last” em uma itens de lista para remover alguma formatação de margin ou padding que mantém o último item de uma linha onde deveria estar, e não na linha debaixo. Não entendeu? Vou desenhar – literalmente.

Nesta página temos uma lista comum, com três produtos, alinhados quase corretamente, mas existe um espaço perceptível do lado esquerdo, entre o começo da div de conteúdo e o começo da lista. Não viu? Dê uma olhada neste segundo exemplo.

O bloco de fundo verde é a área de conteúdo, o roxo é o conteúdo da lista e o amarelo é o item. Se você imaginar que esta lista está ao lado de alguma outra coluna, como um menu, etc., o último objeto ficará colado na coluna do lado esquerdo (ou direito, depende da sua especificação pra marge no css), ou o item vai para a linha debaixo.

… 

 

Cuidado! O Box-Shadow pode prejudicar a rolagem da sua página!

O texto abaixo é de autoria de Ross Allen, e foi publicado no blog de desenvolvedores do airbnb. A tradução e distribuição do artigo foi autorizada pelo autor.

Trabalhando em um dos Chromebooks que a Google empresta durante os vôos da Virgin America, eu percebi a rolagem de algumas páginas do site airbnb.com ficavam lerdas, mais do que o de costume quando uso meu notebook de trabalho. A princípio culpei o hardware humilde do Chromebook, mas alguns outros sites com bastante conteúdo estavam com a rolagem normal. Percebi que o problema era o box-shadow, aplicado na lista de resultados da busca, então decidi investigar.

Usei a aba de timeline do Chrome para ver a duração do preenchimento do box-shadow nos elementos. Antes de cada teste, eu juntei alguns resultados rolando o conteúdo da página até o mesmo local, usando window.scroll(0, 140). Então, cliquei duas vezes na seta para rolar a página, sendo que cada clique corresponde a um scroll de 40 pixels, e guardei os resultados.

Elemento com 10px de blur-radius do Box-Shadow, que equivale 3 aplicações a cada 40px de rolagem.

Para checar se o problema era realmente o Box-shadow, diminui a quantidade de blur (blur-radius) pela metade. O resultado foi uma rolagem mais suave, e os números mostraram que a aplicação foi feita em metade do tempo.

Elemento com 5px de blur-radius do Box-Shadow, que equivale 3~4 aplicações a cada 40px de rolagem.

Já que percebi que o box-shadow era o culpado, resolvi removê-lo por inteiro. A rolagem foi bem mais suave.

Então, só pra finalizar o teste, apliquei um box-shadow monstruoso. O Chromebook não gostou nem um pouco de um blur-radius de 300 pixels. Ele levou exatamente dois segundos para preencher a área com sombra a cada clique para rolar a página para baixo (40 pixels por clique, lembra?). Veja a performance na tabela abaixo:

Efeitos da pesquisa no produto

Alteramos o box-shadow para 3 pixels e adicionamos um offset de 3px para manter um visual mais simples e não prejudicar a performance de aparelhos com um poder de processamento mais fraco.

Porque isso foi importante? Eu tenho por volta de 3 visitantes usuários de Chromebook!

Seus visitantes que usam Chromebook podem ser poucos – ou nenhum, como é o caso de muitos sites no Brasil – mas o Chromebook é baseado no Chrome, que usa a engine Webkit, a mesma utilizada nos navegadores de iOS e Android. Se o CSS afeta a performance do seu produto no Chromebook, é bem provável que afete também quem está usando/visualizando via Android/iOS.

Recomendo que acesse a área de comentários deste post e do post original para acompanhar debates sobre este assunto.

 

Seletor :nth-child

Acho justo que você saiba que esse seletor não funciona no IE – quer dizer, até funciona, mas só na versão 9. Já nos demais navegadores populares (FF 3.5+, Chrome 4, Safari 4) tá tudo bem, menos no Opera, que tem alguns problemas.

Como você já deve saber, o seletor first-child funciona para o primeiro item (filho) e o last-child para o último item (também filho), o nth-child seleciona esses itens de um jeito mais específico, deixando você livre da necessidade de aplicar alguma classe ou fazer alguma “gambiarra” do tipo.

Vamos para alguns exemplos:

Selecionando o primeiro item de uma lista, teremos o seguinte CSS e o respectivo código HTML:

ul li:first-child {
	color:#f00;
	}
  • Primeiro Item
  • Segundo Item
  • Terceiro Item
  • Quarto Item
  • Quinto (e último) Item

Caso você faça um teste, o código acima vai aplicar a cor vermelha (#f00 ou #ff000) no primeiro item da lista.

… 

 

Solução para inline-block no Internet Explorer 7

Se levarmos em conta todo aquele papo de código semântico na hora de passar um layout de imagem pra html e css sempre teremos a companhia de algumas tags, e uma delas é a
<ul>, que deve ser usada para uma lista (o rly?). Ultimamente tenho trabalhado com layouts melhores e devido as exigências de onde eu trabalho, preciso codificar páginas que sejam compatíveis com o IE7, já que não damos mais suporte ao IE6.

Quando você busca utilizar uma lista e precisa estipular tamanhos e alguns outros atributos nela e nos items, você precisa utilizar o elemento “block”, e em alguns casos, se esse elemento tiver que ficar em linha, será necessário usar o “inline-block”. Mas e aí, o que tem demais? O inline-block não está implementado no IE7.

SELETOR {display:inline-block;}

Para solucionarmos esse problema, só precisamos duplicar o seletor e colocar um “* + html” antes do seletor, trocar o display por inline e pronto!

Exemplo:

* + html SELETOR {display:inline;zoom:1;}

Pronto, problema resolvido!

Aprendi com o Édipo!