Archive for the ‘HTML’ Category

Cantos arredondados com tableless

outubro 25, 2009

setaEae Marcel, blz? o que manda de bom hoje?

Bom galera, vou ensinar passo-a-passo como criar o famoso efeito de cantos arredondados. É necessário conhecimento básico de HTML e CSS.

setaLegal Marcel, então começa aí!

  1. Abra o Fireworks
  2. Crie um novo arquivo com dimensões de 300 x 200 resolução de 72 pixels/inch, fundo branco.
  3. Desenhe um retângulo de aproximadamente 200 x 150 com a ferramenta Recangle Tool;
  4. Selecione o retângulo e coloque em Propriedades -> Rectangle roundness = 20
  5. Deverá ficar parecido com o seguinte:
    img1
  6. Dê um zoom no canto superior esquerdo;
  7. Desenhe com a ferramenta Slice Tool um retângulo sobre este canto, como mostra a imagem abaixo:
    img2
  8. Vá até a aba Layers (caso não esteja vendo, ative-a em Window -> Layers);
  9. setaUm pouco cansativo este tutorial né Marcel ?!
    É sim, mas o resultado é satisfatório 😉
  10. Dentro da aba layers existe uma pasta Web Layer, com um objeto nomeado Slice dentro. este objeto é o recorte que será exportado com formato GIF. Renomeie este objeto para “tl” sem aspas.
  11. tl é abreviatura para top-left em inglês, ou topo-esquerdo. Adotei esta forma de nomenclatura pois sinto mais facilidade em entender abreviaturas em inglês. O mesmo será aplicado para:
    • tr (top-right, ou topo-direito),
    • bl (bottom-left, ou inferior-esquerdo) e
    • br (bottom-right, ou inferior-direito).

  12. Selecione novamente a ferramenta Slice Tool e repita do passo 6 ao 9.
    1. Para o recorte do canto superior direito, nomeie tr;
    2. Para o recorte do canto inferior esquerdo, nomeie bl;
    3. Para o recorte do canto inferior direito, nomeie br;
  13. Precisamos definir o formato dos slices. Para isto, selecione a Web layer como mostra a figura:
    img4
  14. Em properties, selecione Type = Image e abaixo a opção GIF Adaptative 256;
  15. Agora devemos exportar os recortes. Selecione o recorte tl com o botão direito -> Export Selected Slice;

    img3
  16. Crie uma pasta img dentro da pasta que ficará localizado seu arquivo HTML, e salve este recorte dentro desta pasta com o nome tl.gif. Repita estes passos para os outros 3 cantos.
  17. Os recortes estão prontos.

setaNossa, que cansativo Marcel… e o HTML?

Abra seu editor de texto HTML (eu utilizo o Dreamweaver), e insira o seguinte código:

 

<html>
<head>
<title>Cantos arredondados</title>
<style> 
.ca {
	 background-color:#07438C;
	 color:#FFFFFF;
	 width:200px;
}
 .ca .tl {
	 background:url(img/tl.gif) no-repeat;
}
 .ca .tr {
	 background:url(img/tr.gif) no-repeat 100% 0px;
}
 .ca .bl {
	 background:url(img/bl.gif) no-repeat 0px 100%;
}
 .ca .br {
	 background:url(img/br.gif) no-repeat 100% 100%;
	 padding:30px;
}
</style>
</head>
<body>
<div class="ca">
  <div class="tl">
    <div class="tr">
      <div class="bl">
        <div class="br">Lorem ipsum dolor sit amet, consectetur</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Salve como ca.html

setaDá pra explicar o que você fez com esse monte de DIVs??

Claro!

O conteúdo dentro de uma tag DIV ocupa 100% da largura disponibilizada para a mesma por padrão, por esse motivo não precisei declarar qual será a largura de cada div.

Criei uma regra chamada ca para indicar o escopo que as regras CSS valem.

setaCerto, e quanto ao controle das imagens do background?

Podemos também declarar qual será a posição da imagem de fundo (background) dentro de uma DIV, além de poder controlar se a imagem irá repetir ou não. Exemplo, na declaração

.ca .tl {
	background:url(img/tl.gif) no-repeat;
}

Eu defino que a imagem não deverá repetir horizontalmente ou verticalmente. Portanto a imagem ficará no canto superior direito por padrão.

Na declaração:

.ca .tr {
	background:url(img/tr.gif) no-repeat 100% 0px;
}

Eu defino que a imagem não deverá repetir, e além disso ela deverá ficar na posição 100% horizontal, ou seja, à direita, e outra regra importante é que se declaramos a posição horizontal do background, devemos declarar também a posição vertical, pois caso contrário a posição vertical ficará como 50% (no meio da DIV), portanto declaro como 0px na vertical, ou seja, no topo da DIV.

Resultado final:
img6

setaLegal Marcel, mas qual a vantagem de usar tableless?

Um código mais limpo e fácil de entender, com regras CSS bem claras e definidas, o layout do seu site pode ser melhor administrado.

Anúncios