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,

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)

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.

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.

Pra isso, é manipulado, pixel a pixel, colocando um pixel alpha por cima da imagem.

Veja a imagem original:

Imagem com filtro de Blur

Como a imagem é gerada automaticamente, dá pra aplicar o efeito no mousemove, ou em qualquer outra ação. Veja o exemplo abaixo.

Imagem com filtro de Blur no mousemove

Pro processamento ficar mais rápido, eu gerei um segundo canvas, só com pro efeito de criar a imagem dentro da máscara.

Todos os exemplos estão disponíveis aqui

Codando

O código é bem pequeno, fiz com menor número de linhas possíveis pra ficar bem legível.

html:

	<canvas id="pizza" width="400" height="400">
		Seu browser não suporta canvas
	</canvas>

javascript:

var Pizza = {

	// Configuração
	canvas:document.getElementById('pizza'),
	height:400,
	width:400,
	cor:'#293F8A',

	// Calculando variaveis pra desenhar
	_init:function(){
		Pizza.ctx = Pizza.canvas.getContext("2d");
		Pizza.radius = Math.min(Pizza.width, Pizza.height) / 2;
		Pizza.center_x = Pizza.width/2;
		Pizza.center_y = Pizza.height/2;
	},

	// Desenhando -  é só colocar Pizza._draw(60) pra desenhar
	// o gráfico com 60% de ocupação
	_draw:function(percentual){
		Pizza.ctx.clearRect(0,0,Pizza.width,Pizza.height);
		Pizza.ctx.beginPath();
		Pizza.ctx.moveTo(Pizza.center_x, Pizza.center_y);
		Pizza.ctx.arc(
			Pizza.center_x,
			Pizza.center_y,
			Pizza.radius,
			Math.PI * (- 0.5), // inicio da fatia
			Math.PI * (- 0.5 + 2 * percentual/100), // fim da fatia
			false
		);
		Pizza.ctx.closePath();
		Pizza.ctx.fillStyle = Pizza.cor;
		Pizza.ctx.fill();
	}
}
Pizza._init();

E por último, o drag, onde utilizo o jQuery UI, aí fica simples:

html:

	<div id="mascara_percentual">
		<span id="slider">drag<br/>me</span>
	</div>

javascript:

$('#slider').draggable({
	containment:'#mascara_percentual',
	drag:function() {
		var left = parseInt($(this).css('left').replace('px',''));
		var percentual = parseInt(left / 350 * 100);
		// (350 = 400 do width da mascara - 50 do width do slider)
		Pizza._draw(percentual);
	}
});

// Iniciando em 70%
$('#slider').css('left','70%'); // drag
Pizza._draw(70); // canvas

Parece algo mínimo, mas irrita profundamente quem está acostumado a trabalhar da forma correta.

Porque forma correta? Simples, porque pode dar erro se colocar a chave na linha de baixo.

Pensem na função abaixo getUser que retorna um objeto em JavaScript

function getUser(){
	return {
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna um objeto

Se fosse pra deixar a chave embaixo, ficaria assim:

function getUser()
{
	return
	{
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna undefined

Só que há um problema: pelo fato do ponto e vírgula indicando quebra de linha ser no JavaScript ser opcional, o return não entende que é pra retornar um objeto e encerra a função ali, retornando undefined.

E tem um caso pior, que simplesmente dá erro de sintaxe:

function getPosition()
{
   return
   {
       top:32,
       left:50
   }
}
// dá erro "SyntaxError: Unexpected token :"

E se fosse feito com os braces na linha de cima, daria certo.

O incrível é que mesmo com esse argumento, tem programador que não dá o braço a torcer e insiste dizendo que JavaScript veio do java e no java se programa assim. ERRADO, JavaScript veio de Scheme e qualquer livro de Padrões em Javascript vai aconselhar abrir o bloco com a chave na linha de cima.

Dá pra configurar isso no Visual Studio 2010 (no 2008 deve dar também).

Todo mês o SINDPD por regra fica com 30 reais do seu salário. E pra que isso não ocorra só tem uma forma: você tem que escrever uma carta num modelo que eles criam e trocam todo ano e levar pessoalmente duas cópias assinadas ao sindicato, em horário comercial obviamente e você só pode fazer isso nas duas primeiras semanas do ano (período em que normalmente pessoas felizes tiram férias). Se você não entregar até a segunda sexta feira do ano aí já era. No estilo “perdeu playboy” mesmo. Até dezembro você vai perder 30 reais todo mês por não ter levado a cartinha deles.

O processo todo é feito pra você não conseguir entregar o documento a eles. Afinal, é só pensar um pouco: Sindicato de Tecnologia da Informação ter que levar uma carta, pessoalmente, pra eles carimbarem, é ridículo. Qualquer programador podia fazer um sistema básico pra todo mundo poder autorizar ou não, de casa ou do trabalho, o dinheiro tomado por eles. Mas não, e são filas longas (ano passado eu perdi 2 horas e meia na fila que dava uma volta no quarteirão).Pra intimidar, eles colocam cerca de 30 seguranças pra não deixar ninguem “dar pitizinho”. E funciona assim: quanto mais gente voltar pro trabalho ao invés de perder meio dia de serviço pra entregar um papel, melhor (mais dinheiro) pro sindicato.

Além disso, no modelo da carta, é necessário colocar seu e-mail lá. Não vejo outro motivo pra eles ter seu e-mail a não ser vender a base, já que somos obrigados a ir pessoalmente lá.

Eu me recuso a deixar 330 reais na mão do sindicato ( 30 reais x 11 meses, em janeiro é cobrado de toda forma, levando cartinha ou não) e quem trabalhar em alguma empresa que também responde ao SINDPD deveria fazer o mesmo. O modelo da carta de 2012 está aqui.

Obviamente precisa de um belo work-around pra funcionar em interfaces touch e o pior, versões antigas de IE. Mas a ideia em si é simples, basicamente no mousemove em cima do canvas você escreve uma linha com o LineTo, veja abaixo como ficou:

Bom, vamos aos códigos:

HTML

Criando a tag canvas e deixando uma mensagem caso o usuário não tenho um browser compatível com HTML5.

<canvas id="canvas" class="canvas" width="400" height="400">
    Seu browser não suporta canvas, é hora de trocar!.
</canvas>

Javascript

São só 29 linhas (bem indentadas e organizadas) de javascript

var Draw = {
	obj : document.getElementById('canvas'),
	contexto : document.getElementById('canvas').getContext("2d"),
	_init:function(){
		Draw.obj.onmousemove = Draw._over;
		Draw.obj.onmousedown = Draw._ativa;
		Draw.obj.onmouseup = Draw._inativa;
		Draw.obj.onselectstart = function () { return false; };
	},
	_over:function(e){
		if(!Draw.ativo) return;
		Draw.contexto.beginPath();
		Draw.contexto.lineTo(Draw.x,Draw.y);
		Draw.contexto.lineTo(e.layerX, e.layerY);
		Draw.contexto.stroke();
		Draw.contexto.closePath();
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_ativa:function(e){
		Draw.ativo = true;
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_inativa:function(){
		Draw.ativo = false;
	}
}
Draw._init();

CSS

Basicamente, é adicionar o cursor no elemento Canvas

#canvas{ cursor: url("../img/pencil.gif"), default; }

Então, não parece tão complicado, parece?

[]s,

Parece inútil, mas se parar pra pensar. Em sites mobiles ou pra tablets, isso funciona praticamente em 100% dos acessos.

Veja o efeito, com o mínimo de código possível:

Pra quem se interessou, pode fazer download do exemplo aqui.