✅ Izradite Twitter karticu za korisnike koji koriste HTML5 i CSS3

Sadržaj

Korisnički profil jedan je od najvažnijih dijelova unutar aplikacije, odakle može pristupiti svojim osobnim podacima, opcijama konfiguracije i svim funkcionalnostima koje su svojstvene njegovu profilu.
Korisnički profili gotovo uvijek slijede standard u web aplikacijama, ali ponekad možemo implementirati nešto drugačije, a to također ovisi o poslovnom modelu naše stranice, na primjer ako upravljamo nekom vrstom zajednice bilo koje vrste, ne bi škodilo implementirati čestitka u stilu Cvrkut za korisnike naše zajednice.
Izgradnja HTML -a
Mi ćemo koristiti našu korisničku karticu u stilu Twitter-a HTML5 Y CSS3, pa ćemo imati samo dvije datoteke; naš .html i naša stilska tablica. Uključujemo našu tablicu stilova i počinjemo stvarati našu ugniježđenu div strukturu koja zatim s nekim stilovima u CSS učinit ćemo da izgledaju kako želimo.

Dave Grohl @DaveGrohlTweetovi 3,500Slijedeći 140Sljedbenici 2,700

Nakon što ovo dobijemo, moramo samo izraditi svoj stilski list.
Stvaranje CSS -a
Za njega CSS koristit ćemo neka svojstva gradijenta, sjene i konvencionalna svojstva za slovo i položaj elemenata:

 tijelo {pozadina: # F0EFED; background-image: -webkit-linear-gradient (top, # E5E4E5, # C2C1C2); background-image: linear-gradient (do dna, # E5E4E5, # C2C1C2); font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .kontejner {max-width: 350px; širina: 100%; visina: 100%; položaj: relativan; marža: auto; }

Osim ovoga, moramo dodati i stilove kartice kao takve, pogledajmo neke stilove za nju:

 .card-profile_visual: prije, .card-profile_visual: poslije {display: block; sadržaj: ''; širina: 100%; visina: 100%; položaj: apsolutni; z-indeks: 0; pozadina: url (profile.jpg.webp) središte / naslovnica bez ponavljanja; neprozirnost: 0,5; mix-blend-mode: posvijetliti; } .card-profile_visual: prije {-webkit-filter: nijanse sive (100%); filter: sive boje (100%); } .card-profile_user-infos {položaj: apsolutno; z-indeks: 3; lijevo: 0; desno: 0; marža: auto; gore: kalc (68% - 100px); boja: #fff; poravnavanje teksta: središte; } .card-profile_user-infos a {width: 64px; visina: 64px; položaj: apsolutni; lijevo: 0; desno: 0; marža: auto; boja pozadine: # F96B4C; background-image: -webkit-linear-gradient ( # F96B4C, # F23182); background-image: linear-gradient ( # F96B4C, # F23182); prikaz: blok; jasno: oboje; marža: auto; granica-radijus: 100%; gore: izračun (500% + 66 piksela); okvir-sjena: 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), umetnuto 0 0 15px rgba (255, 255, 255, 0.05); preljev: skriven; }

Ako primijetimo na nastavi .card-profile_visual Tu dodajemo sliku za profil, pa tu moramo dodati sliku koju želimo da prilagodimo kôd našim potrebama. Pogledajmo kako izgleda naš primjer kada ga pokrenemo u pregledniku.

Na kraju, na kraju vodiča bit će datoteke koje će svatko testirati i prilagoditi na web stranici po svom izboru, stoga ne oklijevajte isprobati pa čak i proširiti njegovu funkcionalnost u odnosu na ono što se vidi u ovom vodiču.

profilna kartica twitter.zip 393.53K 251 preuzimanjaJe li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod