Lag Twitter -kort for brukere som bruker HTML5 og CSS3

Brukerens profil er en av de viktigste delene i et program, derfra kan han få tilgang til sine personlige data, konfigurasjonsalternativer og alle funksjonene som er iboende for profilen hans.
Brukerprofiler følger nesten alltid en standard i webapplikasjoner, men noen ganger kan vi implementere noe annet, og det avhenger også av forretningsmodellen på siden vår, for eksempel hvis vi administrerer et slags fellesskap av noe slag, ville det ikke skade å implementere en kort i stil med Twitter for brukere av samfunnet vårt.
Bygg HTML
For å lage vårt brukerkort i Twitter-stil skal vi bruke HTML5 Y CSS3, så vi vil bare ha to filer; .html og stilark. Vi inkluderer vårt stilark og begynner å lage vår nestede div -struktur som deretter med noen stiler i CSS vi får dem til å se ut som vi ønsker.

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

Når vi har dette, trenger vi bare å lage stilarket vårt.
Opprette CSS
For han CSS vi skal bruke noen gradientegenskaper, skygger og konvensjonelle egenskaper for bokstaven og plasseringen av elementene:

 body {bakgrunn: # F0EFED; bakgrunnsbilde: -webkit-lineær-gradient (topp, # E5E4E5, # C2C1C2); bakgrunnsbilde: lineær-gradient (til bunn, # E5E4E5, # C2C1C2); font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {maks. bredde: 350px; bredde: 100%; høyde: 100%; posisjon: slektning; margin: auto; }

I tillegg til dette må vi legge til stilene for kortet som sådan, la oss se på noen stiler for det:

 .card-profile_visual: før, .card-profile_visual: etter {display: block; innhold: ''; bredde: 100%; høyde: 100%; posisjon: absolutt; z-indeks: 0; bakgrunn: url (profile.jpg.webp) senter / omslag uten gjentagelse; ugjennomsiktighet: 0,5; bland-bland-modus: lette; } .card-profile_visual: før {-webkit-filter: gråtoner (100%); filter: gråtoner (100%); } .card-profile_user-infos {posisjon: absolutt; z-indeks: 3; venstre: 0; høyre: 0; margin: auto; topp: kalk (68% - 100px); farge: #fff; tekstjustering: senter; } .card-profile_user-infos a {bredde: 64px; høyde: 64px; posisjon: absolutt; venstre: 0; høyre: 0; margin: auto; bakgrunnsfarge: # F96B4C; bakgrunnsbilde: -webkit-lineær-gradient ( # F96B4C, # F23182); bakgrunnsbilde: lineær-gradient ( # F96B4C, # F23182); display: blokk; klart: begge; margin: auto; kant-radius: 100%; topp: kalk (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), innfelt 0 0 15px rgba (255, 255, 255, 0,05); overløp: skjult; }

Hvis vi merker det i timen .card-profile_visual Det er her vi legger til bildet for profilen, så det er der vi må legge til bildet av vår preferanse for å tilpasse koden til våre behov. La oss se hvordan vårt eksempel ser ut når vi kjører det i nettleseren.

Til slutt, på slutten av opplæringen, vil det være filene for alle å teste og tilpasse på nettstedet du ønsker, så ikke nøl med å prøve det og til og med utvide funksjonaliteten fra det som er sett i denne opplæringen.
profilkort twitter.zip 393,53K 251 NedlastingerLikte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng