Customizando a barra de Scroll só com CSS

Posted on by
Reply

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)

Posted on by
7

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

Posted on by
1

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

Posted on by
4

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.

« Próximos posts — Posts Anteriores »