Twitter-Karte für Benutzer erstellen, die HTML5 und CSS3 verwenden

Das Profil des Benutzers ist einer der wichtigsten Teile innerhalb einer Anwendung, von wo aus er auf seine persönlichen Daten, Konfigurationsmöglichkeiten und alle Funktionalitäten zugreifen kann, die seinem Profil innewohnen.
Benutzerprofile folgen in Webanwendungen fast immer einem Standard, aber manchmal können wir etwas anderes implementieren und es hängt auch vom Geschäftsmodell unserer Seite ab, zum Beispiel wenn wir eine Art Community jeglicher Art verwalten, würde es nicht schaden, ein Karte im Stil von Twitter für Nutzer unserer Community.
HTML erstellen
Um unsere Benutzerkarte im Twitter-Stil zu erstellen, verwenden wir HTML5 Ja CSS3, also haben wir nur zwei Dateien; unsere .html und unser Stylesheet. Wir binden unser Stylesheet ein und beginnen mit der Erstellung unserer verschachtelten div-Struktur, die dann mit einigen Stilen im CSS wir werden sie so aussehen lassen, wie wir es wünschen.

Dave Grohl @DaveGrohlTweets 3,500Folge 140Anhänger 2,700

Sobald wir dies haben, müssen wir nur noch unser Stylesheet erstellen.
CSS erstellen
Für ihn CSS Wir werden einige Verlaufseigenschaften, Schatten und konventionelle Eigenschaften für den Buchstaben und die Position der Elemente verwenden:

 Körper {Hintergrund: # F0EFED; Hintergrundbild: -webkit-linear-gradient (oben, # E5E4E5, # C2C1C2); Hintergrundbild: Linear-Gradient (nach unten, # E5E4E5, # C2C1C2); Schriftfamilie: 'ProximaNova-Regular', Helvetica neue, serifenlos; } .container {max-Breite: 350px; Breite: 100 %; Höhe: 100%; Position: relativ; Rand: automatisch; }

Darüber hinaus müssen wir die Stile für die Karte als solche hinzufügen, sehen wir uns einige Stile dafür an:

 .card-profile_visual: vorher, .card-profile_visual: nach {display: block; Inhalt: ''; Breite: 100 %; Höhe: 100%; Position: absolut; z-Index: 0; Hintergrund: URL (profile.jpg.webp) No-Repeat Center Center / Cover; Opazität: 0,5; Mix-Blending-Modus: aufhellen; } .card-profile_visual: vor {-webkit-filter: Graustufen (100 %); Filter: Graustufen (100 %); } .card-profile_user-infos {Position: absolut; z-Index: 3; links: 0; rechts: 0; Rand: automatisch; oben: Berechnung (68% - 100px); Farbe: #fff; Textausrichtung: Mitte; } .card-profile_user-infos a {Breite: 64px; Höhe: 64px; Position: absolut; links: 0; rechts: 0; Rand: automatisch; Hintergrundfarbe: # F96B4C; Hintergrundbild: -webkit-linear-gradient (# F96B4C, # F23182); Hintergrundbild: Linear-Gradient (# F96B4C, # F23182); Bildschirmsperre; Lösche beide; Rand: automatisch; Randradius: 100%; oben: 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 RGB (243, 49, 128, 0,25), 0 15px 40px RGB (243, 49, 128, 0,75), Einschub 0 0 15px RGB (255, 255, 255, 0,05); Überlauf versteckt; }

Wenn wir es im Unterricht bemerken .card-profile_visual Hier fügen wir das Bild für das Profil hinzu, also müssen wir das Bild unserer Präferenz hinzufügen, um den Code an unsere Bedürfnisse anzupassen. Sehen wir uns an, wie unser Beispiel aussieht, wenn wir es im Browser ausführen.

Schließlich, am Ende des Tutorials, gibt es die Dateien, die jeder auf der Website seiner Wahl testen und anpassen kann. Zögern Sie also nicht, es auszuprobieren und sogar seine Funktionalität gegenüber dem, was in diesem Tutorial zu sehen ist, zu erweitern.
Profilkarte twitter.zip 393.53K 251 DownloadsHat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben