Criando componentes de cartão personalizados com HTML e CSS

Embora os componentes do cartão possam parecer simples, há critérios específicos a serem considerados ao criá-los. Você encontrará vários tipos de componentes de cartão para começar e, como desenvolvedor da Web, deve garantir que sua interface seja acessível.

Descubra como criar componentes de cartão usando HTML e CSS e aprenda sobre considerações de acessibilidade e personalização.

Estrutura HTML para componentes de cartão

A anatomia de um cartão inclui o recipiente do cartão, seu cabeçalho, imagem e corpo, e um rodapé de cartão opcional.

Você criará três componentes de cartão simples: cartões de conteúdo, produto e perfil. Estes são alguns dos tipos de cartão mais comuns encontrados na web.

Comece criando um contêiner div, aninhando mais três tags div com atributos de classe para cada cartão dentro dele, com elementos filho apropriados para cada um dos três cartões. Você deve usar elementos que representem todas as partes da anatomia do cartão. Por exemplo, o cartão de conteúdo tem uma tag de imagem para mídia, uma tag h3 para o título e uma tag p para texto.

<divaula="recipiente de cartão">
 Cartão de conteúdo 
<divaula="cartão de conteúdo">
<imgorigem=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alternativo="Um espaço de trabalho com um notebook com teclado, uma xícara de café e um fone de ouvido">
<h3>Títuloh3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. de Anúncios
 excepturi explicabo molestiae natus magnam rem...p>
<ahref="#">consulte Mais informaçãoa>
div>
 Cartão de produto 
<divaula="cartão de produto">
<imgorigem=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alternativo="Fones de ouvido em um fundo amarelo">
<h3>Nome do Produtoh3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<ahref="#"><botão>adicionar ao carrinhobotão>a>
div>
 Cartão de perfil 
<divaula="cartão de perfil">
<imgorigem=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alternativo="Um homem branco vestindo uma camisa preta de botão">
<h3>John Doeh3>
<p>Desenvolvedor Webp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?p>
<ahref="#"aula="link do perfil">Ver perfila>
div>
div>

Veja como isso deve aparecer em seu navegador, por padrão, antes de aplicar qualquer estilo personalizado:

Se quiser criar mais cartões ou incluir mais conteúdo em um único cartão, faça isso antes de continuar.

Estilo CSS para componentes de cartão

Usando CSS, você pode estilizar individualmente cada cartão para torná-los visualmente atraentes. Use o seletor universal reiniciar margens, enchimentos, e posicione usando dimensionamento de caixa. Em seguida, estilize o contêiner dando-lhe preenchimento para criar algum espaço.

​​​​​​* {
margem: 0;
preenchimento: 0;
dimensionamento de caixa: caixa de borda;
}
.contêiner de cartão {
preenchimento: 20px;
}

Em seguida, use um seletor múltiplo para todos os cartões, dê uma margem para fornecer espaço ao redor de cada cartão e defina o mostrar e direção flexível para layout. Além disso, defina uma borda para definir os cartões, raio de borda para algumas curvas e largura máxima para capacidade de resposta.

.cartão de conteúdo,
.cartão de produto,
.cartão de perfil {
margem: 20px;
mostrar: flex;
direção flexível: coluna;
fronteira: 2pxsólido#ccc;
raio da borda: 7px;
largura máxima: 250px;
}

Agora concentre-se em cada cartão, começando com o cartão de conteúdo, e dê a ele uma cor de fundo e preenchimento. Adicione seletores descendentes para os elementos no cartão de conteúdo.

Estilize a imagem com largura máxima e raio-fronteira. Defina a margem, a família da fonte e o tamanho da fonte para h3. Para a tag âncora, remova a decoração do texto e defina a cor, o topo da margem e o tamanho da fonte.

.cartão de conteúdo {
fundo: #E9724C;
preenchimento: 10px;
}
.cartão de conteúdoimg {
largura máxima: 100%;
raio da borda: 5px;
}
.cartão de conteúdoh3 {
margem: 10px 0;
família de fontes: monoespaço;
tamanho da fonte: 1.5rem;
}
.cartão de conteúdoa {
decoração de texto: nenhum;
cor: #6f2ed8;
margem:12px 0 7px 0;
tamanho da fonte: 1rem;
}

O cartão do produto exigirá mais estilo por causa de seus elementos extras. Crie seletores para cada elemento filho e estilize-os de acordo.

O botão O elemento contém a maioria dos atributos de estilo para obter o efeito de call-to-action. Alinhe apenas o botão à direita, definindo o auto-alinhamento para extremidade flexível no seletor de âncora.

.cartão de produtoimg {
raio da borda: 5px 5px 0 0;
largura: 100%;
}
.cartão de produtoh3 {
margem: 5px 10px;
família de fontes: monoespaço;
tamanho da fonte: 1.5rem;
}
.cartão de produtop {
margem: 5px 10px;
família de fontes: Geórgia, 'HoráriosNovoromano', Horários, serifa;
}
.cartão de produtoa {
alinhar-se: extremidade flexível;
}
.cartão de produtobotão {
largura: 100px;
altura: 30px;
margem: 10px;
fronteira: 1pxsólido#8f3642;
raio da borda: 4px;
cor de fundo: #FFC857;
espessura da fonte: 700;
cursor: ponteiro;
}

Por fim, estilize o cartão de perfil. Defina o raio da borda no canto superior direito e no canto superior esquerdo da imagem para corresponder ao contêiner. Ajuste o tamanho da imagem e ajuste se necessário. Use pelo menos dois tipos de fonte e cores complementares nos textos para definição. Além disso, você pode criar o elemento acionável, ou seja, a tag âncora - destaque-se com um fronteira.

.cartão de perfilimg {
raio da borda: 5px 5px 0 0;
altura: 200px;
ajuste de objeto: cobrir;
}
.cartão de perfilh3 {
margem: 10px;
família de fontes: monoespaço;
tamanho da fonte: 1.5rem;
}
.cartão de perfilp: primeiro do tipo {
margem:0px 10px;
família de fontes: 'HoráriosNovoromano', Horários, serifa;
cor: centáurea azul;
}
.cartão de perfilp: último do tipo {
margem: 5px 10px;
tamanho da fonte: 0.9rem;
}
.cartão de perfila {
decoração de texto: nenhum;
margem: 5px 10px 10px 10px;
preenchimento: 5px 15px;
alinhar-se: Centro;
fronteira: 1pxsólidocentáurea azul;
raio da borda: 15px;
cor: preto;
família de fontes: monoespaço;
espessura da fonte: 500;
}

Após o estilo, seus cartões devem ficar assim:

Layout e flexibilidade do cartão

A capacidade de resposta é vital para fornecer uma experiência perfeita com a interface entre os dispositivos. Você pode use CSS Flexbox ou CSS Grid para a disposição. Finalmente, você pode use consultas de mídia para capacidade de resposta.

Usando CSS Flexbox

Primeiramente, adicione um atributo de exibição e defina-o como flexível no seletor de contêiner de cartão. Aplique o flex-wrap e configure-o para quebrar, para que os cartões possam quebrar em um tamanho de tela pequeno.

Além disso, defina o itens de alinhamento e justificar-conteúdo propriedades ao seu desejo.

​​​​​​.contêiner de cartão {
preenchimento: 20px;
mostrar: flex;
envoltório flexível: enrolar;
itens de alinhamento: Centro;
justificar-conteúdo: espaço uniformemente;
}

A página deve ficar assim:

Isso conclui a capacidade de resposta em tamanhos de tela maiores. Para uma janela de visualização menor, como um telefone celular, você pode usar uma regra de consulta de mídia e definir a largura máxima.

Dentro da consulta de mídia, determine quais elementos você deseja alterar. Nesse caso, o recipiente do cartão será alterado.

Colocou o direção flexível para coluna, de modo que as cartas se empilhem verticalmente. Para exibir os cartões no centro da tela, horizontalmente, defina as propriedades de justificar conteúdo e alinhar itens para o centro:

@meios de comunicação tela e (largura máxima:480px) {
.contêiner de cartão {
direção flexível: coluna;
justificar-conteúdo: Centro;
itens de alinhamento: Centro;
 }
}

Para ver o efeito da consulta de mídia, verifique o código em CodePen.

Usando Grade CSS

Primeiro, defina a exibição do recipiente do cartão como grade. Usar grade-modelo-colunas para permitir que os cartões ajustem sua largura automaticamente. Use um lacuna na grade para espaçamento entre os cartões. Usar justificar-itens centralizar as cartas.

.contêiner de cartão {
preenchimento: 20px;
mostrar: grade;
grade-modelo-colunas: repita(ajuste automático, mínimo máximo(300px, 1fr));
lacuna na grade: 20px;
justificar-itens: Centro;
}

A página deve ficar assim:

Para telas móveis, aplique uma consulta de mídia. Dentro da consulta, modifique o layout da grade para viewports menores. Definir grade-modelo-colunas para 1 fr para fazer com que cada cartão ocupe toda a largura. Além disso, definindo justificar-itens e itens de alinhamento properties to center centralizará os cartões horizontal e verticalmente.

@meios de comunicação tela e (largura máxima:480px) {
.contêiner de cartão {
grade-modelo-colunas: 1fr;
justificar-itens: Centro;
itens de alinhamento: Centro;
 }
}

Por combinando CSS Grid e media queries, os cartões serão agrupados em telas maiores e empilhados verticalmente em telas menores, obtendo um layout de cartão responsivo. Para ver o efeito da consulta de mídia, verifique o código em CodePen.

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

É crucial garantir que os componentes do cartão que você cria sejam acessíveis a todos os usuários, incluindo aqueles com deficiências. Aqui estão algumas considerações importantes para tornar os componentes do cartão mais acessíveis:

• HTML semântico
• Navegação pelo teclado
• estilos de foco
• Rótulos e funções ARIA
• texto alternativo
• Estrutura de título adequada
• Contraste de cor

Ao implementar essas considerações de acessibilidade, os desenvolvedores da Web podem garantir que os componentes do cartão sejam inclusivos.

Customização e Exploração Adicional

Você pode ir mais longe com a personalização do componente do cartão. Aqui estão algumas ideias que você pode analisar:

• Transições e animações
• Estilos de imagem
• Plano de fundo e esquemas de cores
• estilos de borda
• Elementos interativos

Existem várias maneiras diferentes de personalizar os componentes do cartão, portanto, sinta-se à vontade para experimentar.

Crie componentes de cartão visualmente atraentes e responsivos

Os componentes do cartão podem desempenhar um papel em quase todos os sites. Elaborar um com HTML e CSS é fácil, mas saber como lidar com a acessibilidade também é importante.

Existem outros efeitos CSS que você pode experimentar, como filtros CSS e modo de mesclagem para efeitos visuais. Pratique a criação de mais com personalização diferente para apelo visual.