Questo è per i miei colleghi Mac Nerd. Il nuovo sistema operativo desktop di Apple, OS X Mountain Lion, ha un sistema di notifica integrato simile a quello che abbiamo avuto su iOS per anni. Oggi costruiremo una finestra di notifica usando CSS.
Per rimuoverlo, useremo un codice HTML di base e un po 'di fantasia CSS3. Per finire, aggiungeremo un tocco di magia jQuery per consentire all'utente di trascinare la finestra. Sarà divertente, quindi avvia la tua app di codifica preferita e segui!
Cosa stiamo costruendo
Per essere sicuri di ottenere i dettagli corretti, ho impostato una notifica di prova e ho fatto una schermata sul mio Mac. Ecco come appare la finestra:
Come puoi vedere, abbiamo un rettangolo arrotondato di base con uno sfondo sfumato e una leggera trasparenza. Inizia con un'icona a sinistra, seguita da un titolo che indica il testo di avviso e un timestamp sotto. Infine, sul lato destro abbiamo due pulsanti: snooze e close.
Mi piace guardare cose come questa e pensare a come costruirle con i CSS. Può sembrare un esercizio inutile, ma è un ottimo modo per affinare le tue abilità di codifica. Non smettere mai di praticare! Iniziamo.
Passo 1. L'HTML
Per iniziare questo progetto, passiamo al markup. Il nostro obiettivo qui è guardare l'esempio sopra e vedere se possiamo scomporlo in elementi diversi. Mi piace iniziare con i miei contenitori di base e pensare a come gli oggetti sono raggruppati. Ovviamente, la finestra stessa avrà bisogno di un div, e possiamo rilasciare l'icona direttamente all'interno di essa.
Da qui però, ci sono due oggetti di testo che devono essere raggruppati e due pulsanti che devono essere raggruppati. Useremo un? Messaggio? div e? bottoni? div per questi.
Passaggio 5. Digita CSS
Ora controlliamo il nostro testo. Abbiamo due hook di stile che dobbiamo scegliere come target: uno per l'h2 e uno per il paragrafo. La parte difficile qui è che ti consigliamo di applicare un'ombreggiatura bianca. Questo sembra un po 'strano, ma gli darà un leggero aspetto smussato che farà apparire il testo all'interno.
Controllo avanzamento
Con quei rapidi cambiamenti, la nostra finestra di notifica sembra molto meglio! In effetti, abbiamo quasi finito. Abbiamo solo bisogno di codificare i pulsanti e rendere l'intera cosa trascinabile.
Passaggio 6. Pulsante CSS
Per far apparire i pulsanti come vogliamo, avremo bisogno di un po 'di stile. Scomporlo in pochi pezzi gestibili in modo che non sia travolgente.
Stili dei pulsanti di base
La prima cosa che dobbiamo fare è definire la forma e l'aspetto dei pulsanti. Divideremo questo codice come abbiamo fatto con il passaggio della finestra sopra, partendo dalle dimensioni e dalla forma base, passando poi al testo e finendo con il materiale CSS3.
Come puoi vedere, questo è molto simile a come abbiamo disegnato la finestra. Una differenza degna di nota è che impostiamo la posizione dei pulsanti su assoluta in modo da poterli individuare esattamente dove li vogliamo all'interno dei confini del genitore relativamente posizionato, che è la? Notifications? div.
Lo stile del testo è un po 'più robusto questa volta perché i link richiedono un po' di compensazione di stile di default extra per apparire decenti.
Pulsante al passaggio del mouse
Per aiutare i pulsanti risaltare al passaggio del mouse, modificheremo il gradiente eliminando la trasparenza. Facile e sottile!
Posizionamento dei pulsanti
Ora che i nostri pulsanti sono belli e belli, è ora di inserirli. Poiché utilizziamo il posizionamento assoluto, questo è in realtà molto semplice. Più interessante è il modo in cui stiamo mirando a ciascun pulsante: il selettore CSS nth-child. Questo ci consente di catturare pulsanti specifici senza aggiungere classi aggiuntive nel nostro codice HTML.
Questi selettori dovrebbero funzionare alla grande su tutta la linea, anche su IE9. Per IE8 e precedenti, seleziona Selectivizr.
Controllo avanzamento
La nostra finestra di notifica è stata completata! Sembra davvero fantastico se lo dico anch'io. Per renderlo ancora più bello, passa al passaggio successivo.
Passaggio 7. Rendilo trascinabile
Solo per divertimento, voglio farlo in modo che un utente possa cliccare e trascinare questa finestra sullo schermo proprio come con Windows nel tuo sistema operativo. Sembra complicato, vero? In realtà, con un po 'di magia jQuery, ci vuole solo un po' di JavaScript da tirare fuori.
Questo è tutto! Miriamo semplicemente alla nostra? Notifica? div e chiama la funzione trascinabile. Non potrebbe essere più semplice.
Guarda la demo
Abbiamo finito tutti con la finestra di notifica Mountain Lion.Guarda la demo live, incorporata di seguito tramite CodePen.
È interessante notare che la funzionalità di clic e trascinamento funziona solo sul sito CodePen, quindi vai qui per vedere la demo della pagina completa e assicurati di trascinare la finestra.
Aggiornare
Doh! Ho appena notato che mi sono scambiato il? Vicino? e? Snooze? pulsanti da come appaiono in Mountain Lion. Ho corretto il codice, quindi dovrebbe essere corretto ora.
Conclusione
Ecco qua, una finestra di notifica in stile Mountain Lion codificata esclusivamente con il vecchio e vecchio HTML e CSS (e un piccolo bit di jQuery opzionale). Quali altri elementi di interfaccia popolari ti piacerebbe vedere trasformati in tutorial? Lascia un commento qui sotto e facci sapere!