Skapa Twitter -kort för användare som använder HTML5 och CSS3

Användarens profil är en av de viktigaste delarna i en applikation, därifrån kan han komma åt sina personuppgif.webpter, konfigurationsalternativ och alla funktioner som är inneboende i hans profil.
Användarprofiler följer nästan alltid en standard i webbapplikationer, men ibland kan vi implementera något annat och det beror också på vår sidas affärsmodell, till exempel om vi hanterar ett slags community av något slag, skulle det inte skada att implementera en kort i stil med Twitter för användare av vår community.
Bygg HTML
För att göra vårt användarkort i Twitter-stil kommer vi att använda HTML5 Y CSS3, så vi kommer bara att ha två filer; vår .html och vårt formatmall. Vi inkluderar vårt formatmall och börjar skapa vår kapslade div -struktur som sedan med några stilar i CSS vi får dem att se ut som vi vill.

Dave Grohl @DaveGrohlTweets 3,500Följande 140Anhängare 2,700

När vi väl har det här behöver vi bara skapa vårt stilark.
Skapar CSS
För honom CSS vi kommer att använda några gradientegenskaper, skuggor och konventionella egenskaper för bokstaven och elementens position:

 kropp {bakgrund: # F0EFED; bakgrundsbild: -webkit-linjär-gradient (topp, # E5E4E5, # C2C1C2); bakgrundsbild: linjär-gradient (till botten, # E5E4E5, # C2C1C2); font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {max-bredd: 350px; bredd: 100%; höjd: 100%; position: relativ; marginal: auto; }

Utöver detta måste vi lägga till stilarna för kortet som sådant, låt oss titta på några stilar för det:

 .card-profile_visual: före, .card-profile_visual: efter {display: block; innehåll: ''; bredd: 100%; höjd: 100%; position: absolut; z-index: 0; bakgrund: url (profil.jpg.webp) center / omslag utan upprepning; opacitet: 0,5; mix-blend-mode: lätta; } .card-profile_visual: före {-webkit-filter: gråskala (100%); filter: gråskala (100%); } .card-profile_user-infos {position: absolut; z-index: 3; vänster: 0; höger: 0; marginal: auto; top: calc (68% - 100px); färg: #fff; text-align: center; } .card-profile_user-infos a {bredd: 64px; höjd: 64px; position: absolut; vänster: 0; höger: 0; marginal: auto; bakgrundsfärg: # F96B4C; bakgrundsbild: -webkit-linjär-gradient ( # F96B4C, # F23182); bakgrundsbild: linjär gradient ( # F96B4C, # F23182); display: block; klart: båda; marginal: auto; gränsradie: 100%; topp: 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), infälld 0 0 15px rgba (255, 255, 255, 0,05); överflöd: dold; }

Om vi ​​märker det i klassen .card-profile_visual Det är där vi lägger till bilden för profilen, så det är där vi måste lägga till bilden av våra preferenser för att anpassa koden till våra behov. Låt oss se hur vårt exempel ser ut när vi kör det i webbläsaren.

Slutligen, i slutet av handledningen, kommer det att finnas filer för alla att testa och anpassa på den webbplats de väljer, så tveka inte att prova det och till och med utöka dess funktionalitet från vad som ses i denna handledning.
profilkort twitter.zip 393,53K 251 NedladdningarGillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng