×
Ir ao conteúdo
  • Cadastre-se

CSS card de escudo de time css


Ir à solução Resolvido por thefill,

Posts recomendados

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.

 

 

Sem título.png

Link para o comentário
Compartilhar em outros sites

  • Solução

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:

 

 

Sem título.png

 

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

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

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

Link para o comentário
Compartilhar em outros sites

  • Moderador

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

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

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;
}

 

responsive.png

sexta opcao.png

Link para o comentário
Compartilhar em outros sites

  • Moderador

@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/

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!