07/05/2007

Coleção dicas CSS

Estive pesquisando algumas coisinhas na Net para solucionar uns detalhes em um projeto, ai me deparei com dicas que podem ser úteis:
Scrollbar no Firefox
Quando fazemos um site cuja a Home é pequena e não utiliza a barra de rolagem, o FF não cria (ou reserva, como preferirem) o espaço para a barra. Neste mesmo site se uma página interna passa a necessitar da barra de rolagem, o leiaute da um salto para o lado, o que pode incomodar o usuário (acho que incomoda mais a gente que produz o site, mais tudo bem). Para resolver isso com CSS, é necessário somente uma linha:
html {overflow: -moz-scrollbars-vertical;}
Básico, mais ajuda. Li esta dica no Revolução.etc.
Link externo
Quando estava procurando aquela imagenzinha que o pessoal(Wikipédia, Revolução, etc) usa para identificar os links que são externos ao seu site, achei um artigo que fala como implementar com CSS este recurso. No entanto o código abaixo não funciona no IEca 6, ai só fazendo com uma classe mesmo.
HTML:
a href="http://www.site_externo_ao_meu.com.br" rel="external"
CSS:

* [rel~=external] {
background:url("external.gif") right 2px no-repeat;
padding-right:13px;
}

Para o IEca 6, basta utilizar uma classe no link externo e utilizar as mesmas propriedades CSS citadas acima. Esta dica tirei de outro artigo do Revolução.etc.
Moldura usando border
Outra dica que passo, eu achei testando variações de bordas no CSS:
border: #000 ridge thick;
Este código cria a aparência de uma moldura com sombra, pode ser interessante para algum leiaute.