‘ CSS ’ Category

MoreCSS.js: Efeitos Especiais no seu CSS

No response, Mar 15, 2008

morecss.png

MoreCSS é um script que expande as propriedade do CSS para facilitar agregar as características e efeitos que ou não tem um atributo especifico o não são aceitas por todos os navegadores.
Por exemplo, com este script é possível criar tabelas ou lista com o famoso estilo “Zebra”, abrir links em uma janela externa na forma de pop-up, agregar conteúdo antes e depois de um elemento entre outras coisas. No total são cerca de 20 funções diferentes.

 

Para utilizá-lo é necessário adicionar a chamada ao Script:

<script src="http://seusite.com/MoreCSS.js" type="text/javascript"></script>

 

E depois adicionamos os novos atributos as classes que queremos aplicar o efeito.
Por exemplo, para abrir links em um nova janela, definimos no css:

 

.blogroll a:active {
target: popup;
target-width: 800px;
target-height: 600px;
}

 

Que terá como resultado que todos os links dentro da classe "blogroll" se abram em uma nova janela com tamanho 800*600px.

 

Na página de MoreCSS podemos ver todos os atributos, sua forma de uso e exemplos, assim como descarregar a última versão do script

Via: blogandweb.com


6 Dicas de CSS em uma Linha

No response, Mar 12, 2008

Centralizar Verticalmente com Line-height
Quando você tem um container com altura fixa, você pode utilizar a propriedade line-heigh para centralizar verticalmente o conte

line-height:24px;

 

Prevenir Conteúdo Distorcido com larguras fixa.
Quando você inseri um conteúdo maior que a largura fixada em um container, ele quebra o layout. Para evitar isso, você oculta parte do conteúdo, mas permite que a estrutura do seu layout permaneça intacta.

#main{overflow:hidden;}

 

Prevenir Quebra de Linhas em Links
Essa pequena dica irá prevenir quebra de linhas em seus links.Recomenda-se o uso dessa técnica em textos longos para evitar que links se quebrem em 2 linhas;

a{white-space:nowrap;}

 

Centralizando elementos de bloco horizontalmente
Para todos navegadores modernos esta linha de css é suficiente para centralizar um bloco horizontalmente

margin:0 auto;

 

Removendo Scrollbar Vertical de Textarea no IE
Textarea no IE tem a scrollbar vertical visível por padrão. Se você quiser remover utilize essa linha de código

textarea{overflow:auto;}

 

Força Quebra de Linhas em Documentos Impressos
Com esta linha de código você controla espaços quando você quer suas paginas impressas.

h2{page-break-before:always;}



Fonte:CSS Globe

Page 2 of 2«12