Share
Questo tutorial mostrerà come creare una barra di navigazione semplice e piacevole usando diversi stili CSS3 combinati. Puntiamo a dare un'occhiata e sentire che in passato potevano essere creati solo combinando diverse immagini, JavaScript e diverse div. Cominciamo?
Nota: tutti i seguenti esempi sono stati testati su Mozilla Firefox, Safari e Chrome. Se vuoi ottenere qualcosa di simile in IE o in qualsiasi altro browser lascia un commento e sarò lieto di aiutarti.
Una barra di navigazione di bell'aspetto e ben progettata è stata, fin dall'inizio del web design, uno degli elementi più potenti per mantenere i siti web organizzati e ben strutturati. In passato creare un bel design usando ombre, sfumature, angoli arrotondati e effetti di volo al volo richiedeva una serie di trucchi che aumentavano le dimensioni del nostro codice e il numero di immagini.
Per questo tutorial esamineremo due effetti CSS3 molto importanti; Angoli arrotondati e ombre casella, inoltre utilizzeremo i gradienti lineari precedentemente mostrati nel tutorial CSS3 vs Photoshop - Sfondi complessi.
Tutti ne hanno sentito parlare, sarà ridondante parlare di come crearli, quindi nei seguenti esempi mi concentrerò sulle differenze nella creazione di un effetto Angolo arrotondato usando le immagini e i vantaggi e gli svantaggi dell'uso di CSS3.
Creare un effetto angolo arrotondato è piuttosto semplice in qualsiasi software grafico, ma in Photoshop abbiamo alcuni problemi:
Precisione: Anche se è possibile impostare il raggio dell'angolo arrotondato, il motore anti-aliasing incorporato di Photoshop spesso aggiunge uno o due pixel in più nel grafico. Molti di noi in passato dovevano ridurre manualmente i pixel di angoli arrotondati basati su immagini inesatte per creare un join pulito con, ad esempio, sfondi a colori.
La modifica: Questo è uno dei maggiori problemi nella creazione di un angolo arrotondato basato sull'immagine. Se crei una grafica per un angolo di raggio 10px in Photoshop e per qualche motivo devi aumentare il raggio a 20px non c'è altro modo per farlo che ridisegnare la forma, o modificarne manualmente tutti gli angoli, perdere tempo e precisione. Il ridimensionamento è un altro enorme problema, se vuoi allungare o ingrandire la forma devi usare lo strumento selezione punti in Photoshop, perché l'uso dei controlli di trasformazione può causare distorsioni indesiderate nella forma dell'angolo. Non ho nemmeno bisogno di menzionare che tagliare gli angoli richiede un sacco di minuti preziosi.
Riempimenti e bordi: La creazione di un riempimento sfumato all'interno di una casella d'angolo arrotondata basata su immagini è sempre stata un grande compito, anche se non si sono coperti i bordi, è necessaria una precisione chirurgica per tagliare le immagini coinvolte. È necessario creare almeno 3 immagini per ogni riquadro, una per gli angoli superiori, un'altra per gli angoli inferiori e il gradiente orizzontale o verticale, quindi scrivere il codice per esso. Un altro problema con il riempimento dell'immagine è che spesso il contenitore deve aumentare la sua altezza o larghezza, ottenendo un effetto indesiderato con il gradiente (vedi immagine sotto).
Mix Corner Styles: In Photoshop, la creazione di stili d'angolo misti richiede un po 'di tempo, non ci sono opzioni per combinare gli stili d'angolo. È necessario ridurre / aumentare manualmente il raggio o combinare le forme? e quindi tagliare ogni angolo.
Usare CSS3 per sostituire i classici angoli arrotondati basati su immagini è una grande idea. Ecco alcuni professionisti:
Vediamo il codice per creare angoli arrotondati su un elemento HTML:
/ * Caselle angolari arrotondate * / .box background-image: -moz-linear-gradient (in alto, # FAD502, # E89502); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# FAD502), a (# E89502), color-stop (1, # E89502)); .fourcorners -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; .topleft -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-radius-topleft: 20px; border-top-left-radius: 20px; .bottomleft -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-radius-bottomleft: 20px; border-bottom-left-radius: 20px; .topright -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; border-top-right-radius: 20px; .bottomright -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; .asymmetrical1 -webkit-border-top-left-radius: 160px; -khtml-border-radius-topleft: 160px; -moz-border-radius-topleft: 160px; border-top-left-radius: 160px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 0px; -khtml-border-radius-bottomright: 0px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; .asymmetrical2 -webkit-border-top-left-radius: 0px; -khtml-border-radius-topleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-border-top-right-radius: 90px; -khtml-border-radius-topright: 90px; -moz-border-radius-topright: 90px; border-top-right-radius: 90px; -webkit-border-bottom-left-radius: 0px; -khtml-border-radius-bottomleft: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 90px; -khtml-border-radius-bottomright: 90px; -moz-border-radius-bottomright: 90px; border-bottom-right-radius: 90px; .circle width: 170px; altezza: 170px; padding: 15px; font-family: Arial, Helvetica, sans-serif; colore: #FFF; font-size: 12px; font-weight: bold; float: sinistra; background-image: -moz-linear-gradient (in alto, # FAD502, # E89502); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# FAD502), a (# E89502), color-stop (1, # E89502)); -webkit-border-top-left-radius: 100px; -khtml-border-radius-topleft: 100px; -moz-border-radius-topleft: 100px; border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -khtml-border-radius-topright: 100px; -moz-border-radius-topright: 100px; border-top-right-radius: 100px; -webkit-border-bottom-left-radius: 100px; -khtml-border-radius-bottomleft: 100px; -moz-border-radius-bottomleft: 100px; border-bottom-left-radius: 100px; -webkit-border-bottom-right-radius: 100px; -khtml-border-radius-bottomright: 100px; -moz-border-radius-bottomright: 100px; border-bottom-right-radius: 100px;
Alcuni degli effetti più interessanti che è possibile ottenere con Photoshop sono tramite Drop Shadows e Inner Shadows. Usarli nel modo giusto può portare a straordinari effetti 3D. Ovviamente, l'uso di un'ombra esterna o di un'ombra interiore nel modo sbagliato può rapidamente trasformarsi in un effetto scomposto.
Di seguito troverai alcuni esempi di buone pratiche:
CSS3 ci consente di creare ombre con solo un paio di righe di codice, lo stile in uso è "box-shadow".
Per creare un Photoshop come Ombra esterna puoi usare la seguente sintassi:
box-ombra:
Per creare un Photoshop come Ombra interiore puoi usare la seguente sintassi:
box-shadow: inserto
Accentsconagua