Arredondar as bordas de uma Camada e Tabela

Arredondar as bordas de uma Camada e Tabela

 

É uma tendência da internet arredondar as bordas de camadas e tabelas, felizmente isso não é muito difícil de se fazer, para realizarmos esse trabalho vamos utilizar o nosso famoso CSS, vamos ao trabalho:

 

Coloque o código CSS abaixo:

<style type=”text/css”>

.curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}

#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}

#ctl {top:0; left:0;}

#cbl {bottom:0; left:0;}

#ctr {top:0; right:0;}

#cbr {bottom:0; right:0;}

.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}

#ctl b {left:-8px;}

#ctr b {left:-25px;}

#cbl b {left:-8px; top:-17px;}

#cbr b {left:-25px; top:-17px;}

.curvy p {position:relative; z-index:100; padding:5px 10px;}

</style>

 

Na parte Html coloque uma camada central e as sub-tags pra fazer o arredondamento:

 

<div class=”curvy”>

<em id=”ctl”><b>•</b></em>

<em id=”cbl”><b>•</b></em>

<em id=”ctr”><b>•</b></em>

<em id=”cbr”><b>•</b></em>

<p>Mas qualquer que me negar diante dos homens, também eu o negarei diante de meu Pai, que está nos céus.</p>

<p> Não penseis que vim trazer paz à terra; não vim trazer paz, mas espada.</p>

<p> Porque eu vim pôr em dissensão o homem contra seu pai, a filha contra sua mãe, e a nora contra sua sogra; e assim os inimigos do homem serão os da sua própria casa.</p>

</div>

 

 

Se quiser ver a pagina em funcionamento click aqui.

Anúncios
Publicado em CSS. 1 Comment »

Uma resposta to “Arredondar as bordas de uma Camada e Tabela”

  1. Luiz Says:

    Parabens pela informação, muito bem explicada !

    Gostei mto


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: