Share
Dato che CSS3 diventa più robusto e più ampiamente supportato, le opzioni per i divertenti elementi di design moderni che possono essere creati senza grafica sono praticamente illimitate! Per un progetto recente, ho deciso di vedere se potevo creare un banner a nastro centrato con puro CSS3. Questo tutorial ti illustrerà come è stato fatto.
A quanto pare, è in realtà abbastanza semplice, utilizzando solo HTML semantico semplice e alcuni trucchi CSS3 grazie alla magia della proprietà border-width. L'unica avvertenza: come con tutte le nuove tecniche CSS3, può comportarsi in modo un po 'vistoso in alcuni browser IE? ci occuperemo di questo alla fine del tutorial.
Ecco come:
Vogliamo creare una barra dei collegamenti di navigazione, quindi inizieremo con una semplice lista non ordinata [ul] con collegamenti all'interno di [a]. Questo è uno degli elementi costitutivi più basilari del markup; utile per creare liste di elementi da abbinare in modo simile a quello che faremo qui:
Il codice:
Vogliamo che i link fluttuino orizzontalmente sulla pagina, quindi aggiungeremo i seguenti stili:
Per prima cosa, vogliamo rimuovere lo stile dei proiettili dagli elementi dell'elenco e renderli mobili a sinistra l'uno dell'altro e aggiungere un po 'di spazio tra di loro.
#navigation li list-style: none; blocco di visualizzazione; fluttuare: a sinistra; margine: 1em;
Successivamente, aggiungeremo un po 'di ombreggiatura del testo, rimuovere le sottolineature del collegamento e aggiungere il colore e le dimensioni del testo.
#navigation li a text-shadow: 0 2px 1px rgba (0,0,0,0,5); blocco di visualizzazione; decorazione del testo: nessuna; colore: # f0f0f0; font-size: 1.6em; margine: 0, 5em;
Mi piace anche aggiungere un po 'di effetti di animazione morbidi al passaggio del mouse:
#navigation li a: hover margin-top: 2px;
Per aggiungere le stelle, ho inserito un'entità HTML ✭ (che assomiglia a questo?) all'interno di ogni link. Questo è puramente decorativo e non è necessario per la funzionalità.
A questo punto, abbiamo già una bella sezione di link di navigazione utilizzabile che potremmo aggiungere a una pagina. Ma continueremo a creare un bel nastro per inserire questi collegamenti.
La tecnica della larghezza del margine che utilizzeremo richiede l'aggiunta di 4 elementi extra al markup. Anche se non è l'ideale per aggiungere elementi estranei, nel lungo periodo è probabilmente ancora più efficiente del caricamento di elementi grafici extra e manterremo le cose il più semplice possibile.
Innanzitutto, creeremo un elemento contenitore attorno ai collegamenti. Questo ci permetterà di impostare una larghezza per mantenere tutti gli elementi del banner insieme:
- ✭ collegamento 1
- ✭ collegamento 2
- ✭ link 3
- ✭ collegamento 4
Aggiungeremo il seguente stile per impostare la larghezza e centrare l'elemento del contenitore:
#navigation_container margin: 0 auto; larghezza: 960 px;
Successivamente, aggiungeremo il rettangolo che sarà la sezione del corpo del nastro:
- collegamento 1
- collegamento 2
- link 3
- link 4
Aggiungeremo i seguenti stili per creare lo sfondo del corpo del nastro. Stiamo impostando un indice z di 500 perché il rettangolo deve essere impilato sopra i triangoli che verranno creati successivamente. Aggiungo sia -moz-box-shadow che box-shadow per tenere conto rispettivamente di Firefox e -webkit / IE9:
.rettangolo background: # e5592e; altezza: 62 px; posizione: relativa; -moz-box-shadow: 0px 0px 4px rgba (0,0,0,0,55); box-shadow: 0px 0px 4px rgba (0,0,0,0,55); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 500; / * l'ordine di stack: foreground * / margin: 3em 0;Successivamente, aggiungeremo i triangoli ai bordi del nastro:
- collegamento 1
- collegamento 2
- link 3
- link 4
Infine, aggiungeremo alcune magie di larghezza del bordo. La chiave per questo è l'impostazione di un colore del bordo trasparente per ciascun lato dell'elemento ad eccezione del fondo (per i triangoli in alto) e in alto (per i triangoli in basso). Quindi, impostiamo una larghezza del bordo di 50 px. Questo crea un triangolo isoscele, che posizioneremo quindi dietro il corpo principale del nastro:
.l-triangle-top border-color: # d9542b trasparente trasparente; border-style: solido; border-width: 50px; altezza: 0px; larghezza: 0px; posizione: relativa; fluttuare: a sinistra; inizio: 1px; a sinistra: -50px; .l-triangle-bottom border-color: transparent transparent # d9542b; border-style: solido; border-width: 50px; altezza: 0px; larghezza: 0px; posizione: relativa; fluttuare: a sinistra; inizio: -40px; a sinistra: -150 px;Faremo lo stesso per il lato destro:
.r-triangle-top border-color: # d9542b trasparente trasparente; border-style: solido; border-width: 50px; altezza: 0px; larghezza: 0px; posizione: relativa; float: giusto; a destra: -45px; inizio: -107px; .r-triangle-bottom border-color: transparent transparent # d9542b; border-style: solido; border-width: 50px; altezza: 0px; larghezza: 0px; posizione: relativa; float: giusto; sopra: -149px; a destra: -145px;E abbiamo finito! Questo renderà perfettamente nei browser Firefox e Webkit. IE è notoriamente pessimo nell'usare queste proprietà CSS3, quindi non renderà perfettamente il rendering lì, ma faremo del nostro meglio per ottenerlo abbastanza vicino usando un paio di fogli di stile personalizzati.
Per IE8 e IE9, aggiungeremo alcune regole di posizionamento personalizzate tramite il foglio di stile "ie.css":
.l-triangle-top left: 150px; top: 50px; .l-triangle-bottom left: 50px; inizio: -12px; .r-triangle-top .r-triangle-bottom top: -169px;Solo per essere al sicuro (e poiché crediamo nel miglioramento progressivo), aggiungeremo anche una correzione per IE7, che può essere inserita nella sezione head della pagina o in un foglio di stile IE7 separato. La mia scelta di una soluzione è quella di nascondere semplicemente i triangoli nei browser inferiori a IE8. La proprietà width del browser è supportata in IE7, ma la spaziatura sarà un po 'spenta. Spetta a te decidere se desideri dedicare più tempo al riposizionamento degli elementi in IE7:
Avvolgendolo
Le immagini di sfondo sono solo per divertimento - puoi aggiungere le tue e costruire attorno a questo documento? o semplicemente afferrare tutto sopra questo e rilasciarlo nel proprio design. Ma, nell'interesse di essere completo, ecco il CSS che aggiunge in quelle immagini:
html background: # 77d5fb url ('bottom_bg.jpg') bottom-center no-repeat; body background: transparent url ('top_bg.png') top center no-repeat; larghezza: 100%; altezza: 100%; margine: 0 0;Titoli di coda: Le immagini provengono da iStockPhoto - non possiamo distribuire l'immagine dell'isola inferiore con la demo, ma puoi prenderla per te qui.
Questo è tutto!
Spero che vi sia piaciuto questo! Ricorda che questo è un insieme abbastanza nuovo di tecniche? quindi se il tuo obiettivo è il 100% di stabilità su tutti i browser conosciuti dall'uomo, ci sono modi più stabili per ottenere ciò usando le immagini di base per lo sfondo. Lascia i tuoi commenti e domande qui sotto;)
Ulteriori informazioni sulla creazione di un effetto barra multifunzione o pieghevole:
Crea un effetto Wrap-Around Ribbon 3D (Plus a Free PSD!)
Ho pensato che sarebbe stato divertente creare un'esercitazione sul famoso effetto 3D Wrap-Around Ribbon che è spuntato così tanto quest'anno. Questo è un ottimo modo per aggiungere profondità ai tuoi progetti ed è davvero facile da completare.
Visita il post
Suggerimento rapido: pratiche forme CSS
Una tecnica di progettazione comune ultimamente consiste nel creare un effetto di piegatura, in cui appare come se un'intestazione si stesse avvolgendo dietro il suo contenitore. Questo è generalmente ottenuto attraverso l'uso di piccole immagini; tuttavia, con i CSS, possiamo imitare questo effetto abbastanza facilmente. Ti mostrerò come fare in quattro minuti.
Visita il post
Accentsconagua
