Come creare una navigazione a schede CSS3

Gente di Hiya! Oggi ci divertiremo a creare una navigazione a schede CSS3. In questo tutorial creeremo la versione darkwash dei tanti temi disponibili per queste fantastiche schede solo perché? # 1 possiamo e # 2, c'è più stile coinvolto e posso mostrarvi trucchi più accurati con CSS3 che con gli altri stili. Se preferisci, ci sono temi molto più semplici nei file sorgente, quindi sentiti libero di seguirli mentre la struttura è praticamente la stessa.

Nota: il supporto per IE7 e 8 è presente ma limitato dal fatto che la funzionalità funziona perfettamente ma alcuni degli stili di sovrapposizione non sono trattati correttamente. Se non fosse per la meravigliosa e fantastica correzione CSSPIE e Dean Edwards, non ci sarebbe alcun supporto per qualsiasi versione diversa da IE9.

Ok, ora che è fuori strada, penso che sia ora di iniziare!

Il video tutorial

Offriamo questo tutorial in due formati diversi: un video e un tutorial scritto completo di seguito. Segui insieme a qualsiasi metodo di apprendimento che preferisci (o entrambi!):

The Written Tutorial

Di seguito è riportato il tutorial scritto passo passo. Assicurati di prendere anche l'intera sorgente scaricabile!

Passaggio 1 Creazione del markup

La testa

Per il nostro primo bit di markup, creeremo la nostra testa usando il doctype HTML5, inserendo i nostri fogli di stile e dicendo a IE 7 & 8 che è ok usare CSS3.

    Schede CSS3

Costruire i contenitori

Dopo aver aggiunto la testina, tra i tag body è necessario creare alcuni contenitori per la navigazione a schede. Scopriamolo?

Come puoi vedere, il primo contenitore è. Questo è usato per creare una larghezza completa della navigazione a schede e posizionarlo come preferisci.

L'ultimo è il quale è il wrapper per le stesse schede stesse e aiuta a contenere il blocco del contenuto. Questa è una classe molto importante e non è necessario modificarla, anche se spiegherò lo stile più avanti in questo tutorial.

     Le schede andranno qui

"L'ultimo è il. Questa è una classe molto importante e non è necessario modificarla"

Creazione della prima scheda

L'ultimo markup che vorremmo scrivere è per le nostre schede reali e il contenuto al loro interno.

Prima di tutto vogliamo creare un div con un id in modo da poter sapere quale contenuto mostrare quando si fa clic sulla scheda corrispondente. Sembra così?

  // Il prossimo markup andrà qui

Quindi creeremo la scheda per quell'id contenuto e diremo di mostrare il div con un id di c1 usando un hash con c1 dopo di esso nel link. Quindi ora il tuo markup dovrebbe assomigliare a questo?

  Primo  // Il prossimo markup andrà qui

Ora creiamo un posto dove mettere il nostro contenuto. Per fare ciò creeremo semplicemente un div con una classe di .tab-content e inseriremo un testo fittizio, rendendo il markup ora simile a questo?

  Primo          2 tipi di schede: normale e cinegiornale
 Se hai una scheda di apertura come questa, dovrebbe essere sempre l'ultima nella lista delle schede altrimenti non verrà mostrata prima quando la pagina viene caricata.
 Il testo a volte si sovrappone alle schede nascoste in IE7 e 8

La navigazione a schede dovrebbe essere simile a questa. Sembra bello nella sua forma di base, ma aggiungiamo un po 'di stile e facciamo funzionare questo bambino!

Passaggio 2 Inserimento in alcuni CSS

Ora che abbiamo il markup tutto a posto, ti senti come un vincitore giusto adesso! Facciamo un passo in più e creiamo quella sicurezza applicando alcuni fantastici CSS al markup che hai appena creato? allora avrai davvero qualcosa di cui vantarti!

Tag globali

Ok per gli scopi di questo tutorial, stiamo usando una navigazione a schede indipendente, quindi aggiungiamo alcuni stili globali come body, p tag, intestazione, ecc..

Quando si implementano le schede, è possibile che questi stili siano già presenti nel foglio di stile. In tal caso puoi cancellare questi stili o tagetare il .tab-contenitore per creare uno stile di tabulazione specifico in modo da non sovrascrivere i propri stili dei siti Web.

 body font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: # E7E7E7;  p, .tab-content li, h1, h2, h3 / * Questo assicura che c'è abbastanza spazio tra i tuoi paragrafi, intestazioni, ecc * / margin-bottom: 10px;  a text-decoration: none; color: # EFD24A;  a: hover color: # AF9B41;  .tab-container h3 / * Esegue solo i titoli h3 all'interno delle schede * / font-size: 147%; color: # EFDFB3;

Disegnare i contenitori

Ora stiamo per modellare i nostri due contenitori. Per questo tutorial andremo a centrare il contenitore principale usando il margine: 0 auto, dargli una larghezza di 480px e spingilo dall'alto verso il basso di circa il 4%.

 #container / * Usa questo per posizionare l'intero modulo tab * / margin: 0 auto; larghezza: 480px; margin-top: 4%;

Per il .tab-container, è importante aggiungere una posizione di relativo per ogni blocco di contenuto della scheda in modo che si sovrappongano correttamente in uno spazio piacevole e contenuto. Vogliamo che la nostra larghezza corrisponda alla larghezza del nostro contenitore principale al 100% e un indice z di 0 che aiuti a impedire a IE di mostrare il testo del blocco di contenuti dietro quello corrente.

 .tab-container position: relativo; larghezza: 100%; z-index: 0;

A questo punto dovresti avere una navigazione a schede funzionante. Non sembra ancora carino ma ehi? sta funzionando! Le mie scuse se è difficile da vedere.

Disegnare le schede e il loro contenuto

Ok, visto che abbiamo schede di lavoro, la prima cosa che vogliamo fare è allinearle orizzontalmente. Per fare ciò aggiungiamo semplicemente un display: in linea con il primo div di ogni scheda.

 .tab-container> div display: inline;

Quindi ora abbiamo bisogno di aggiungere alcuni stili predefiniti alle schede stesse. Stiamo per aggiungere una postazione di relativo che è importante per IE. Metteremo anche una schermata di blocco in linea in modo da allinearli correttamente con il contenuto della scheda. Mettendo un margine di 2px, possiamo aggiungere uno spazio attorno a ogni scheda per renderlo più pulito. Aggiungiamo anche uno sfondo sfumato per ogni browser insieme a un raggio di bordo e un'ombra di riquadro per qualche extra suggestione! Dato che stiamo usando di nuovo CSSPIE per IE 7 e 8, non c'è bisogno di brutti filtri nei gradienti.

 .tab-container> div> a position: relativo! important; / * Mantiene le schede in linea l'una con l'altra * / decorazione del testo: nessuna; colore: # D7D7D7; display: blocco in linea; imbottitura: 4px 14px; font-size: 15px; famiglia di font: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; margin: 2px; sfondo: # 4C4648; / * vecchi browser * / background: -moz-linear-gradient (in alto, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * firefox * / background: linear-gradient (in alto, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * browser futuri * / -pie-background: gradiente lineare (in alto, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * pie per ie * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 4C4648), color-stop (52%, # 474344), color-stop (100% , # 2F2D2E)); / * webkit * / border: dashed 2px # CFA840; imbottitura: 4px 14px; -moz-border-radius: 3px; -webkit-border-radius: 0px; border-radius: 3px; text-shadow: 0 -1px 0 # 000000; -moz-box-shadow: 0 4px 10px -5px # 000000; box-shadow: 0 4px 10px -5px # 000000; -webkit-box-shadow: 0 4px 10px -5px # 000000;

Avanti sulla lista, vogliamo far sapere all'utente in quale scheda si trovano. Per fare ciò useremo il selettore di destinazione e useremo Dean Edwards IE9.js per far sì che IE 7 e 8 lo riconoscano.

Quindi .tab-container> div: target> dice che quando viene selezionato il primo div (es .: div, etc) o è il target, cambieremo ciò che il pulsante (es .: a) all'interno di quel div assomiglierà.

 .tab-container> div: target> a background: none repeat scroll 0 0 # 948a81; text-shadow: 0 1px 0 # 4C4648;

Ora che abbiamo stilizzato i pulsanti di tabulazione, andiamo avanti e aggiungiamo un carattere all'area del contenuto.

Quello che faremo qui è di puntare al secondo div all'interno del contenitore .tab che è div e dargli un minimo di 250px che è importante in modo che tutti i div del contenuto dietro il div di destinazione non si sovrappongano. Quindi, dato che abbiamo il contenuto con l'altezza corretta, abbiamo ancora bisogno di nascondere il div contenuto inattivo dietro quello di destinazione, e per farlo semplicemente aggiungeremo uno z-index di -2. Vogliamo anche IE 7 e 8 per giocare bene, quindi aggiungeremo una posizione assoluta. Ecco, questa è la roba importante e il resto del codice è lì per aggiungere un po 'di stile in più e darci un bel look jean darkwash.

 .tab-container> div> div / * Questo è il contenitore che contiene il contenuto della scheda * / background: # 4C4648; / * vecchi browser * / background: -moz-linear-gradient (in alto, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * firefox * / background: linear-gradient (in alto, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * browser futuri * / -pie-background: gradiente lineare (in alto, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * pie per ie * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 4C4648), color-stop (84%, # 474344), color-stop (100% , # 2F2D2E)); / * webkit * / -moz-box-shadow: 0 0 12px 1px # 000000 inset; -webkit-box-shadow: 0 0 12px 1px # 000000 inserito; box-shadow: 0 0 12px 1px # 000000 inset; z-index: -2; top: 50px; imbottitura: 20px; border: solid 6px # 4C4648; outline: 2px dashed # CFA840; outline-offset: -8px; / * Elimina se non vuoi un offset * / altezza minima: 250px; / * Modifica questo valore se hai bisogno di più o meno spazio contenuto * / posizione: assoluto; / * Risolti IE 7 e 8 * /

Dopo che le div del contenuto iniziale sono state ridisegnate, vorremmo riportare l'obiettivo in primo piano. Per fare ciò usiamo semplicemente il selettore di destinazione con uno z-index di 3 e lo rendiamo importante.

 .tab-container> div: target> div position: absolute; z-index: 3! important; / * Porta il contenuto in primo piano a seconda della scheda su cui è stato fatto clic * /

L'ultima cosa che faremo è aggiungere un po 'di padding al contenuto e alcuni stili di default se vuoi aggiungere un'immagine all'interno delle tue schede.

Una nota a margine, non dimenticare di importare il file reset.css nella parte superiore del foglio di stile, abbiamo bisogno di questo per sovrascrivere i valori predefiniti del browser.

 div.tab-content / * Stili il contenuto interno delle schede * / padding-bottom: 70px; padding-left: 20px; padding-right: 20px;  .tab-content img margin: 0 auto; blocco di visualizzazione; imbottitura-fondo: 20px; padding-top: 10px;  / ****** Importa altri fogli di stile in modo da non doverli chiamare in un file html ***** / @import url ('? /? /Reset.css');

Dopo tutto quello che è stato completato, si dovrebbe finire con qualcosa come l'immagine seguente. Se il tuo non è uguale o simile, o ti sei perso qualcosa o hai deciso di andare con il tuo stile, torna indietro e ricontrolla il tuo lavoro, sono sicuro che è solo qualcosa di secondario.

Un'altra cosa?

Vogliamo dire a IE7 e 8 che va bene usare ombre di riquadri, angoli arrotondati, ecc. Quindi a questo aggiungiamo semplicemente gli elementi che sono nel nostro foglio di stile con le caratteristiche CSS3 al nostro file ie.css, quindi usiamo il comportamento per CSSPIE così?

 .tab-container> div> div, .tab-container> div> a comportamento: url (? /styles/csspie/PIE.htc);

Ottimo lavoro? Hai finito!

Se sei arrivato così lontano, allora significa che hai fatto tutto così? Congratulazioni! Spero che questo tutorial ti sia piaciuto tanto quanto mi è piaciuto scriverlo. È sempre un piacere insegnarti nuovi consigli e trucchi che potresti non conoscere già. Detto questo, buon lavoro, sii paziente e continua a prendere più conoscenza possibile e prima che tu lo sappia sarai un maestro in qualunque cosa tu faccia!

Lascia i tuoi commenti e domande qui sotto;)

Web design