Pinceladas da Web

Se você quiser mostrar em seus links os idiomas dos mesmos, existe um método muito simples, que usa a propriedade :after do CSS, seus links teriam a seguinte aparência: Aqui o link [pt-br].

O método consiste da seguinte forma:

<a href="url-do-link" hreflang="idioma">Texto do link</a>

O idioma será o da página em questão, por exemplo:

<a href="http://www.pinceladasdaweb.com.br" hreflang="pt-br">Pinceladas da Web</a>

O seu CSS fica da seguinte forma:

a[hreflang]:after {
   content: " ["attr(hreflang)"]";
   }

O que ocorre é que essa regra seleciona todo os links que tem o atributo hreflang e mostra para você o idioma dos mesmos. Veja aqui um exemplo dessa propriedade em ação. Ela não funciona no IE.

Com as CSS é possível fazer alterações radicais no visual do nosso site. Você pode simplesmente fazer alterações em todo o seu site, ou apenas estar “estilizando” uma tag. Hoje vamos aprender a como efetuar alterações no título de nossa página. Para isso vamos usar a tag <h1>. Nosso código (x)HTML fica da seguinte forma:

<h1>Título da Página</h1>

Agora vamos mexer no nosso CSS, vamos definir o tipo de fonte:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
</style>

Só que o nosso título não tem cor alguma, vamos agora definir uma cor para a fonte e também para o background:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
</style>

Vamos agora definir uma margem para o título para que o texto que venha a seguir não fique colado no mesmo:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
</style>

Para uma melhor performance, vamos definir também o padding:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
padding:15px;
</style>

Pronto, viu como é fácil, veja aqui um exemplo.

Antigamente muitas pessoas faziam isso com tabelas, se criava uma célula, onde se colocava a imagem, e na célula ao lado, era colocado o texto, e tinha-se a ilusão de que o texto estava fluindo ao lado da imagem. Fazer isso com CSS é muito simples, usaremos a propriedade float. O nosso HTML fica da seguinte forma:

<img src="logo.jpg" alt="Pinceladas da Web" />
<p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   Vestibulum at purus sed erat lobortis suscipit. Cras
   facilisis viverra wisi. Class aptent taciti sociosqu...
</p>

Se você quiser que a imagem fique alinhada a esquerda e o texto flua a sua direita, é só definir a propriedade float como left, isso quer dizer que a imagem irá flutuar a esquerda, seu CSS deverá ficar da seguinte forma:

img {
    float:left;
    margin:0 20px 10px 0;
  }

Aqui é importante definir valores para margin para que o nosso texto não fique colado na imagem. Veja aqui um exemplo.

Mas caso você queira que sua imagem fique a direita do texto, é só definir o float como rigth, isso quer dizer que a imagem irá flutuar a direita do seu texto, o CSS fica da seguinte forma:

img {
    float:rigth;
    margin:0 0 10px 20px;
  }

Veja aqui um exemplo.

Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte:

Aqui o CSS:

h1 {
    height:200px;
    background:url("logotipo.jpg") no-repeat;
    }
h1 span { display:none; }

Aqui só é necessário colocar a altura da imagem e colocar normalmente o “no-repeat” para que não haja repetição alguma da imagem, por que nós não queremos isso. O que entra depois é o “span” com “display:none” para que ele desapareça com o nosso texto.

Aqui o HTML:

<h1><span>Pinceladas da Web</span></h1>

Para que haja uma melhor interação com o tutorial, dê uma olhada nesse exemplo, experimente desabilitar o CSS para ver o resultado.

Quando você começa a lhe dar com WebStandards, você acaba descobrindo que a tag <center> caiu em desuso, mas se eu preciso centrar meu layout horizontalmente, de que forma eu vou fazer isso? Através de CSS isso é possível, o que ele faz é o seguinte: Você diz ao browser para colocar uma margem “auto” em ambos os lados do objeto. O valor para “auto” transforma-se na largura da tela menos a largura do objeto dividido por 2. Isto centra o objeto horizontalmente. O código HTML fica da seguinte forma:

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

Esta div “container” deve ser a primeira a ser aberta depois do body e a última a ser fechada, por que é dentro dela que ficará todo o conteúdo do nosso site. Agora observe como fica o código CSS:

body {
  text-align:center;
  margin: 0;
  padding: 0;
}

#container {
  text-align:left;
  margin: 0 auto;
  width:760px;
}

É importante remover o margin e padding de body de modo que nossa div container não seja deslocada por essa margem. Pronto, agora você tem um layout centralizado. Essa técnica visa as pessoas que estão aprendendo WebStandards. Um exemplo de uso dessa técnica é o layout do meu blog, está centrado horizontalmente.