Tabela com cantos arredondados usando CSS
Neste post vamos aprender a criar Tabela com os cantos arredondados, totalmente formatada com CSS, diferente das outras técnicas que fazem esse efeito através de imagens.Bom! Primeiramente, vamos criar nossa página
<html><head>
<title>Tabela com cantos arredondados - CSS</title>
<meta charset="utf-8">
<h3><strong>Fazer o login...</strong></h3>
<form id="form_login" name="form_login" method="post">
<table width="100%" border="0" cellpadding="0" cellspacing="4" class="tabela500">
<tr>
<td width="30%" height="25" align="right" valign="middle" nowrap="nowrap" style="font-size:14px; font-weight:bold;">Usuário (e-mail):</td>
<td align="left" valign="middle"><input name="lg_email" type="text" class="Email" id="lg_email"></td>
</tr>
<tr>
<td height="25" align="right" valign="middle" style="font-size:14px; font-weight:bold;">Senha:</td>
<td align="left" valign="middle"><input type="password" name="lg_senha" id="lg_senha"></td>
</tr>
<tr>
<td height="40" align="right" valign="middle"> </td>
<td align="left" valign="middle"><input name="entrar" type="button" class="inputbox" id="entrar" value="Entrar"></td>
</tr>
</table>
</form>
</body>
</html>
Agora vamos criar o Estilo CSS.
<Style>.tabela500 {
background-color: #FFDFDF;
height: auto;
width: 500px;
border-right-width: medium;
border-bottom-width: medium;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #CCC;
border-bottom-color: #CCC;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
</Style>
Agora, basta você inserir esse código CSS entre as TAGs <head> e </head>
da página, e alterar as propriedades de acordo com a sua página, como:
background-color: Cor de Funda da Tabela
height: Altura da Tabela. Quer dizer que independente da quantidade de linhas ele vai acompanhar
width: Largura da Tabela. Aqui eu fixei em 500 pixels, mas se usar 100% ou auto funciona
border-right-width: Espessura da Borda Direita da Tabela (efeito Sombra)
border-bottom-width: Espessura da Borda Inferior da Tabela (efeito Sombra)
border-right-style: Estilo da Borda Direita da Tabela (efeito Sombra)
border-bottom-style: Estilo da Borda Inferior da Tabela (efeito Sombra)
border-right-color: Cor da Borda Direita da Tabela (efeito Sombra)
border-bottom-color: Cor da Borda Inferior da Tabela (efeito Sombra)
-moz-border-radius: Mesmo que border-radius para Browsers tipo Mozilla
-webkit-border-radius: Mesmo que border-radius para Browsers tipo WebKit
border-radius: Ângulo (em Pixels) do Arredondamento da Tabela
Nenhum comentário :
Postar um comentário
Comentário, Pedido, Sugestão...