Criar componentes de cartão personalizados com HTML e CSS

A criação de componentes de cartões envolve vários factores que requerem uma análise cuidadosa. Existem diversas variedades de componentes de cartões por onde escolher e é imperativo que os programadores Web garantam a acessibilidade nas suas interfaces de utilizador.

Explore técnicas de construção de elementos de cartão com HTML e CSS, ao mesmo tempo que adquire conhecimentos sobre as melhores práticas de acessibilidade e opções de personalização.

Estrutura HTML para componentes de cartões

A composição de um cartão inclui o invólucro do cartão, o seu título, representação e corpo, e uma nota de rodapé opcional do cartão.

Devem ser fabricados três elementos rudimentares constituintes do cartão, nomeadamente, cartões de conteúdo, de produto e de perfil. Estes constituem algumas das variedades de cartões mais comuns encontradas no ciberespaço.

Considere a utilização de marcação HTML para criar um elemento contentor com um atributo de classe, envolvendo três divs aninhadas adicionais, cada uma com nomes de classe distintos. Dentro destas divs, inclua elementos filhos apropriados, como as etiquetas image, h3 e p, para representar os vários componentes do cartão, assegurando que todos os aspectos são abrangidos.

 <div class="card-container">
    <!-- Content Card -->
    <div class="content-card">
        <img src="https://images.unsplash.com/photo-1500989145603-8e7ef71d639e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A workspace with a keyboard notebook, cup of coffee and an earpiece">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
       excepturi explicabo molestiae natus magnam rem...</p>
        <a href="#">Read More</a>
    </div>

    <!-- Product Card -->
    <div class="product-card">
        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Headphones on a yellow background">
        <h3>Product Name</h3>
        <p>$19.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Aspernatur, voluptatibus.</p>
        <a href="#"><button>Add to Cart</button></a>
    </div>

    <!-- Profile Card -->
    <div class="profile-card">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A white male wearing a black button up shirt">
        <h3>John Doe</h3>
        <p>Web Developer</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Expedita tempora eos molestias repellat?</p>
        <a href="#" class="profile-link">View Profile</a>
    </div>
</div>
 

A renderização predefinida de uma página Web num browser é apresentada abaixo para referência antes da aplicação de estilos personalizados:

Estilo CSS para componentes de cartões

Utilizando folhas de estilo em cascata (CSS), é possível aplicar estilos visuais distintos a cada cartão para melhorar o seu aspeto. Para tal, utilize o seletor universalmente aplicável juntamente com as propriedades de margem, preenchimento e posição para repor os respectivos valores. Posteriormente, utilize o dimensionamento de caixa para ajustar o espaçamento entre elementos dentro do contentor e forneça preenchimento ao próprio contentor para obter espaço adicional.

 ​​​​​​* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
    padding: 20px;
} 

Para os cartões, implemente um componente de seleção múltipla com uma margem para criar espaço à volta de cada cartão e aplique uma direção de visualização e flexão para regular a disposição. Além disso, especifique os limites e os cantos arredondados definindo um limite e utilizando o raio do limite, estabelecendo também uma largura máxima para efeitos de design responsivo.

 .content-card,
.product-card,
.profile-card {
    margin: 20px;
    display: flex;
    flex-direction: column;
    border: 2px solid #ccc;
    border-radius: 7px;
    max-width: 250px;
} 

Considerando o Content Card, atribua-lhe uma cor de fundo e um padding, utilizando selectores descendentes para os elementos constituintes, o que pode ser feito da seguinte forma:

 .content-card {
    background: #E9724C;
    padding: 10px;
}

.content-card img {
    max-width: 100%;
    border-radius: 5px;
}

.content-card h3 {
    margin: 10px 0;
    font-family: monospace;
    font-size: 1.5rem;
}

.content-card a {
    text-decoration: none;
    color: #6f2ed8;
    margin:12px 0 7px 0;
    font-size: 1rem;
} 

O design do cartão de produto necessita de uma aparência refinada devido às suas funcionalidades adicionais, pelo que é necessário criar selectores para cada elemento filho individual e aplicar estilos adequados a cada um deles.

O elemento

possui um número considerável de atributos estilísticos que contribuem para a criação de um impacto eficaz de chamada para ação. Para alinhá-lo apenas à direita, aplique a propriedade ‘align-self’ com o valor ‘flex-end’ no seletor de âncora.

 .product-card img {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.product-card h3 {
    margin: 5px 10px;
    font-family: monospace;
    font-size: 1.5rem;
}

.product-card p {
    margin: 5px 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.product-card a {
    align-self: flex-end;
}

.product-card button {
    width: 100px;
    height: 30px;
    margin: 10px;
    border: 1px solid #8f3642;
    border-radius: 4px;
    background-color: #FFC857;
    font-weight: 700;
    cursor: pointer;
} 

Por fim, refine o cartão de perfil incorporando uma mistura harmoniosa de tipografia e esquemas de cores. Modifique os limites da imagem para os alinhar com os cantos superior direito e superior esquerdo do contentor. Certifique-se de que a imagem é dimensionada e posicionada corretamente na área designada. Utilize, pelo menos, dois tipos de letra distintos e tons contrastantes para aumentar a clareza do texto e criar interesse visual. Além disso, considere adicionar um contorno discernível à hiperligação clicável, como um

 .profile-card img {
    border-radius: 5px 5px 0 0;
    height: 200px;
    object-fit: cover;
}

.profile-card h3 {
    margin: 10px;
    font-family: monospace;
    font-size: 1.5rem;
}

.profile-card p:first-of-type {
    margin:0px 10px;
    font-family: 'Times New Roman', Times, serif;
    color: cornflowerblue;
}

.profile-card p:last-of-type {
    margin: 5px 10px;
    font-size: 0.9rem;
}

.profile-card a {
    text-decoration: none;
    margin: 5px 10px 10px 10px;
    padding: 5px 15px;
    align-self: center;
    border: 1px solid cornflowerblue;
    border-radius: 15px;
    color: black;
    font-family: monospace;
    font-weight: 500;
} 

Após o processo de estilização, o aspeto dos cartões deve assemelhar-se ao seguinte formato:

Layout do cartão e flexibilidade

A capacidade de resposta é de extrema importância para garantir uma experiência de utilizador suave e unificada em todos os dispositivos. A utilização de CSS Flexbox ou CSS Grid pode facilitar um layout adaptável. Além disso, a incorporação de media queries permite uma capacidade de resposta óptima.

Utilizar CSS Flexbox

Especifique o contexto do excerto de código fornecido. É para desenvolvimento Web ou outra coisa qualquer? Que linguagem de programação está a ser utilizada?

Especifique as definições de alinhamento e justificação dos itens em questão.

 ​​​​​​.card-container {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
} 

A página deve ter o seguinte aspeto:

A discussão acima mencionada diz respeito ao comportamento responsivo em ecrãs de maiores dimensões. Para atender a ecrãs mais pequenos, como os dos telemóveis, pode utilizar-se uma regra de consulta multimédia e especificar uma largura máxima para a janela de visualização.

Dentro dos limites da consulta multimédia, é imperativo identificar os componentes específicos que se pretende modificar. Neste caso específico, o contentor do cartão de visita deve ser alterado.

 @media screen and (max-width: 480px) {
  .card-container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
} 

Para ver o efeito da consulta multimédia, consulte o código em CodePen .

Utilizar a grelha CSS

Defina a apresentação do contentor de cartões como uma grelha utilizando a propriedade grid-template-columns . Permita que os cartões ajustem a sua largura automaticamente utilizando grid-gap . Centrar os cartões utilizando justify-items .

 .card-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    justify-items: center;
} 

A página deve ter o seguinte aspeto:

Utilize uma media query para ecrãs móveis, aplicando-a ao layout da grelha quando a janela de visualização é mais pequena. Modifique a propriedade grid-template-columns para 1fr para que cada cartão ocupe toda a largura. Além disso, defina as propriedades justify-items e align-items como center para posicionar corretamente os cartões na horizontal e na vertical.

 @media screen and (max-width: 480px) {
  .card-container {
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
  }
} 

Ao combinar

CSS Grid e media queries

, os cartões serão envolvidos em ecrãs maiores e empilhados verticalmente em ecrãs mais pequenos, obtendo uma disposição de cartões responsiva. Para ver o efeito da consulta multimédia, consulte o código no CodePen .

Considerações de acessibilidade para componentes de cartões

O aspeto essencial da criação de componentes de cartões é garantir a sua acessibilidade a todos os utilizadores, especialmente os portadores de deficiência. Para melhorar a acessibilidade dos componentes do cartão, devem ser tidos em conta determinados factores críticos.

⭐ HTML semântico

⭐ Navegação por teclado

⭐ Estilos de focagem

⭐ Etiquetas e funções ARIA

⭐ Texto alternativo

⭐ Estrutura correcta do cabeçalho

⭐ Contraste de cores

Através da adesão a estas directrizes de acessibilidade, os criadores da Web podem tornar os elementos dos seus cartões inclusivos e acessíveis a todos os utilizadores.

Personalização e exploração adicional

As suas opções para personalizar o seu cartão virtual são vastas e variadas.Algumas sugestões incluem:* Alterar o seu aspeto, modificando a cor, a forma ou a textura;* Adicionar interatividade, como ligações a outras páginas, vídeos ou sítios Web externos;* Incluir elementos dinâmicos, como imagens que mudam com base nas acções do utilizador ou em dados de uma base de dados;* Criar animações ou transições entre diferentes vistas do cartão;* Utilizar técnicas de design responsivo para que o cartão se adapte a diferentes tamanhos e orientações de ecrã;* Integrá-lo com outros componentes da sua aplicação utilizando APIs ou ganchos;* Incluir funcionalidades de acessibilidade para o tornar utilizável por pessoas com deficiência;* Implementar optimizações de desempenho para garantir uma renderização e interacções suaves;* Testar a sua implementação

⭐ Transições e animações

⭐ Estilos de imagem

⭐ Esquemas de fundo e de cor

⭐ Estilos de margem

⭐ Elementos interactivos

Pode experimentar livremente vários métodos para personalizar os seus componentes de cartão, uma vez que existe uma grande variedade de opções disponíveis.

Crie componentes de cartão visualmente atraentes e responsivos

A utilização de componentes de cartão é onipresente em sites, e sua criação através do uso de HTML e CSS é relativamente simples. No entanto, é igualmente crucial estar ciente e abordar questões relacionadas à acessibilidade ao construir esses cartões.

Outras técnicas de CSS que pode experimentar incluem a utilização de filtros e modos de mistura para obter vários efeitos estéticos. Recomenda-se que continue a desenvolver as suas competências explorando diversas personalizações de modo a melhorar o aspeto geral do seu Web site.