Cantos arredondados com tableless

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

4 Respostas to “Cantos arredondados com tableless”

  1. Tiago Says:

    marcel, muito boa explicação, agora eu entedi *____________*
    a partir de amanha, vou usar isso nas minhas produçoes…
    muito boa explicação cara, me SURPREENDEU!
    não parece o marcel que eu conheço!

  2. Paulo Henrique Carvalho Almeida Says:

    Está de parabens Marcel…
    vc consegui fazer do conhecimento algo muito facil…
    alem de compartilhar informações, e esperiencias de um programador web nato…
    espero q cresça muito profissionalmente…
    tenho certeza q não so eu, como muitos torcem pelo seu sucesso…
    abração…
    quem ganha com tudo isso somos nós…
    hehe
    =D

  3. Paulo Henrique Carvalho Almeida Says:

    olha esqueci de dizer…
    se ate o tigo intendeu…
    qual quer um pode intender…
    aushauhsuahsuahsuahs
    xD

  4. Fabian Carlos Says:

    ahahhaa….bacana esse tutorial…e muito importante em…é muito usado mesmo!!!

    valeu ae professor…

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: