2

tenho duvidas de como montar o layout abaixo com HTML/CSS: lAYOUT

Não implementei nada ainda, pois estou sem idéia de como fazer. Alguma sugestão?

Obrigado!

5
  • 1
    O que você já tentou? Commented 10/08/2015 às 16:29
  • Tem alguma coisa pronta já? Commented 10/08/2015 às 16:46
  • Primeiro: não são imagens "fatiadas/recortadas" são imagens sobrepostas, ela foram feitas utilizando algum software externo, como Photoshop ou Fireworks. Segundo: Sua pergunta está muito vaga, peço que especifique mais o que quer e coloque o que você já tem de código. Commented 10/08/2015 às 17:02
  • Pelo que parece são divs com imagens no background.
    – RFL
    Commented 10/08/2015 às 17:15
  • 1
    Não implementei nada ainda e @JonathanBarcela, sim, esse layout é feito no PS. Só quero uma idéia de como fazer, por exemplo aquela div central, ela é rotacionada, com skew e dentro dela tem um Background e alguns elementos de textos e menu Commented 10/08/2015 às 17:17

1 Resposta 1

2

Basicamente isso é uma div parent em forma de quadrado que é rodada a 45 graus, e que depois é adicionada dentro desta uma nova div child, que irá conter a imagem como background-image que irá ser rodada a -45 graus para voltar novamente à rotação inicial de 0 graus, ou vice-versa.

Por outras palavras:

/* Aqui a div pai é rodada a 45 graus */
.quadrado {
    width: 200px;
    height: 200px;
    margin: 50px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    overflow: hidden;
}

/* E aqui (onde está a imagem como background) volta a ser rodada novamente para a sua posição inicial */
.minhaImagem {
    background: url(http://i.imgur.com/QDJ7Nae.jpg);
    width: 300px;
    height: 300px;
    margin: -50px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-size: cover;
    background-position: 50%;
}
<div class="quadrado">
    <div class="minhaImagem"></div>
</div>

No exemplo da imagem que adicionas-te juntamente com tua pergunta a imagem parece estar um pouco achatada, eu estive ali a brincar um pouco com código CSS e consegui criar o efeito do quadrado com essa rotação da maneira como já descrevi acima, porém não experimentei achatá-la, mas se desperdiçares ali um pouco de tempo de volta do código penso que conseguirás criar esse mesmo efeito. Podes também dar uma olhada neste artigo que poderá te ajudar a alcançar o pretendido.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .