Vytvořte Twitter kartu pro uživatele používající HTML5 a CSS3

Profil uživatele je jednou z nejdůležitějších částí aplikace, odkud má přístup ke svým osobním údajům, možnostem konfigurace a všem funkcím, které jsou jeho profilu vlastní.
Uživatelské profily se ve webových aplikacích téměř vždy řídí standardem, ale někdy můžeme implementovat něco jiného a také to závisí na obchodním modelu naší stránky, například pokud spravujeme jakoukoli komunitu jakéhokoli druhu, nebylo by na škodu implementovat karta ve stylu Cvrlikání pro uživatele naší komunity.
Vytváření HTML
K vytvoření naší uživatelské karty ve stylu Twitteru použijeme HTML5 Y CSS3, takže budeme mít pouze dva soubory; náš .html a náš styl. Zahrneme naši šablonu stylů a začneme vytvářet naši vnořenou strukturu div, která pak s některými styly v CSS necháme je vypadat, jak si přejeme.

Dave Grohl @DaveGrohlTweety 3,500Následující 140Následovníci 2,700

Jakmile to máme, stačí vytvořit náš styl.
Vytvoření CSS
Pro něj CSS pro písmeno a polohu prvků použijeme některé přechodové vlastnosti, stíny a konvenční vlastnosti:

 body {background: # F0EFED; obrázek na pozadí: -webkit-lineární gradient (nahoře, # E5E4E5, # C2C1C2); obrázek na pozadí: lineární gradient (dolů, # E5E4E5, # C2C1C2); rodina písem: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {max-width: 350px; šířka: 100%; výška: 100%; poloha: relativní; okraj: auto; }

Kromě toho musíme přidat styly pro kartu jako takovou, podívejme se na některé styly:

 .card-profile_visual: před, .card-profile_visual: po {display: block; obsah: ''; šířka: 100%; výška: 100%; pozice: absolutní; z-index: 0; pozadí: url (profil.jpg.webp) střed / obálka středu bez opakování; krytí: 0,5; mix-blend-mode: zesvětlit; } .card-profile_visual: before {-webkit-filter: grayscale (100%); filtr: stupně šedi (100%); } .card-profile_user-infos {pozice: absolutní; z-index: 3; vlevo: 0; vpravo: 0; okraj: auto; top: calc (68% - 100px); barva: #fff; zarovnání textu: střed; } .card-profile_user-infos a {šířka: 64px; výška: 64px; pozice: absolutní; vlevo: 0; vpravo: 0; okraj: auto; barva pozadí: # F96B4C; obrázek na pozadí: -webkit-lineární gradient ( # F96B4C, # F23182); obrázek na pozadí: lineární gradient ( # F96B4C, # F23182); displej: blok; jasné: obojí; okraj: auto; poloměr ohraničení: 100%; top: 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), vložka 0 0 15px rgba (255, 255, 255, 0,05); přetečení: skryté; }

Pokud si toho všimneme ve třídě .card-profile_visual Je to místo, kde přidáme obrázek pro profil, takže tam musíme přidat obrázek naší preference, abychom kód přizpůsobili našim potřebám. Podívejme se, jak náš příklad vypadá, když jej spustíme v prohlížeči.

Nakonec na konci tutoriálu budou k dispozici soubory, které si každý bude moci vyzkoušet a přizpůsobit na webu podle svého výběru, takže neváhejte vyzkoušet a dokonce rozšířit jeho funkčnost z toho, co je v tomto tutoriálu vidět.
profilová karta twitter.zip 393,53K 251 staženíLíbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod