Opret Twitter -kort til brugere, der bruger HTML5 og CSS3

Brugerens profil er en af ​​de vigtigste dele i en applikation, derfra kan han få adgang til sine personlige data, konfigurationsmuligheder og alle de funktioner, der er forbundet med hans profil.
Brugerprofiler følger næsten altid en standard i webapplikationer, men nogle gange kan vi implementere noget anderledes, og det afhænger også af vores sides forretningsmodel, for eksempel hvis vi administrerer en slags fællesskab af nogen art, ville det ikke skade at implementere en kort i stil med Twitter for brugere af vores samfund.
Bygger HTML
For at lave vores Twitter-brugerkort, vi kommer til at bruge HTML5 Y CSS3, så vi vil kun have to filer; vores .html og vores stylesheet. Vi inkluderer vores stylesheet og begynder at oprette vores indlejrede div -struktur, som derefter med nogle styles i CSS vi får dem til at se ud som vi ønsker.

Dave Grohl @DaveGrohlTweets 3,500Følge 140Følgere 2,700

Når vi har dette, skal vi kun oprette vores typografiark.
Oprettelse af CSS
For ham CSS vi vil bruge nogle gradientegenskaber, skygger og konventionelle egenskaber til bogstavet og elementernes placering:

 krop {baggrund: # F0EFED; baggrundsbillede: -webkit-lineær-gradient (top, # E5E4E5, # C2C1C2); baggrundsbillede: lineær-gradient (til bunden, # E5E4E5, # C2C1C2); font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {max-bredde: 350px; bredde: 100%; højde: 100%; position: relativ; margen: auto; }

Ud over dette skal vi tilføje stilarterne til kortet som sådan, lad os se på nogle stilarter til det:

 .card-profile_visual: før, .card-profile_visual: efter {display: block; indhold: ''; bredde: 100%; højde: 100%; position: absolut; z-indeks: 0; baggrund: url (profil.jpg.webp) center / omslag uden gentagelse; uigennemsigtighed: 0,5; mix-blend-mode: lysere; } .card-profile_visual: før {-webkit-filter: gråtoner (100%); filter: gråtoner (100%); } .card-profile_user-infos {position: absolut; z-indeks: 3; venstre: 0; højre: 0; margen: auto; top: beregning (68% - 100px); farve: #fff; tekstjustering: center; } .card-profile_user-infos a {bredde: 64px; højde: 64px; position: absolut; venstre: 0; højre: 0; margen: auto; baggrundsfarve: # F96B4C; baggrundsbillede: -webkit-lineær-gradient ( # F96B4C, # F23182); baggrundsbillede: lineær-gradient ( # F96B4C, # F23182); display: blok; klart: begge; margen: auto; grænse-radius: 100%; top: beregning (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), indsat 0 0 15px rgba (255, 255, 255, 0,05); overløb: skjult; }

Hvis vi bemærker det i klassen .card-profile_visual Det er her, vi tilføjer billedet til profilen, så det er her, vi skal tilføje billedet af vores præference for at tilpasse koden til vores behov. Lad os se, hvordan vores eksempel ser ud, når vi kører det i browseren.

Endelig vil der i slutningen af ​​selvstudiet være filerne, som alle kan teste og tilpasse på det websted, de vælger, så tøv ikke med at prøve det og endda udvide dets funktionalitet fra det, der ses i denne vejledning.
profilkort twitter.zip 393,53K 251 DownloadsKan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt