CSS para alinhamento vertical

18 de Novembro de 2007 ~ 8 comentários ~ Tags: css, hack

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

Fonte

Pseudo-seletores são legais

28 de Outubro de 2006 ~ Comente! ~ Tags: css, dicas, tutorial

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

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)

Como o webdesigner moderno trabalha

24 de Junho de 2006 ~ Comente! ~ Tags: css, humor, webdevelopment

Hacks para Internet Explorer

4 de Junho de 2006 ~ 2 comentários ~ Tags: browser, css, hack, ie

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

23 de Abril de 2006 ~ Comente! ~ Tags: css, tutorial

Pescado do digg:

#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();
}

Depois de configurar o CSS, basta chamar uma div, com seu respectivo id.

CSS: Transparências cross-browser

9 de Fevereiro de 2006 ~ Comente! ~ Tags: css, tutorial

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

27 de Março de 2005 ~ Comente! ~ Tags: css

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.

Leonardo Faria