Ir para conteúdo

POWERED BY:

Arquivado

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

João Paulo Hildebrand

Reposicionamento Suave com CSS3

Por , em Desenvolvimento frontend

Recommended Posts

João Paulo Hildebrand    0

João Paulo Hildebrand
Postado

Galera, bom dia!

 

Gostaria de saber como posso fazer um reposicionamento "suave" das divs quando for aplicado as media queries?

Por exemplo, vejam este link e diminua e aumente a janela do browser que vocês verão que as fotos se deslocam suavemente. http://newsmartwave.net/wordpress/trego/

 

Tenho quase certeza que é o animation. Mas quando eu tento aqui as minhas divs não se deslocam suavemente.

 

O que estou fazendo: Várias divs quadradas uma ao lado da outra. Quero que quando a tela diminuir, elas caiam de forma suave.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.box{
	width:200px;
	height:200px;
	float:left;
	margin:10px;
	background:#ccc;
	transition:all 0.4s ease-out;
}
</style>
</head>

<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

Obrigado por qualquer resposta!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é o transition mesmo cara.. mas note que ele trabalha em cima de valores.

Quando uma div quebra, nenhum valor foi alterado, ai não tem como ficar suave.

 

Tente por exemplo trabalhar com porcentagens para as larguras, e então nos teus breakpoints alterar esses valores. Ai você verá algo suave.

 

 

Não é possível "suavizar", a quebra dos floats. Seria se vc tivesse posicionado elas com margin, left.. ou algo assim, pois ai sim estaria alterando algum valor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Outra coisa cara. Seu público alvo ficará redimensionando o navegador?

O efeito é muito legal e tal, mas qual a 'utilidade'?

As media queries servem pra detectar a resolução do device e formatar a página de acordo com essa resolução.

Para o usuário final, esse tipo de efeito não tem nenhuma visibilidade.

Se for pelo aprendizado, vai fundo, só precisa tomar cuidado para que esses tipos de 'features' não atrasem um projeto.

P.S. Por favor, considere uma crítica construtiva.

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