Créer une carte Twitter pour les utilisateurs utilisant HTML5 et CSS3

Le profil de l'utilisateur est l'une des parties les plus importantes d'une application, à partir de là, il peut accéder à ses données personnelles, aux options de configuration et à toutes les fonctionnalités inhérentes à son profil.
Les profils d'utilisateurs suivent presque toujours un standard dans les applications Web, mais parfois nous pouvons implémenter quelque chose de différent et cela dépend aussi du modèle commercial de notre page, par exemple si nous gérons une sorte de communauté de quelque nature que ce soit, cela ne ferait pas de mal d'implémenter un carte dans le style de Twitter pour les utilisateurs de notre communauté.
Construire le HTML
Pour créer notre carte d'utilisateur de style Twitter, nous allons utiliser HTML5 Oui CSS3, nous n'aurons donc que deux fichiers; notre .html et notre feuille de style. Nous incluons notre feuille de style et commençons à créer notre structure div imbriquée qui, ensuite, avec certains styles dans le CSS nous les ferons ressembler comme nous le souhaitons.

Dave Grohl @DaveGrohlTweets 3,500Suivant 140Suiveurs 2,700

Une fois que nous avons cela, nous n'avons plus qu'à créer notre feuille de style.
Création du CSS
Pour lui CSS nous allons utiliser des propriétés de dégradé, des ombres et des propriétés conventionnelles pour la lettre et la position des éléments :

 corps {arrière-plan : # F0EFED; image d'arrière-plan : -webkit-linear-gradient (en haut, # E5E4E5, # C2C1C2); image de fond : dégradé linéaire (vers le bas, # E5E4E5, # C2C1C2); famille de polices : 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {max-width : 350px ; largeur : 100 % ; hauteur : 100 % ; position : relative ; marge : automatique ; }

En plus de cela, nous devons ajouter les styles pour la carte en tant que telle, voyons quelques styles pour celle-ci :

 .card-profile_visual : avant, .card-profile_visual : après {affichage : bloc; contenu: ''; largeur : 100 %; hauteur : 100 % ; position : absolue ; index z : 0 ; arrière-plan : url (profile.jpg.webp) centre sans répétition centre / couverture; opacité : 0,5; mix-blend-mode : éclaircir; } .card-profile_visual : avant {-webkit-filter : niveaux de gris (100%); filtre : niveaux de gris (100 %) ; } .card-profile_user-infos {position : absolue ; indice z : 3 ; à gauche : 0; à droite : 0; marge : automatique ; haut : calc (68% - 100px) ; couleur : #fff ; text-align : centre ; } .card-profile_user-infos a {width: 64px; hauteur : 64px ; position : absolue ; à gauche : 0; à droite : 0; marge : automatique ; couleur d'arrière-plan : # F96B4C; image d'arrière-plan : -webkit-linear-gradient (# F96B4C, # F23182); image de fond : dégradé linéaire (# F96B4C, # F23182); bloc de visualisation; clarifier les deux; marge : automatique; rayon de bordure : 100 % ; haut : 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), encart 0 0 15px rgba (255, 255, 255, 0,05) ; débordement caché; }

Si on remarque en classe .card-profile_visual C'est là que nous ajoutons l'image du profil, c'est donc là que nous devons ajouter l'image de notre préférence pour adapter le code à nos besoins. Voyons à quoi ressemble notre exemple lorsque nous l'exécutons dans le navigateur.

Enfin, à la fin du tutoriel, il y aura les fichiers que chacun pourra tester et adapter sur le site de son choix, alors n'hésitez pas à l'essayer et même à étendre ses fonctionnalités de ce qui est vu dans ce tutoriel.
carte de profil twitter.zip 393.53K 251 téléchargementsAvez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif