Imagens feitas somente com CSS

Recentemente começou a surgir uma coleção de ilustrações feitas somente com CSS. Usando features e técnicas de CSS como :after, :before, translate, matrix, rotate, border-radius, box-shadow, entre outras, programadores front-end com muito tempo e imaginação vão fazendo sopinhas de div’s e span’s, criando ilustrações sem carregar nenhum arquivo de imagem no HTML.

Veja os exemplos mais famosos. Alguns usam até animação em CSS.

Bussola animada
Bussola animada em CSS

Homer Simpson
Homer Simpson em CSS

Brender
Brender do Futurama em CSS

Twitter baleiando
twitter baleiando em css

Ícones do IOS
Ícones do IOS

O efeito é incrível mas por enquanto tem pouca utilidade. Vamos ver aonde a imaginação dos programadores vai chegar.

Desenhando setas no HTML sem usar imagem (cross browser)

Uma técnica antiga mas ainda pouco explorada nos deixa desenhar setas usando apenas bordas. E o mais interessante de tudo é que funciona até em versões antigas do IE.

Alguns dias atrás eu ví um post muito interssante no NetTuts, falando sobre bordas. Achei genial, acabei postando como fazer circulos no HTML e agora vamos fazer setas sem usar nenhuma imagem.

É simples, precisamos ter um elemento com width e height 0 e declarar a borda do objeto com o tamanho da seta.

Vamos aos códigos:

Faça um <span>

<span class="colorido"></span>

E depois no CSS:

span{
	width:0;
	height:0;
	border:100px solid transparent;
	display:block;
}

Isso deixa um elemento com 200px de altura e largura, sendo 0 de height e 100px de cada borda.

span.colorido{
	border-top-color:#f00;
	border-left-color:#ff0;
	border-right-color:#0f0;
	border-bottom-color:#0ff;
}

O resultado vai ser esse quadrado colorido:

E colocando cor em somente uma borda, dá o efeito da seta. Veja os exemplos:

Seta pra cima

HTML

<span class="cima"></span>

CSS:

span.cima{ border-bottom-color:#000; }

Resultado:

Seta pra baixo

HTML

<span class="baixo"></span>

CSS:

span.baixo{ border-top-color:#000; }

Resultado:

Seta pra esquerda

HTML

<span class="esquerda"></span>

CSS:

span.esquerda{ border-right-color:#000; }

Resultado:

Seta pra direita

HTML

<span class="direita"></span>

CSS:

span.direita{ border-left-color:#000; }

Resultado:

[]s,

Desenhando em 3d com a tag Canvas em HTML5

Com processadores, browsers, placas de vídeo e motores de javascript e cada vez mais rápidos, hoje já vemos jogos e aplicações gráficas mais pesadas rodando direto no navegador, o Chrome que o diga, na sua loja de aplicativos. E apps / sites explorando 3d estão começando a aparecer por aí.

Num momento de mais tranquilidade aqui na agência, eu e Claudia Gusson resolvemos desenhar (ou pelo menos esboçar) nossa sala de trabalho, em 3d.

O resultado (parcial) foi esse:

O código fonte de tudo está aqui zipado.

Existem diversas libs pra isso, a que usamos foi essa desse exemplo aqui.

Dá bastante trabalho pois cada shape precisa ser escrito, um a um no JSON que a lib carrega, e não existe nenhuma ferramenta visual pra isso.

Funciona em FF, Chrome, Safari, IE9+ (a soma disso representa 82% no market sharet brasileiro atualmente)

Como fazer um círculo em HTML

Usando CSS3 há um truque simples pra desenhar um circulo em HTML usando 50% border-radius.

Primeiro, faz lá uma div.

<div> Tidbits </div>

E agora um pouco de CSS na div.

div{
background:#fa0c01;
color:#fff;
width:300px;
height:300px;
line-height:300px;
vertical-align:middle;
text-align:center;
font-size:30px;
}
 

Como fazer círculos com border-radius

Agora, o border-radius de 50%

 div{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
 

Resultado:

Circulo com HTML

Usando máscaras em imagens

O mesmo truque pode ser feito com imagens e funciona como se fosse uma máscara:

Imagem normal:

CSS aplicado:

img{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

Resultado:

Funciona em IE9+, Firefox, Chrome, Safari, etc.