Crie um cartão do Twitter para usuários usando HTML5 e CSS3

O perfil do usuário é uma das partes mais importantes de uma aplicação, a partir daí ele pode acessar seus dados pessoais, opções de configuração e todas as funcionalidades inerentes ao seu perfil.
Perfis de usuário quase sempre seguem um padrão em aplicativos web, mas às vezes podemos implementar algo diferente e isso também depende do modelo de negócio de nossa página, por exemplo, se gerenciamos um tipo de comunidade de qualquer tipo, não faria mal implementar um cartão no estilo de Twitter para usuários de nossa comunidade.
Construindo o HTML
Para fazer nosso cartão de usuário estilo Twitter, vamos usar HTML5 Y CSS3, então teremos apenas dois arquivos; nosso .html e nossa folha de estilo. Incluímos nossa folha de estilo e começamos a criar nossa estrutura div aninhada que, em seguida, com alguns estilos no CSS faremos com que tenham a aparência que desejamos.

Dave Grohl @DaveGrohlTweets 3,500Seguindo 140Seguidores 2,700

Assim que tivermos isso, só precisamos criar nossa folha de estilo.
Criando o CSS
Para o CSS vamos usar algumas propriedades de gradiente, sombras e propriedades convencionais para a letra e a posição dos elementos:

 corpo {plano de fundo: # F0EFED; imagem de fundo: -webkit-linear-gradiente (parte superior, # E5E4E5, # C2C1C2); imagem de fundo: gradiente linear (para baixo, # E5E4E5, # C2C1C2); família da fonte: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {max-width: 350px; largura: 100%; altura: 100%; posição: relativa; margem: automático; }

Além disso, devemos adicionar os estilos para o cartão como tal, vamos dar uma olhada em alguns estilos para ele:

 .card-profile_visual: antes, .card-profile_visual: after {display: block; contente: ''; largura: 100%; altura: 100%; posição: absoluta; índice z: 0; plano de fundo: url (perfil.jpg.webp) centro / tampa central sem repetição; opacidade: 0,5; mix-blend-mode: clarear; } .card-profile_visual: antes de {-webkit-filter: grayscale (100%); filtro: escala de cinza (100%); } .card-profile_user-infos {posição: absoluto; índice z: 3; esquerda: 0; direita: 0; margem: automático; topo: calc (68% - 100px); cor: #fff; alinhamento de texto: centro; } .card-profile_user-infos a {width: 64px; altura: 64px; posição: absoluta; esquerda: 0; direita: 0; margem: automático; cor de fundo: # F96B4C; imagem de fundo: -webkit-linear-gradient (# F96B4C, # F23182); imagem de fundo: gradiente linear (# F96B4C, # F23182); display: bloco; limpar ambos; margem: automático; raio da borda: 100%; topo: calc (500% + 66px); box-shadow: 0 2px 0 # D42D78, 0 3px 10px rgba (243, 49, 128, 0,15), 0 0px 10px rgba (243, 49, 128, 0,15), 0 0px 4px rgba (0, 0, 0, 0,35 ), 0 5px 20px rgba (243, 49, 128, 0,25), 0 15px 40px rgba (243, 49, 128, 0,75), inserção 0 0 15px rgba (255, 255, 255, 0,05); estouro: oculto; }

Se notarmos na aula .card-profile_visual É onde adicionamos a imagem ao perfil, por isso é onde devemos adicionar a imagem da nossa preferência para adaptar o código às nossas necessidades. Vamos ver como fica nosso exemplo quando o executamos no navegador.

Por fim, ao final do tutorial, estarão os arquivos para que todos testem e adaptem no site de sua escolha, portanto, não hesite em experimentá-lo e até mesmo estender sua funcionalidade pelo que se vê neste tutorial.
cartão de perfil twitter.zip 393,53K 251 downloadsGostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo