Creați un card Twitter pentru utilizatorii care utilizează HTML5 și CSS3

Profilul utilizatorului este una dintre cele mai importante părți ale unei aplicații, de acolo el poate accesa datele sale personale, opțiunile de configurare și toate funcționalitățile care sunt inerente profilului său.
Profilurile utilizatorilor respectă aproape întotdeauna un standard în aplicațiile web, dar uneori putem implementa ceva diferit și depinde și de modelul de afaceri al paginii noastre, de exemplu, dacă gestionăm un fel de comunitate de orice fel, nu ar strica să implementăm un card în stilul Stare de nervozitate pentru utilizatorii comunității noastre.
Construirea codului HTML
Pentru a ne face cardul de utilizator în stil Twitter pe care îl vom folosi HTML5 Da CSS3, deci vom avea doar două fișiere; .html și foaia noastră de stil. Includem foaia de stil și începem să creăm structura div divizată, care apoi cu câteva stiluri în CSS îi vom face să arate după cum ne dorim.

Dave Grohl @DaveGrohlTweeturi 3,500Ca urmare a 140Urmăritori 2,700

Odată ce avem acest lucru, nu trebuie decât să ne creăm foaia de stil.
Crearea CSS
Pentru el CSS vom folosi câteva proprietăți de gradient, umbre și proprietăți convenționale pentru literă și poziția elementelor:

 corp {fundal: # F0EFED; imagine de fundal: -webkit-gradient-liniar (sus, # E5E4E5, # C2C1C2); imagine de fundal: gradient liniar (în jos, # E5E4E5, # C2C1C2); font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {max-width: 350px; lățime: 100%; înălțime: 100%; poziție: relativă; margine: auto; }

În plus, trebuie să adăugăm stilurile cardului ca atare, să vedem câteva stiluri pentru acesta:

 .card-profile_visual: înainte, .card-profile_visual: după {display: block; conținut: ''; lățime: 100%; înălțime: 100%; poziție: absolută; index z: 0; fundal: url (profile.jpg.webp) centru / copertă centrală fără repetare; opacitate: 0,5; mix-blend-mode: lighten; } .card-profile_visual: înainte de {-webkit-filter: scala de gri (100%); filtru: în tonuri de gri (100%); } .card-profile_user-infos {position: absolute; indice z: 3; stânga: 0; dreapta: 0; margine: auto; partea de sus: calc (68% - 100px); culoare: #fff; text-align: centru; } .card-profile_user-infos a {width: 64px; înălțime: 64px; poziție: absolută; stânga: 0; dreapta: 0; margine: auto; culoare de fundal: # F96B4C; imagine de fundal: -webkit-linear-gradient (# F96B4C, # F23182); imagine de fundal: gradient liniar (# F96B4C, # F23182); display: bloc; clar: ambele; margine: auto; raza frontierei: 100%; sus: 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), inserare 0 0 15px rgba (255, 255, 255, 0,05); overflow: ascuns; }

Dacă observăm în clasă .card-profile_visual Aici adăugăm imaginea pentru profil, deci trebuie să adăugăm imaginea preferinței noastre pentru a adapta codul la nevoile noastre. Să vedem cum arată exemplul nostru când îl rulăm în browser.

În cele din urmă, la sfârșitul tutorialului, vor exista fișiere pentru ca toată lumea să le testeze și să le adapteze pe site-ul web la alegere, așa că nu ezitați să îl încercați și chiar să extindeți funcționalitatea acestuia din ceea ce se vede în acest tutorial.
card de profil twitter.zip 393.53K 251 DescărcăriV-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv