Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fernando Neto MH

CSS3 em tabela

Por , em Desenvolvimento frontend

Recommended Posts

Fernando Neto MH    13

Fernando Neto MH
Postado

Olá amigos do fórum, tenho uma revenda de hospedagem e estou montando um site mais estou dando bronca na tabela de planos. eu olhando em alguns sites de hospedagens vi que muitos utilizam tipo um css3 que EX: tem 3 planos então 3 colunas quando passo o mouse na primeira ela amplia a coluna do planos onde o mouse está.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Wathier    1

Guilherme Wathier
Postado

Olá,

 

Vê se é isso que você quer.

 

Html:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="style.css" type="text/css" /><title>Testes</title></head><body>

<div class="coluna1">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>


</body>
</html>

 

Style.css

.coluna1{width:230px; height:450px; border:1px solid #333;}
.coluna1:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}

 

O que eu fis foi colocar um hover na coluna para que quando o usuario passar o mouse sobre a coluna ela vai mudar de largura e altura.

Compartilhar este post

Link para o post
Compartilhar em outros sites

José da Silvasauro    7

José da Silvasauro
Postado

Dei uma adaptada no codigo do Guilherme

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#corpo {margin:auto; width:900px;}
.coluna1{width:230px; height:450px; border:1px solid #333; float:left; display:inline;}
.coluna1:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna2{width:230px; height:450px; border:1px solid #333; float:left;}
.coluna2:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna3{width:230px; height:450px; border:1px solid #333; float:left;}
.coluna3:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
</style>
</head>

<body>
<div id="corpo">
<div class="coluna1">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>

<div class="coluna2">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>

<div class="coluna3">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Wathier    1

Guilherme Wathier
Postado

Pronto coloquei transition efeito de saída testa ai.

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#corpo {margin:auto; width:900px;}
.coluna1{width:230px; height:450px; border:1px solid #333; float:left; display:inline; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna1:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna2{width:230px; height:450px; border:1px solid #333; float:left; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna2:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna3{width:230px; height:450px; border:1px solid #333; float:left; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
.coluna3:hover{width:290px; height:500px; transition:1s width, 1s height; -webkit-transition:1s width, 1s height; -moz-transition:1s width, 1s height;}
</style>
</head>

<body>
<div id="corpo">
<div class="coluna1">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>

<div class="coluna2">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>

<div class="coluna3">
<h3 style="text-align:center;">COLUNA 1</h3>
<hr color="#ccc"  />
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
<p style="text-align:center;">Coloque seu conteudo aqui</p>
</div>
</div>
</body>
</html>

 

Espero ter ajudado

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito