CSS para alinhamento vertical
18/11/2007 — 2 comentários — Tags: css, hackO 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:
Pseudo-seletores são legais
28/10/2006 — Comente! — Tags: css, dicas, tutorialTodo 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:
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:
Toda imagem será antecidida de: Descrição da imagem: (valor do atributo da imagem)
Hacks para Internet Explorer
04/06/2006 — 2 comentários — Tags: browser, css, hack, ieEscrever 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.
CSS para preloader de imagem
23/04/2006 — Comente! — Tags: css, tutorialwidth: 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
09/02/2006 — Comente! — Tags: css, tutorialExistem formas distintas para fazer efeitos de transparência, via CSS. Cada browser reconhece um atributo nas folhas de estilo. Vamos lá então:
Para o flamigerado IE.
Usado no browser Mozilla
Usado no Opera
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;