Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.
Continue lendo →
Personalizando o scrollbar com WebKit
CSS para alinhamento vertical
O Bruno Fernandes e eu estávamos no MSN ontem discutindo uma forma de fazer alinhamento vertical, para uma imagem da qual não se sabe a altura.
Pensamos em uma POG de usar imagemagick no ruby para dar um resize na imagem e fixar a altura no tamanho da div. Mas não foi preciso nada disso. Via CSS:
.product1 {display: table; height: 120px; width:120px; #position: relative; overflow: hidden; background-color:#fff;}
.product2 {#position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align:center;}
.product3 {#position: relative; #top: -50%; #left: -50%;}
.product2 {#position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align:center;}
.product3 {#position: relative; #top: -50%; #left: -50%;}
Pseudo-seletores são legais
Todo mundo lembra do pseudo-seletor :hover, quando quer fazer um simples efeito rollover em um link. Well, o que pouco sabe é que existe outros dois seletores muito bacanas: o :after e o :before.
Veja o exemplos:
input:before { content:" ";}
a:before { content:">";}
a:after { content: " (link externo) "; }
a:after { content: " (" attr(href) ")"; }
a:before { content:">";}
a:after { content: " (link externo) "; }
a:after { content: " (" attr(href) ")"; }
O primeiro exemplo coloca um espaço (entidade ) antes do conteúdo do botão. O segundo exemplo, coloca um marcador para cada link. Já o terceiro exemplo adiciona o texto "link externo" a todo link da página. Bem, e a última linha? Note o uso do attr(href). O que ele faz é simplesmente retornar o valor href do tag a. Ao invés do attr(href), você também pode usar outros atributos. Veja esse exemplo:
img:before { content: "Descrição da imagem: " attr(alt) }
Toda imagem será antecidida de: Descrição da imagem: (valor do atributo da imagem)
Hacks para Internet Explorer
Escrever uma página 100% idêntica para vários browsers pode parecer impossível. Mas não é.
Para contornar isso, hacks são usados, para tentar uma aproximação entre browsers.
Continue lendo →
CSS para preloader de imagem
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
Depois de configurar o CSS, basta chamar uma div, com seu respectivo id.
CSS: Transparências cross-browser
Existem formas distintas para fazer efeitos de transparência, via CSS. Cada browser reconhece um atributo nas folhas de estilo. Vamos lá então:
filter:alpha(opacity=25)
Para o flamigerado IE.
-moz-opacity:.25
Usado no browser Mozilla
opacity:.25
Usado no Opera
-khtml-opacity:.25
Usado em navegadores com engine KHTML (Safari e Konqueror)
Para o Internet Explorer, os valores variam entre 0 a 100. Para os outros browsers, variam entre 0 e 1.
[update] O Opera, não sei porque cargas d'água, não suporta transparência;
O que esperar com o CSS3
Bem, um dia desses, a versão 3 do CSS deve sair. Mesmo ainda que vários browsers não suportam sequer a versão 2, o W3C soltou uma lista de features. O que deveremos ter:
Border: cantos arredondados; sombras; bordas complexas feitas de várias imagens ladrilhadas;
Comportamento CSS: adição de comportamentos aos estilos, ou seja mudanças dinâmicas ao estilo ou ao documento em resposta a cliques e/ou teclas pressionadas;
Layout multi-colunas: novas propriedades para criar layouts de colunas mais flexíveis;
Perfil móvel 1.0: inclui um subgrupo de propriedades CSS1 e CSS2 apropriadas para dispositivos portáveis;
Fontes: propriedades para "decoração" e efeitos, como contorno e AA (anti-aliasing = anti-serrilhado);
Audio: possibilidade de prender sons de fundo a elementos e transições de elementos, como ativação de links ou flutuar (hover) o cursor sobre um elemento.