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.

Customizando a barra de Scroll só com CSS

Uma poderosa ferramenta para os desenvolvedores foi implementada nas versões anteriores do webkit mas ainda é pouco utilizada em geral. Trata-se de customizar a barra de Scroll usando somente CSS, ou seja, sem a necessidade de Javascript. E para isso, é necessário o uso de pseudo elementos do CSS3.

Parece complicado mas na verdade é bem simples. O exemplo abaixo mostra em código que no caso, personalizaria um box de histórico por exemplo.

#historico{ height:300px; overflow:scroll; } /* limitando altura do box */
#historico::-webkit-scrollbar { width:10px; background:#e3e0d6; } /* configurando scroll */
#historico::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
#historico::-webkit-scrollbar-thumb { border-radius:10px; background:#8b8778;  }

O site CSS Tricks explica detalhadamente pra que serve cada pseudo-classe:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Agora veja o que cada pseudo classe controla.

Pseudo Classes pra customizar Scroll Bar

O Chrome e o Safari dão suporte a feature enquanto os outros navegadores irão ver do jeito normal, como sempre viram. Pra quem quiser fazer a funcionalidade cross-browser, existem dezenas de plugins em jQuery que fazem isso embora o mais usado seja o jScrollPane. Mas nesse caso, deixa de ser nativo do browser, e o JavaScript passa a emular o funcionamento do scroll.

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,

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.