Qui a Design Shack ci piace presentare una gamma completa di esercitazioni, da progetti PHP esperti a suggerimenti CSS molto semplici. Il tutorial di oggi è rivolto a coloro che sono ancora nelle fasi iniziali del CSS.
Una delle domande più frequenti che ricevo dai principianti di CSS è: "Come posso creare un pulsante ?? È una domanda semplice con una risposta complicata. Ci sono diversi modi per farlo e sfortunatamente ci sono anche diversi modi per sbagliare. Quando ho iniziato per la prima volta in CSS, capire che la sintassi dei pulsanti era uno dei problemi più persistenti che ho dovuto affrontare, mi sembrava di averlo sempre sbagliato. Oggi passeremo attraverso un processo molto semplice e flessibile che puoi applicare a qualsiasi pulsante che crei. Più importante del risultato finale è la spiegazione approfondita in ogni punto che spiega perché lo facciamo in quel modo.
Passaggio 1: HTML
Che ci crediate o no, questa è una delle parti più difficili. Per un programmatore esperto, sembra così semplice. Per un principiante però, sapere da dove iniziare con un pulsante può essere abbastanza difficile. Dovresti usare il tasto? Tag HTML? O forse un tag di paragrafo? Quali parti dovrebbero avvolgere il collegamento?
Si scopre che la sintassi più semplice e più utilizzata è solo quella di implementare un semplice vecchio tag di ancoraggio (i pulsanti del modulo spesso usano? Input?). Dal punto di vista funzionale, tutto ciò che stiamo cercando di creare è un collegamento che, quando viene cliccato, ci porta da qualche parte nuovo, che è esattamente ciò che fa un link HTML di base. Spesso nel web design, la scelta di trasformare qualcosa in un pulsante è puramente estetica e non indica necessariamente alcuna funzionalità speciale.
Ecco uno snippet di HTML ampiamente utilizzato che consente di svolgere il lavoro alla perfezione rimanendo bello e conciso:
Se non hai bisogno di div, non usarne uno
Un problema che ho incontrato quando ho iniziato a scrivere il codice è che spesso pensavo di aver bisogno di un div per creare qualcosa. Usando questa logica imperfetta, vorrei avvolgere il mio ancoraggio in un div e quindi applicare la maggior parte dello stile al div.
Questo però è completamente inutile e può creare problemi sia con il clic che con il passaggio del mouse. Nell'esempio sopra, il nostro intero elemento sarà il collegamento. Se lo abbiamo avvolto in un div e lo abbiamo disegnato, solo la parte di testo del pulsante sarebbe un collegamento, il che significa che l'utente potrebbe in teoria cliccare il pulsante senza risultati.
Perché usare una classe?
Forse la cosa più importante da notare su questo snippet di codice è che abbiamo aggiunto una classe, che ho genericamente etichettato come pulsante? Ci sono un paio di ragioni per questo.
Prima di tutto, abbiamo bisogno di un modo per indirizzare e applicare questo pulsante nel nostro CSS senza necessariamente scegliere come target tutti i tag di ancoraggio nella pagina. Non è quasi mai il caso che desideri che ogni singolo link sia un pulsante identico. Tuttavia, è fattibile e abbastanza probabile che in futuro vorrete riutilizzare lo stile dei pulsanti. Per questo motivo applichiamo una classe invece di un ID. In questo modo, ogni volta che vogliamo convertire un link in testo semplice in un pulsante piacevole, applichiamo semplicemente il nostro pulsante? classe e abbiamo finito!
Passaggio 1 Anteprima
A questo punto si dovrebbe avere solo un collegamento di testo normale con lo stile predefinito.
Passaggio 2: stili di pulsanti di base
Ora che abbiamo tutto il nostro codice HTML pronto, è ora di passare al CSS. Ricorda che abbiamo impostato un pulsante? classe per l'esplicito scopo del targeting CSS, quindi assicurati di utilizzarlo per questo passaggio:
La prima cosa che vogliamo fare nel nostro CSS è definire la casella base che comporterà la nostra forma di pulsante. Ecco gli stili che ho usato. Nota che le mie scelte di colori e le dimensioni sono completamente opzionali, sentiti libero di usare quello che vuoi.
La cosa più importante che ho fatto qui è stata quella di impostare? Display? bloccare?. Questo ci consentirà di trasformare il nostro link testuale in una casella più grande con larghezza e altezza definite. Successivamente ho semplicemente impostato la dimensione e il colore di sfondo, quindi ho aggiunto un bordo. Userò? Rgba? un bel po ', se vuoi rendere questo un po' più amichevole per i browser più vecchi, dai un'occhiata a questo articolo sulla dichiarazione di fallbacks rgba.
Passaggio 2 Anteprima
Dopo il passo due dovresti avere una scatola dall'aspetto abbastanza noioso con qualche testo da leggere all'interno.
Passaggio 3: stili di testo
Ora è il momento di attaccare quel brutto testo. Per assicurarti di essere al passo con ogni passaggio, continuerò semplicemente ad aggiungere ciò che abbiamo creato in precedenza con i commenti per aiutarti a vedere ogni passaggio:
Qui vediamo che ho aggiunto in un colore del testo che è essenzialmente una tonalità più scura del colore del pulsante. Questo trucco si ottiene impostando il colore del testo in nero e riducendo l'opacità tramite rgba. Successivamente, ho centrato il testo allineato e dichiaro un sacco di cose usando la stenografia dei font.
Stenografia dei font
La stenografia CSS è un modo semplice per dichiarare un gruppo di proprietà e stili CSS in un'unica riga. Per prima cosa ho dichiarato il peso (in grassetto), poi la dimensione del carattere / l'altezza della linea e infine la famiglia di caratteri. Si noti che l'altezza della linea è impostata esattamente all'altezza del pulsante. Questo è un modo semplice per assicurarsi che il tuo testo sia centrato verticalmente.
Per ulteriori informazioni sulla stenografia CSS, consulta 6 Stili stenografici CSS che ogni sviluppatore dovrebbe conoscere.
Passaggio 3 Anteprima
Dopo il passaggio tre, il tuo pulsante dovrebbe effettivamente iniziare a sembrare un pulsante!
Step 4: Stili di stile CSS3
Il passaggio precedente ci porta a un bel pulsante funzionante che non sembra affatto male. Sfortunatamente, è piuttosto noioso. La parte importante però è che questo pulsante dovrebbe apparire perfetto nella maggior parte dei browser, quindi ora possiamo aggiungere alcune novità CSS senza preoccuparci troppo di lasciare i vecchi browser dietro. In definitiva, non mi importa se IE decide di abbandonare questi stili successivi perché il mio pulsante dovrebbe funzionare bene per quegli utenti nel suo stato attuale.
Possiamo facilmente essere trascinati via e scrivere cinquanta righe di CSS per rendere il nostro pulsante splendente e carino, ma lo terrò molto semplice per gli scopi di oggi:
Ognuno di questi può essere difficile da leggere, quindi esaminiamoli uno per uno. In primo luogo, ho aggiunto un gradiente che utilizza il colore che avevamo già sul posto e si attenua a qualcosa di un po 'più scuro. Ho lasciato nel mio precedente colore di sfondo sopra quella sezione per agire come fallback.
Il prossimo è il raggio di confine. Ho deciso di andare con un angolo arrotondato davvero pesante che darà al bottone una forma di pillola. Dal momento che voglio che tutti i miei angoli siano gli stessi, dichiaro semplicemente un valore e viene applicato uniformemente.
Alla fine, ho gettato delle ombre. Sia la scatola che l'ombra del testo che ho usato sono un po 'particolari. Per l'ombra del riquadro, a ha dato un offset verticale ma non orizzontale e ha lasciato la sfumatura a 0. Questo darà un bel effetto 3D finto che non richiede troppo lavoro o codice. Per l'ombra del testo, ho applicato anche un offset verticale e ho impostato il colore su bianco con un'opacità del 20%. Questo è un modo estremamente semplice per creare un effetto con caratteri tipografici e far apparire il testo come se affondasse nel pulsante.
Utilizzare Prefixr per i prefissi del browser
Si noti che il codice sopra non è affatto compatibile con browser. Nelle fasi iniziali della sperimentazione, odio importare il mio codice con una mezza dozzina di prefissi del browser e spesso dimentico se un determinato browser ha o meno una sintassi univoca.
Una volta che ho le cose che voglio in Espresso (il mio IDE preferito) usando la sintassi di base, posso lanciare tutto quel codice in un piccolo strumento gratuito chiamato Prefixr, che lo elaborerà e sputerò il mio codice con tutto sono state aggiunte automaticamente le versioni specifiche del browser disponibili corrette.
Passaggio 4 Anteprima
Dopo il passaggio quattro, il tuo pulsante dovrebbe apparire molto più nitido di prima. Quasi finito!
Passaggio 5: stili di passaggio del mouse
Il passo finale nella nostra procedura di pulsante è definire il comportamento del passaggio del mouse. Quando l'utente passa sopra il pulsante, è sempre utile ottenere un piccolo feedback visivo che è più del cambio di cursore predefinito. Ancora una volta, potremmo fare di tutto, ma lo terrò semplice e alleggerirò leggermente il gradiente:
Ora quando si passa il mouse sopra il pulsante, il suo colore / luminosità si sposterà. È un effetto sottile ma è abbastanza forte da essere notato da qualsiasi utente, anche se è daltonico.
Finito!
Dopo il passaggio cinque, hai finito! Ora dovresti avere un bellissimo pulsante creato interamente con CSS e HTML. Ancora più importante, però, dovresti avere una forte sensazione per il flusso di lavoro di base da seguire per creare un pulsante usando CSS.
demo: Per vedere il pulsante in azione, clicca qui o sull'immagine qui sopra.
jsFiddle: Per giocherellare con il codice, clicca qui.
Conclusione
Abbiamo imparato molte cose molto importanti oggi. In primo luogo, abbiamo visto che possiamo usare un tag di ancoraggio HTML di base come punto di partenza per il nostro pulsante e che è utile impostare pulsanti con classi riutilizzabili. Abbiamo anche imparato come iniziare con lo styling di un pulsante di base che funzionerà bene su tutti i browser e di aggiungere un tocco in un secondo momento piuttosto che basare l'intera struttura del pulsante su tecniche che non saranno ampiamente accessibili. Infine, abbiamo visto come mantenere le cose semplici codificando con le proprietà CSS3 di base fino a quando non abbiamo ottenuto tutto a posto, e poi seguirlo con un viaggio su Prefixr, che espande il nostro codice in qualcosa come compatibile cross-browser possibile.
Lascia un commento qui sotto e facci sapere cosa ne pensi. Se sei un principiante, ti è stato d'aiuto? Se sei un professionista esperto, cosa faresti in modo diverso?