Crea una scheda Twitter per gli utenti che utilizzano HTML5 e CSS3

Il profilo dell'utente è una delle parti più importanti all'interno di un'applicazione, da lì può accedere ai suoi dati personali, alle opzioni di configurazione ea tutte le funzionalità che sono inerenti al suo profilo.
I profili utente seguono quasi sempre uno standard nelle applicazioni web, ma a volte possiamo implementare qualcosa di diverso e dipende anche dal modello di business della nostra pagina, ad esempio se gestiamo un tipo di community di qualsiasi tipo, non sarebbe male implementare un carta nello stile di Twitter per gli utenti della nostra community.
Costruire l'HTML
Per creare la nostra scheda utente in stile Twitter utilizzeremo HTML5 sì CSS3, quindi avremo solo due file; il nostro .html e il nostro foglio di stile. Includiamo il nostro foglio di stile e iniziamo a creare la nostra struttura div annidata che poi con alcuni stili nel CSS li faremo apparire come desideriamo.

Dave Grohl @DaveGrohlTweet 3,500A seguire 140Seguaci 2,700

Una volta ottenuto questo, dobbiamo solo creare il nostro foglio di stile.
Creazione del CSS
Per lui CSS useremo alcune proprietà del gradiente, ombre e proprietà convenzionali per la lettera e la posizione degli elementi:

 corpo {sfondo: # F0EFED; background-image: -webkit-linear-gradient (in alto, # E5E4E5, # C2C1C2); background-image: linear-gradient (in basso, # E5E4E5, # C2C1C2); font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {larghezza massima: 350 px; larghezza: 100%; altezza: 100%; posizione: relativa; margine: automatico; }

Oltre a questo dobbiamo aggiungere gli stili per la carta in quanto tale, diamo un'occhiata ad alcuni stili per essa:

 .card-profile_visual: prima, .card-profile_visual: dopo {display: block; contenuto: ''; larghezza: 100%; altezza: 100%; posizione: assoluta; indice z: 0; sfondo: url (profile.jpg.webp) no-repeat center center/cover; opacità: 0,5; modalità mix-blend: schiarire; } .card-profile_visual: prima di {-webkit-filter: scala di grigi (100%); filtro: scala di grigi (100%); } .card-profile_user-infos {posizione: assoluta; indice z: 3; sinistra: 0; destra: 0; margine: automatico; in alto: calc (68% - 100px); colore: #fff; allineamento del testo: centro; } .card-profile_user-infos a {width: 64px; altezza: 64px; posizione: assoluta; sinistra: 0; destra: 0; margine: automatico; colore di sfondo: # F96B4C; background-image: -webkit-linear-gradient (# F96B4C, # F23182); immagine di sfondo: gradiente lineare (# F96B4C, # F23182); blocco di visualizzazione; chiaro: entrambi; margine: automatico; raggio di confine: 100%; in alto: 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), riquadro 0 0 15px rgba (255, 255, 255, 0,05); trabocco: nascosto; }

Se notiamo in classe .card-profile_visual È dove aggiungiamo l'immagine per il profilo, quindi è lì che dobbiamo aggiungere l'immagine della nostra preferenza per adattare il codice alle nostre esigenze. Vediamo come appare il nostro esempio quando lo eseguiamo nel browser.

Infine, alla fine del tutorial, ci saranno i file che tutti potranno testare e adattare sul sito Web di loro scelta, quindi non esitare a provarlo e persino ad estendere le sue funzionalità da quanto visto in questo tutorial.
scheda profilo twitter.zip 393.53K 251 downloadTi è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo