CSS card de escudo de time css

[brunovianarenega]

Tentei aqui fazer um sistema de card usando esse link: http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/w3css/w3css_cards.asp.html

Só que não consegui muito bem, a minha ideia é fazer um card para cada escudo (apenas a imagem vai ser inserida) de tamanho 250x250px, e se a imagem por acaso for maior que isso, ela se ajusta nessa dimensão e fica centralizada.

 

Outra dúvida, eu quero mostrar apenas 10 escudos na pagina, só que existe mais escudos de time, que jeito eu faço para cada vez que a pagina atualizar, os logos ficam mudando? Um total de 21 escudos.

 

 

[thefill]

Olá @brunovianarenega !

  Em 27/01/2022 às 12:55, brunovianarenega disse:

Tentei aqui fazer um sistema de card usando esse link: http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/w3css/w3css_cards.asp.html

Só que não consegui muito bem,

Expandir  

Nesse caso você poderia criar o seu próprio card usando CSS para isso.

 

  Em 27/01/2022 às 12:55, brunovianarenega disse:

a minha ideia é fazer um card para cada escudo (apenas a imagem vai ser inserida) de tamanho 250x250px,

Expandir  

Você pode usar o display grid para isso, nele você especifica o tamanho e a quantidade de colunas e linhas que vai precisar.

 

  Em 27/01/2022 às 12:55, brunovianarenega disse:

e se a imagem por acaso for maior que isso, ela se ajusta nessa dimensão e fica centralizada.

Expandir  

Aqui você pode usar a propriedade object-fit: cover. Dessa forma isso faz com que as dimensões do elemento substituído são alteradas, preenchendo todo o container e mantendo a sua razão de aspecto (aspect ratio).

 

  Em 27/01/2022 às 12:55, brunovianarenega disse:

Outra dúvida, eu quero mostrar apenas 10 escudos na pagina, só que existe mais escudos de time, que jeito eu faço para cada vez que a pagina atualizar, os logos ficam mudando? Um total de 21 escudos.

Expandir  

Sim, nesse caso você poderia fazer com que o seu back-end só retornasse apenas 10 itens de cada vez.

 

  Em 27/01/2022 às 12:55, brunovianarenega disse:

 

 

Expandir  

 

Eu consegui fazer um layout simples com essa ideia, veja esse link: Layout

Você pode ver o código do layout aqui: Código do layout

[brunovianarenega]

  Em 27/01/2022 às 15:08, thefill disse:

Olá @brunovianarenega !

Nesse caso você poderia criar o seu próprio card usando CSS para isso.

 

Você pode usar o display grid para isso, nele você especifica o tamanho e a quantidade de colunas e linhas que vai precisar.

 

Aqui você pode usar a propriedade object-fit: cover. Dessa forma isso faz com que as dimensões do elemento substituído são alteradas, preenchendo todo o container e mantendo a sua razão de aspecto (aspect ratio).

 

Sim, nesse caso você poderia fazer com que o seu back-end só retornasse apenas 10 itens de cada vez.

 

 

Eu consegui fazer um layout simples com essa ideia, veja esse link: Layout

Você pode ver o código do layout aqui: Código do layout

Expandir  

Só pra fechar a questão, como se reduz a imagem responsivamente? A imagem do card

[DiF]

@brunovianarenega Coloque na medida no CSS da imagem com a medida de "VW"

exemplo:

 

img{
  width: 50vw;
}

Veja funcionando: https://jsfiddle.net/dife/ved9rzmh/

 

Experimente redimensionar a barra do meio pro lados.. pra ver o escudo diminuir ou aumentar...  Com isso, você pode colocar essa regra em um media querie para ajustar de acordo com as resoluções de tela.

[brunovianarenega]

  Em 28/01/2022 às 09:19, DiF disse:

@brunovianarenega Coloque na medida no CSS da imagem com a medida de "VW"

exemplo:

 

img{
  width: 50vw;
}

Veja funcionando: https://jsfiddle.net/dife/ved9rzmh/

 

Experimente redimensionar a barra do meio pro lados.. pra ver o escudo diminuir ou aumentar...  Com isso, você pode colocar essa regra em um media querie para ajustar de acordo com as resoluções de tela.

Expandir  

 

Só uma ultima dúvida, da uma olhada no meu código, como eu faço para que quando eu colocar a sexta opção de card, ele quebra e vai pra baixo e não pro lado? Eu utilizei o vw no card, só que nessa situação a responsividade ficou ruim, ou eu que fiz errado kk

 

<section class="product2">
  <div class="product2-container">

<div class="card">
  <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar">
  <div class="container">
    <h4>+ de 1000 clientes</h4> 
    <p>em todo o Brasil.</p> 
  </div>
</div>

<div class="card">
  <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar">
  <div class="container">
    <h4>+ de 1000 clientes</h4> 
    <p>em todo o Brasil.</p> 
  </div>
</div>

<div class="card">
  <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar">
  <div class="container">
    <h4>+ de 1000 clientes</h4> 
    <p>em todo o Brasil.</p> 
  </div>
</div>

<div class="card">
  <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar">
  <div class="container">
    <h4>+ de 1000 clientes</h4> 
    <p>em todo o Brasil.</p> 
  </div>
</div>

<div class="card">
  <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar">
  <div class="container">
    <h4>+ de 1000 clientes</h4> 
    <p>em todo o Brasil.</p> 
  </div>
</div>


 </div>
</section>

 

 

css

 

 

.product2 {
  width: 100%;
  padding-top: 0px;
  margin: 0px 0px;
}

.product2-container {
  margin: 0px auto;
  display: flex;
  padding: 50px 50px;
  gap: 10rem;
  justify-content: center;
  flex: wrap;
  flex-direction: row;
}

.container {
  margin: 10px 10px;
}
.card {

  text-align: center;
  width: 10vw;
  height: 10vw;;

}

.card:hover {


}


.card img {
  width: 10vw;
  height: 10vw;;
  object-fit: cover;
  object-position: center;
}

.container h4 {
   background: -webkit-linear-gradient(-70deg, #be79b2 30%, #884593 50%, #3f2c52 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
  font-size: 2vw;
  text-align: center;
  letter-spacing: -2px;

}

.container p {
  color: #131313;
  font-size: 1vw;
  text-align: center;
  font-weight: normal;
  letter-spacing: -1px;
}

 

[DiF]

@brunovianarenega Tem duas formas de fazer isso..

 

1) Por CSS, usando o flex..  como você já está usando o flex ali.. fica mais fácil de implementar.. dá para usar o método de grid.  Mas claro, há outras formas de fazer no css também.

 

2) Por linguagem de programação php.  Onde lá você faz uma contagem com laço de for, e quebra a linha.

 

No css com o método de grid é mais ou menos assim:

 

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* aqui que a mágica acontece. troque o 3 pelo numero de itens por linha que quiser*/
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Example Only Styles */
.child {
  height: 100px;
  background: blue;
}

 

exemplo funcionando: https://jsfiddle.net/dife/okcafxr1/