Sukurkite „Twitter“ kortelę vartotojams, naudojantiems HTML5 ir CSS3

Vartotojo profilis yra viena iš svarbiausių programos dalių, iš ten jis gali pasiekti savo asmeninius duomenis, konfigūracijos parinktis ir visas funkcijas, būdingas jo profiliui.
Vartotojų profiliai beveik visada atitinka žiniatinklio programų standartus, tačiau kartais galime įgyvendinti kažką kitokio, o tai taip pat priklauso nuo mūsų puslapio verslo modelio, pavyzdžiui, jei valdome bet kokios rūšies bendruomenę, nepakenktų įdiegti stiliaus kortelė „Twitter“ mūsų bendruomenės vartotojams.
HTML kūrimas
Norėdami sukurti „Twitter“ stiliaus vartotojo kortelę, mes ją naudosime HTML5 Y CSS3, todėl turėsime tik du failus; mūsų .html ir stilių lentelę. Mes įtraukiame savo stiliaus lapą ir pradedame kurti savo įdėtą div struktūrą, kuri vėliau su kai kuriais stiliais CSS priversime juos atrodyti taip, kaip norime.

Dave Grohl @DaveGrohl„Tweets“ 3,500Sekama 140Sekėjai 2,700

Kai tai turėsime, turime tik sukurti savo stiliaus lapą.
CSS kūrimas
Jam CSS raidėms ir elementų padėčiai naudosime kai kurias gradiento savybes, šešėlius ir įprastas savybes:

 body {background: # F0EFED; fono vaizdas: -webkit-linear-gradient (viršuje, # E5E4E5, # C2C1C2); fono vaizdas: linijinis gradientas (į apačią, # E5E4E5, # C2C1C2); šriftų šeima: „ProximaNova-Regular“, Helvetica neue, sans-serif; } .konteineris {max-width: 350px; plotis: 100%; aukštis: 100%; padėtis: giminaitis; paraštė: auto; }

Be to, turime pridėti kortelės stilių, pažiūrėkime į kai kuriuos jos stilius:

 .card-profile_visual: prieš, .card-profile_visual: po {display: block; turinys: ''; plotis: 100%; aukštis: 100%; pozicija: absoliuti; z-indeksas: 0; fonas: url (profile.jpg.webp) nekartojamas centro centras / viršelis; neskaidrumas: 0,5; mix-blend-mode: pašviesinti; } .card-profile_visual: prieš {-webkit-filter: pilkos spalvos (100%); filtras: pilkos spalvos (100%); } .card-profile_user-infos {pozicija: absoliutus; z-indeksas: 3; kairėje: 0; dešinėje: 0; paraštė: auto; viršuje: skaičiuoti (68% - 100 taškų); spalva: #fff; text-align: centre; } .card-profile_user-infos a {width: 64px; aukštis: 64 pikselių; pozicija: absoliuti; kairėje: 0; dešinėje: 0; paraštė: auto; fono spalva: # F96B4C; fono vaizdas: -webkit-linear-gradient ( # F96B4C, # F23182); fono vaizdas: linijinis gradientas ( # F96B4C, # F23182); ekranas: blokas; aišku: abu; paraštė: auto; ribos spindulys: 100%; viršuje: skaičiuoti (500% + 66 taškų); langelio šešėlis: 0 2 taškų 0 # D42D78, 0 3 taškų 10 taškų rgba (243, 49, 128, 0,15), 0 0 taškų 10 taškų rgba (243, 49, 128, 0,15), 0 0 taškų 4 taškų rgba (0, 0, 0, 0,35 ), 0 5px 20px rgba (243, 49, 128, 0,25), 0 15px 40px rgba (243, 49, 128, 0,75), intarpas 0 0 15px rgba (255, 255, 255, 0,05); perteklius paslėptas; }

Jei pamokoje pastebime .card-profile_visual Čia pridedame profilio vaizdą, todėl turime pridėti savo pasirinkimo vaizdą, kad pritaikytume kodą savo poreikiams. Pažiūrėkime, kaip atrodo mūsų pavyzdys, kai jį paleidžiame naršyklėje.

Galiausiai, pamokos pabaigoje bus failai, kuriuos kiekvienas galės išbandyti ir pritaikyti savo pasirinktoje svetainėje, todėl nedvejodami pabandykite ir netgi išplėskite jo funkcionalumą iš to, kas matoma šioje pamokoje.
profilio kortelė twitter.zip 393.53K 251 atsisiuntimaiAr jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką