Pinceladas da Web

Para centralizar o site com CSS, geralmente utiliza-se de um text-align:center; no body de nossa página para que o site fique centralizado no IE, e para os outros Browsers, aplicamos margin:0 auto;, só que também temos que dar um text-align:left; aí para corrigir o hack que utilizamos para centralizar o site no IE, pois senão todo o conteúdo do site irá ficar centralizado na página. Recentemente descobri uma maneira bem mais fácil de centralizar o site na página com CSS em qualquer resolução, que consite no seguinte:

Na Div que contém todo o site, aplique o seguinte CSS:

#content
{
  position: relative;
  left: 50%;
  width: 740px;
  margin: 0 0 0 -370px;
}

E no HTML:

<div id="content">
   <!-- Conteúdo do site -->
</div>

Mais simples impossível não? O que precisamos basicamente é definirmos que a div que contém o site irá se posicionar relativamente ao corpo da página, mas precisamente 50%, em width é onde você coloca a largura total dessa Div, alí foi usado 740px, e a mágica acontece quando definimos que todas as margens estão zeradas, menos a margem esquerda, que deverá ser a metade do tamanho da Div que contém o site, só que negativo. Dúvida que funciona? Então dê uma olhada.

Hoje em dia você encontra Frameworks praticamente para todas as linguagens de programação, até um tempo atrás eu pensava que era impossível desenvolver um Framework para CSS, pois ele varia muito de site para site, mas andei pesquisando sobre o assunto, e vi que é possível sim. Por exemplo, se você utiliza nomes em comum para as classes ou ids que estruturam seu site, como container, header, content, footer, é possível deixar em um CSS separado definições básicas para isso, ou até mesmo já deixar pronto algumas manhas que utilizamos no dia-a-dia, principalmente para os IEs.

Com base nisso, estou pensando em desenvolver meu próprio Framework, uma coisa bem básica de início, para depois, com o tempo, ir aprimorando, vamos ver no que vai dar, quando estiver pronto coloco ele aqui para download. Por enquanto, dê uma olhada nesses que encontrei:

• http://bjorkoy.com/blueprint/index.html
• http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
• http://jimwhimpey.com/blog/2007/my-css-framework/
• http://www.yaml.de/en/home.html
• 23 Frameworks CSS

E você, utiliza algum Framework CSS no seu dia-a-dia? Já desenvolveu algum? Deixe sua opnião sobre assunto.

Uma das coisas mais importantes no desenvolvimento web são as medidas, pois elas tem um grande efeito sobre a acessibilidade de um site web. Em CSS, o valor de uma propriedade, por exemplo, font-size, pode-se expressar em unidades de comprimento, ou em unidades de porcentagem. Vejam abaixo as unidades disponíveis:

Unidades de Comprimento

Unidades absolutas

• in (polegadas)
• cm (centímetros)
• mm (milímetros)
• pt (pontos)
• pc (picas)
• px (pixels)

Unidades relativas

• em
• ex

Unidades de Porcentagem

• %

De todas as unidades, as recomendadas são as relativas, em especial em, que anteriormente seu tamanho era equivalente a altura da letra M em maiúscula, mas hoje, é igual a altura da letra do elemento em que se usa. Com esse tipo de medida, o autor mantém um controle relativo em relação ao tamanho da fonte padrão do usuário, onde pode especificar quanto maior ou menor se vê o texto na página. VOcê pode utilizar a unidade em também em qualquer propriedade CSS que admita medidas (margens, paddings,…), o que permite um desenho proporcional ao sistema do usuário.

Mas por que não utilizar medidas absolutas? As unidades absolutas como px (pixel), cm (centímetros), pt (pontos), permitem um controle exato da aparência da página, sempre e quando, que seja vizualizada com o fim que ela foi projetada (onde se acaba a acessibilidade da página). Por exemplo, a unidade px tem um valor diferente dependendo da resolução da tela e do tipo de computador usuário. Assim, um sistema Windows mantém uma equivalência de 96px por polegada, e o Macintosh, 72 px por polegada. Se utilizarmos pt (pontos), no lugar de px (pixels) o tamanho dos pontos dependem da resolução do usuário.

Exemplos de Unidades de Medida

Utilizando em Texto normal: 3em, 2em,1em. Utilizando ex Texto normal: 3ex, 2ex,1ex. Utilizando px Texto normal: 20px, 15px,10px. Utilizando in Texto normal: 1in, 0.5in. Utilizando cm Texto normal: 2cm, 1cm. Utilizando mm Texto normal: 20mm, 10mm. Utilizando pt Texto normal: 18pt, 12pt. Utilizando pc Texto normal: 5pc, 3pc

Tabela de Equivalências

Abaixo você pode ver uma tabela equivalente as medidas e seus valores aproximados, pois tudo depende do Navegador utilizado e também do Sistema Operacional:

Esse artigo é uma tradução do artigo original de CarlosLeopoldo: Unidades de medida en CSS.

Um grande problema que atormenta a vida dos desenvolvedores, quando se trabalha com elementos de bloco (divs), é definir uma altura mínima para eles. Isso ocorre quando se tem uma imagem com float e um texto correndo logo ao lado, se o texto não tem a altura da imagem, o conteúdo que está logo abaixo do texto também será mostrado ao lado da imagem, pois a div que tem o conteúdo, toma a altura do texto, ao invés de tomar automaticamente a altura da imagem. Vejam o que acontece nesse exemplo.

Para solucionar esse problema, basta selecionar uma altura mínima para o elemento que contém o texto e a imagem:

HTML

Utilize-se de uma div como container e coloque dentro uma imagem e um texto decritivo.

<div id="box">
	<img src="Imagem_de_exemplo.gif" alt="Imagem de Exemplo" title="Imagem de Exemplo" />
	<p>Conteúdo da div box</p>
</div>

CSS

#box {
  min-height:128px;
  height:auto !important;
  height:128px;
  padding:5px;
}
#box img {
  float:left;
}

A propriedade min-height estabelece uma altura mínima para o elemento, esta propriedade não funciona no Internet Explorer, sendo que ele interpreta o atributo height como min-height, por isso estabeleci height:128px;. Agora paras os browsers que interpretam corretamente a propriedade height e min-height, não tenham uma altura fixa, por isso foi utilizado height: auto !important, estabelhecendo-lhe uma altura automática, dando-lhe uma maior prioridade a esta declaração fazendo o uso de !important, que não é interpretada pelo Internet Explorer. Agora vejam um exemplo do efeito funcionando corretamente.

Sabem aquelas bordas que ficam em volta das imagens e quando você coloca o mouse sobre a imagem essa borda muda de cor, existe uma forma muito simples de se fazer isso, e o melhor de tudo é que funciona em todos os browsers. Faça uso do seguinte CSS:

<style type="text/css">
img { border: 5px solid #CCCC99; }
a:hover img { border-color: #FF0000; }
a:hover { color: #FF0000; }
</style>

E no HTML, você coloca o link na imagem que deseja que o efeito ocorra, por exemplo:

<a href="#" title=""><img src="flap.jpg" alt="" title="" /></a>

Está pronto o efeito, aí é só custoizar com as cores que você quiser, dêem uma olhada nesse exemplo funcionando.

Muita gente nem deve ter notado isso, mas quando você seleciona o texto em uma página, por padrão, o fundo fica em azul e o texto fica branco, com CSS é possível efetuar algumas alterações nisso, podendo você alterar para a cor que quiser, fiz alguns testes e só funcionou no Firefox no artigo original, o autor postou um código que ele diz funcionar em outros browsers também, mas pelo que vi não funciona, portanto, o código citado aqui só funciona no Firefox, mas tudo bem, você deve utilizar-se do seguinte código CSS:

::-moz-selection {
	background-color:#f00;
	color:#fff;
}

Alí eu defini a cor de fundo como vermelho e o texto como branco, mas você pode utilizar a cor que quiser, fica a seu critério. Para você ver como isso funciona de verdade, aproveite e abra essa página no Firefox.

Via AC09.