3

Estou tentando realizar a criação de uma galeria que acredito ser simples, porém está me dando muito trabalho e não estou conseguindo fazer. Gostaria de saber como posso fazê-la e se vocês tem alguma dica ou informação útil a respeito disso.

Modelo da galeria que será criada;

inserir a descrição da imagem aqui

4
  • 1
    Esses blocos seriam as imagens? Quer fazer igual em css?
    – LocalHost
    Commented 10/01/2017 às 11:35
  • Faltou o código do que já tentou. Edite a pergunta e inclua ele também. Commented 10/01/2017 às 11:35
  • @LocalHost, é isso mesmo :) Commented 10/01/2017 às 11:47
  • @Renan, ai é que tá, eu quero saber como farei isso, eu tentei de algumas formas simples usando position e tal, mas não consegui, então gostaria de aprender do zero mesmo :) Commented 10/01/2017 às 11:48

1 Resposta 1

4

Seria isso? Para aumentar o tamanho da galeria, é só aumentar o tamanho a <div id="galeria"> E relembrando que o seletor not exclui um elemento da seleção como, todos os blocos possuem o mesmo tamanho, menos um, então apliquei a todos a mesma regra, menos ao bloco maior, e por isso a utilização do :not(.img01) Espero ter ajudado

#galeria{
width:300px;
height:300px;
box-shadow:4px 4px 4px #ccc;
}
#galeria .img01{
 height:66.66%;
width:66.66%;  
  float:left;
  box-shadow:inset 4px 4px 4px #ccc;
}
#galeria div:not(.img01){
height:33.33%;
width:33.33%;  
box-shadow:inset 4px 4px 4px #ccc;
float:left;
}
<div id="galeria">
  <div class="img01"></div>
  <div class="img02"></div>
  <div class="img03"></div>
  <div class="img04"></div>
  <div class="img05"></div>
  <div class="img06"></div>
</div>

E aqui em baixo outro exemplo, com margem, e sombra para fora. Como você não deixou nenhum código. Vou deixar os dois exemplos:

#galeria{
width:300px;
height:300px;

}
#galeria .img01{
 height:65%;
width:65%;  
  float:left;
 box-shadow:0px 0px 20px #747474;
}
#galeria div:not(.img01){
height:32%;
width:32%;  
box-shadow:0px 0px 20px #747474;
float:left;
}
.img02,.img03{ margin-left:1%; margin-bottom:1%;}
.img05{margin:0 1%;}
<div id="galeria">
  <div class="img01"></div>
  <div class="img02"></div>
  <div class="img03"></div>
  <div class="img04"></div>
  <div class="img05"></div>
  <div class="img06"></div>
</div>

2

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 .