TidBits

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.baixo{ 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.baixo{ border-right-color:#000; }

Resultado:

Seta pra direita

HTML

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

CSS:

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

Resultado:

[]s,

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)

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;
}
 

Agora, o border-radius de 50%

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

Resultado:

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.

Menu que fixa no topo

http://www.carterdigital.com.au/

Scrollando o menu, ao invés de sumir após a dobra, é fixado no topo.

Travando a sidebar pra não ficar buraco

http://9gag.com/

Em sites de paginação infinita, não tem como popular a coluna da direita pra encher de conteúdo até o fim do mundo.

O 9gag criou uma solução interessante, travando a coluna a partir de um determinado ponto do scroll.

O Facebook também fez isso.

Alterando o conteúdo

http://krystalrae.com/

Ao Scrollar, a modelo vai trocando de roupa

Fixando o título / share ao lado do conteúdo

http://mashable.com/2012/03/26/kaggle/

Na interna do mashable, eles detectam quando você acabou de ler um post (baseado no seu scroll top) e mostram um box com algum conteúdo relacionado.