Creation of CSS Gallery

Asked

Viewed 243 times

3

I’m trying to create a gallery that I believe is simple, but it’s giving me a lot of work and I’m not able to do it. I would like to know how I can do it and if you have any tips or useful information about it.

Gallery template to be created;

inserir a descrição da imagem aqui

html css grid gallery
  • 1

    Would these blocks be the images? Want to do the same in css?

  • The code of the one you already tried was missing. Edit the question and include it as well.

  • @Localhost, that’s what it is :)

  • @Renan, that’s it, I want to know how I’ll do it, I tried it in a few simple ways using position and such, but I could not, so I would like to learn from scratch the same :)

1 answer

4


Would that be it? To increase the size of the gallery, just increase the size to <div id="galeria"> And remembering that the selector not excludes an element of the selection as, all blocks have the same size, except one, so I applied to all the same rule, except for the larger block, and therefore the use of the :not(.img01) I hope I’ve helped

#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>

And down here another example, with margin, and shadow out. As you left no code. I’ll leave the two examples:

#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>

  • o :not() may receive a 'Nth-Child' itself ?

  • 1

    @muriloGambôa se 'Nth-Child' é um seletor, classe etc... sim, Pode. Veja: http://www.w3schools.com/cssref/sel_not.asp

Browser other questions tagged html css grid gallery

You are not signed in. Login or sign up in order to post.