Recentemente mi sono imbattuto in un accurato tutorial su Woorkup che indicava una funzionalità di MooTools che consente di trasformare qualsiasi elemento di una pagina Web in un elemento posizionabile.
Oggi useremo questa tecnica per creare una nota appiccicosa semplice e divertente che un utente può giocare e spostare ovunque sulla pagina. Lungo la strada userò molti CSS3 quindi assicurati di avere un browser decente!
Sbirciata
Per vedere cosa stiamo costruendo, clicca l'immagine qui sotto e guarda la demo dal vivo.
Passaggio 1: HTML
Inizieremo costruendo la nostra nota adesiva proprio come faremmo su qualsiasi sito e finiremo rendendola mobile. L'HTML per questo tutorial è super semplice e contiene solo un paio di div ed elementi.
Ho mantenuto il testo segnaposto semplice in modo da poter vedere facilmente quanto sia semplice il codice, ma puoi digitare qualsiasi cosa ti piaccia!
Passaggio 2: crea lo sfondo
Per creare lo sfondo, ti consigliamo una bella trama di bacheca di sughero. Ho eseguito una rapida ricerca su Google e ho trovato questo.
Dovrai ritagliare una piccola sezione e convertirla in uno sfondo trasparente. Questo può essere facilmente realizzato in meno di due minuti seguendo il mio tutorial sulla creazione di sfondi senza interruzioni.
Passaggio 3: CSS di sfondo
Dopo aver creato l'immagine di sfondo in sughero senza cuciture creata, avvia il tuo CSS con un ripristino di base e rilascia il JPG.
Ho anche disegnato il contenitore qui solo un po 'impostando una larghezza di 960 pixel e un margine superiore di 100 pixel. Lo snippet automatico centra automaticamente il div.
Passaggio 4: stili permanenti di base
Quindi daremo ai nostri sticky alcuni stili davvero basilari.
Qui abbiamo praticamente impostato uno sfondo giallo e una larghezza. Questo sfondo servirà come impostazione predefinita per i browser che non interpretano il CSS3 che aggiungeremo in seguito.
A questo punto il tuo sticky dovrebbe appena iniziare a prendere forma e apparire come l'immagine qui sotto.
Passaggio 5: stili permanenti avanzati
Per fare in modo che la nostra nota appiccicosa appaia molto meglio, aggiungeremo una sfumatura, un'ombreggiatura e alcune imbottiture.
Si noti che abbiamo applicato i gradienti e le ombre utilizzando sia la sintassi Webkit che Mozilla in modo tale che funzioni su quanti più browser possibile. Per i gradienti, abbiamo specificato due colori e in sostanza ho detto al gradiente di diffondersi verticalmente sull'intero elemento. Si noti che l'ordine dei valori di colore deve essere invertito sulla versione di Mozilla per produrre lo stesso gradiente.
Per l'ombra, l'abbiamo applicata dopo il riempimento con i seguenti valori: offset orizzontale 0 px, offset verticale 10 px, sfocatura 30 px e nero per il colore.
Ora dovresti avere una nota adesiva decente con un'ombra e un gradiente!
Passaggio 6: utilizzo di Font-Face per un font scritto a mano
Voglio il? H1? il testo sembra un po 'più scritto a mano, ma non voglio usare un'immagine, quindi passerò a FontSquirrel e scaricherò uno dei loro eccellenti kit @ font-face. Con questi kit tutto il lavoro è fatto per te. Tutto quello che devi fare è scaricare i caratteri, copiarli nella tua directory principale e prendere lo snippet CSS fornito.
Ho scelto il kit GoodDog. GoodDog è un bel font spesso scritto a mano.
Come ho detto sopra, copia il font con il seguente CSS fornito da FontSquirrel con il tuo download:
Per ulteriori informazioni sulla sintassi qui, controlla la sintassi bulletproof @ font-face di Paul Irish. Tutto quello che dobbiamo sapere per ora è che la prima riga indica come fare riferimento al font altrove nel nostro CSS. Quindi ovunque vogliamo usare questo tipo di carattere, digiteremo "GoodDogRegular".
Passaggio 7: stili intestazione e paragrafo
Per concludere la nostra nota adesiva, aggiungi il seguente CSS:
Come puoi vedere, abbiamo applicato il font GoodDog ai tag h1 e p e abbiamo completato alcuni stili di posizionamento di base. Ora, dopo aver aggiornato la copia del segnaposto a qualcosa di più utile, ecco la nota adesiva finale:
Step 8: Make it? Moove?
Ora il nostro unico passo è aggiungere il JavaScript che rende l'elemento mobile. Prima importa una copia di MooTools 1.11 nella sezione dell'intestazione del tuo codice HTML. Il motivo per cui utilizziamo 1.11 è perché la sezione che stiamo utilizzando non è stata convertita in MooTools 2.
Dopo averlo importato, aggiungi il seguente codice JavaScript al tuo codice HTML per rendere la nostra nota adesiva mobile:
La seconda linea qui è quella importante.Indica a MooTools di rendere mobili tutti i div all'interno del contenitore. Puoi personalizzare questa sezione per fare tutto ciò che vuoi. Ad esempio, se volessi qualche? P? tag dentro un div con un id di? greatBigBox? per essere mobili, basta cambiare il codice per:
Ecco qua! Questo è letteralmente tutto ciò che devi sapere per iniziare a rendere mobili elementi sul tuo sito.
Conclusione
Come puoi vedere, la creazione della nota adesiva è stata la parte più difficile del processo. MooTools si è occupato del sollevamento di carichi pesanti per rendere l'elemento mobile e ha ridotto il nostro lavoro in JavaScript su poche righe!