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 !

2 horas atrás, 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,

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

 

2 horas atrás, brunovianarenega disse:

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

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

 

2 horas atrás, brunovianarenega disse:

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

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).

 

2 horas atrás, 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.

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

 

2 horas atrás, brunovianarenega disse:

 

 

 

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]

10 horas atrás, 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

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 06: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.

 

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/