O CSS Globe publicou á uns tempos um artigo com 8 dicas CSS interessantes. No artigo intitulado 8 Premium One Line CSS Tips podem encontrar exemplos de algumas destas linhas em funcionamento.
-
Alinhamento vertical com Line-Height
line-height:24px;
Quando se atribuí uma altura (height) fixa a um bloco pode-se usar a propriedade line-height para centrar verticalmente o conteúdo.
Mais sobre o line-height:
http://www.w3schools.com/css/pr_dim_line-height.asp
http://www.maujor.com/tutorial/elinhas.php
-
Impedir que o conteúdo saia fora do layout
overflow:hidden;
Este código irá esconder todo o conteúdo que sair fora do layout. Imaginando que temos um DIV com 500px de largura e um link enorme. O texto do link que ultrapassar a largura definida (500px) não irá aparecer.
Se quiserem que apareça um scroll para que o conteúdo mostre todo e apenas quando o conteúdo ultrapassar as dimensões definidas podem usar o seguinte código:
overflow:auto;
-
Impedir que o texto se parta
white-space:nowrap;
Podem ver um exemplo aqui do que acontece quando se usa o nowrap.
-
Centrar blocos horizontalmente
margin:0 auto;
O valor auto funciona para as margens laterais (esquerda e direita). Isto fará com que o bloco fique centrado horizontalmente.
-
Remover borders de links activos
Quando se clica num link aparece um border á sua volta. Já falei disso aqui e como remover este link. Nada mais simples:
outline:none;
Sem dúvida, excelentes dicas 
Por vezes na construção de sites deparo-me com um problema, não quero criar uma imagem para cada botão que crio e não me apetece ter um botão quadrado completamente plano, por vezes pode mesmo quebrar o design do site.
Código HTML
A tag BUTTON tem uma maior capacidade de personalização que usando input type=submit.
Esta tag foi introduzido com a versão 4.01 do HTML e permite, por exemplo, que sejam adicionadas imagens dentro dele.
Fica aqui algumas referencias úteis:
Sem dúvida que a grande vantagem da TAG BUTTON é a sua capacidade de ter conteúdo e é essa capacidade que vou explorar.
<button><span><em>Texto Botão</em></span></button>
O objectivo com este código é criar um botão que permita ter um comprimento variável adaptando-se ao seu conteúdo de forma a que não seja necessário editar o CSS cada vez que quero criar um novo botão.
(more…)
Em 2006 publiquei um artigo que ensinava como colocar transparência em imagens PNG no Internet Explorer 6.
Há uns tempos atrás dei de caras com uma library em javascript que torna o IE mais de acordo com os standards nomeadamente no que se trata des CSS e transparência em imagens PNG.
Site do Script: http://dean.edwards.name/IE7/
Como instalar
Basta colocarem o seguinte código dentro das tags <HEAD></HEAD>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
Podem fazer download do ficheiro JavaScript aqui: http://code.google.com/p/ie7-js/downloads/list.
O ficheiro ZIP trás diversos ficheiros:
- ie7-core.js - É um modulo fundamental. Contem um motor que permite que CSS funcione correctamente.
- ie7-html4.js - Arranja tags HTML incorrectas.
- ie7-layout.js - Permite o suporte do box-model do W3C e permite o suporte das propriedades CSS min-width, max-width e min-height.
- ie7-css2-selectors.js - Permite usar selectores do CSS2.
- ie7-graphics.js - Permite que o browser suporte transparencia PNG.
- ie7-fixed.js - Permite o uso da propriedade Fixed no posicionamento de imagens.
- ie7-standard-p.js - Um compacto de todos os scripts em cima, desta forma basta chamar apenas 1 script.
- ie7-css3-selectors.js - Permite o suporte de selectores CSS3.
- ie7-css-strict.js - Todos os selectores CSS são convertidos em classes do IE7.
- ie7-overflow.js - Permite o uso de overflow:visible.
- ie7-recalc.js - Permite o uso de document.recalc().
- ie7-dynamic-attributes.js- Permite o suporte de selectores com atributos dinâmicos.
- ie7-squish.js - Bug fixes.
Mais informações sobre os ficheiros em:
http://dean.edwards.name/IE7/usage/configure.html
Para que o script saiba quais os ficheiros em que deve actuar devem incluir -trans.png no nome das imagens.
Este script usa a propriedade filter que impede, no IE6, que se consiga posicionar ou repetir uma imagem de fundo PNG, a solução pode passar por criar um div que permite a inclusão da imagem como fundo.
Podem ler mais sobre este script em:
http://trevordavis.net/blog/tutorial/the-ultimate-png-guide/
Site Oficial: IE7-JS
Neste tutorial irei explicar como criar uma secção extensível com conteúdo. O resultado final pode ser visto aqui.
Breve descrição
A secção extensível é composta por 2 partes:
- O cabeçalho
- O conteúdo
(more…)
De certeza que já viram por aí muitas páginas que têm no final algo a dizer “Loading time”. Este é um tutorial em PHP e é algo bastante simples de fazer e para quem gosta de ter estatisticas no seu site é uma especie de rebuçado com papel de embrulho brilhante.
Em teoria o que vamos fazer é gravar o tempo no inicio da página, gravar o tempo no final da pagina e calcular o tempo que demorou.
O código seguinte deve ser colocado no inicio da página:
$micro_tempo = explode(” “,microtime());
$micro_tempo = $micro_tempo[0] + $micro_tempo[1];
$tempo_inicial = $micro_tempo;
A função microtime() dá-nos os micro-segundos no inicio da página.
Usando a função explode() “transforma” os micro-segundos num vector. (more…)
