Izveidojiet Twitter karti lietotājiem, kuri izmanto HTML5 un CSS3

Lietotāja profils ir viena no vissvarīgākajām lietojumprogrammas daļām, no kurienes viņš var piekļūt saviem personas datiem, konfigurācijas iespējām un visām funkcijām, kas raksturīgas viņa profilam.
Lietotāju profili tīmekļa lietojumprogrammās gandrīz vienmēr atbilst standartam, taču dažreiz mēs varam ieviest kaut ko citu, un tas ir atkarīgs arī no mūsu lapas biznesa modeļa, piemēram, ja mēs pārvaldām jebkāda veida kopienu, tas nenāktu par ļaunu ieviest karte stilā Twitter mūsu kopienas lietotājiem.
HTML veidošana
Lai izveidotu mūsu Twitter stila lietotāja karti, mēs to izmantosim HTML5 Y CSS3, tāpēc mums būs tikai divi faili; mūsu .html un stilu lapu. Mēs iekļaujam savu stilu lapu un sākam veidot savu ligzdoto div struktūru, kas pēc tam ar dažiem stiliem CSS mēs liksim viņiem izskatīties tā, kā vēlamies.

Deivs Grols @DaveGrohlTvīti 3,500Sekojošs 140Sekotāji 2,700

Kad tas ir iegūts, mums tikai jāizveido sava stila lapa.
CSS izveide
Viņam CSS mēs izmantosim dažas gradienta īpašības, ēnas un parastās īpašības burtam un elementu atrašanās vietai:

 pamatteksts {fons: # F0EFED; fona attēls: -webkit-linear-gradient (top, # E5E4E5, # C2C1C2); fona attēls: lineārs gradients (uz leju, # E5E4E5, # C2C1C2); fontu saime: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .konteiners {max-width: 350px; platums: 100%; augstums: 100%; stāvoklis: radinieks; piemale: auto; }

Papildus tam mums jāpievieno kartes stili kā tādi, apskatīsim dažus tās stilus:

 .card-profile_visual: pirms, .card-profile_visual: pēc {display: block; saturs: ''; platums: 100%; augstums: 100%; pozīcija: absolūta; z-indekss: 0; fons: url (profile.jpg.webp) bez atkārtojuma centra centrs / vāks; necaurredzamība: 0,5; mix-blend-mode: atvieglot; } .card-profile_visual: pirms {-webkit-filter: pelēktoņi (100%); filtrs: pelēktoņu (100%); } .card-profile_user-infos {position: absolūts; z-indekss: 3; pa kreisi: 0; pa labi: 0; piemale: auto; augšpusē: aprēķins (68% - 100 pikseļi); krāsa: #fff; text-align: center; } .card-profile_user-infos a {width: 64px; augstums: 64 pikseļi; pozīcija: absolūta; pa kreisi: 0; pa labi: 0; piemale: auto; fona krāsa: # F96B4C; fona attēls: -webkit-linear-gradient ( # F96B4C, # F23182); fona attēls: lineārs gradients ( # F96B4C, # F23182); displejs: bloks; skaidrs: abi; piemale: auto; robežas rādiuss: 100%; augšā: aprēķins (500% + 66 pikseļi); 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), ieliktnis 0 0 15px rgba (255, 255, 255, 0,05); pārplūde: slēpta; }

Ja mēs pamanām klasē .card-profile_visual Šeit mēs pievienojam profila attēlu, tāpēc mums jāpievieno priekšstats par mūsu izvēli, lai pielāgotu kodu savām vajadzībām. Apskatīsim, kā izskatās mūsu piemērs, kad to palaižam pārlūkprogrammā.

Visbeidzot, apmācības beigās būs faili, kurus ikviens varēs pārbaudīt un pielāgot savā izvēlētajā vietnē, tāpēc nevilcinieties to izmēģināt un pat paplašiniet tā funkcionalitāti no šajā apmācībā redzamā.
profila karte twitter.zip 393.53K 251 lejupielādesVai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu