Maak een Twitter-kaart voor gebruikers die HTML5 en CSS3 gebruiken

Het gebruikersprofiel is een van de belangrijkste onderdelen binnen een applicatie, van daaruit heeft hij toegang tot zijn persoonlijke gegevens, configuratiemogelijkheden en alle functionaliteiten die inherent zijn aan zijn profiel.
Gebruikersprofielen volgen bijna altijd een standaard in webapplicaties, maar soms kunnen we iets anders implementeren en het hangt ook af van het bedrijfsmodel van onze pagina, als we bijvoorbeeld een soort community beheren, zou het geen kwaad om een kaart in de stijl van Twitter voor gebruikers van onze community.
De HTML bouwen
Om onze gebruikerskaart in Twitter-stijl te maken die we gaan gebruiken HTML5 Y CSS3, dus we hebben maar twee bestanden; onze .html en onze stylesheet. We nemen onze stylesheet op en beginnen met het maken van onze geneste div-structuur die vervolgens met enkele stijlen in de CSS we zullen ze eruit laten zien zoals we willen.

Dave Grohl @DaveGrohlTweets 3,500In aansluiting op 140Volgers 2,700

Zodra we dit hebben, hoeven we alleen ons stylesheet te maken.
De CSS maken
Voor hem CSS we gaan enkele verloopeigenschappen, schaduwen en conventionele eigenschappen gebruiken voor de letter en de positie van de elementen:

 lichaam {achtergrond: # F0EFED; achtergrondafbeelding: -webkit-lineair verloop (boven, # E5E4E5, # C2C1C2); achtergrondafbeelding: lineair verloop (naar beneden, # E5E4E5, # C2C1C2); font-familie: 'ProximaNova-Regular', Helvetica neue, schreefloos; } .container {max-breedte: 350px; breedte: 100%; hoogte: 100%; positie: relatief; marge: automatisch; }

Daarnaast moeten we de stijlen voor de kaart als zodanig toevoegen, laten we eens kijken naar enkele stijlen ervoor:

 .card-profile_visual: voor, .card-profile_visual: na {display: block; inhoud: ''; breedte: 100%; hoogte: 100%; positie: absoluut; z-index: 0; achtergrond: url (profile.jpg.webp) no-repeat center center / cover; dekking: 0,5; mix-blend-modus: lichter; } .card-profile_visual: voor {-webkit-filter: grijswaarden (100%); filter: grijswaarden (100%); } .card-profile_user-infos {positie: absoluut; z-index: 3; links: 0; rechts: 0; marge: automatisch; boven: calc (68% - 100px); kleur: #fff; tekst uitlijnen: midden; } .card-profile_user-infos a {breedte: 64px; hoogte: 64px; positie: absoluut; links: 0; rechts: 0; marge: automatisch; achtergrondkleur: # F96B4C; achtergrondafbeelding: -webkit-lineair verloop (# F96B4C, # F23182); achtergrondafbeelding: lineair verloop (# F96B4C, # F23182); weergave: blok; beiden opschonen; marge: automatisch; grensradius: 100%; boven: calc (500% + 66px); box-schaduw: 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), inzet 0 0 15px rgba (255, 255, 255, 0.05); overloop verborgen; }

Als we het merken in de klas .card-profile_visual Hier voegen we de afbeelding voor het profiel toe, dus daar moeten we de afbeelding van onze voorkeur toevoegen om de code aan onze behoeften aan te passen. Laten we eens kijken hoe ons voorbeeld eruitziet wanneer we het in de browser uitvoeren.

Ten slotte zullen er aan het einde van de tutorial de bestanden zijn die iedereen kan testen en aanpassen op de website van hun keuze, dus aarzel niet om het te proberen en zelfs de functionaliteit uit te breiden van wat in deze tutorial te zien is.
profielkaart twitter.zip 393.53K 251 downloadsVond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven