Web designer utilizzano spesso piegato-back nastro banner come effetto decorativo per le intestazioni di testo. Questi banner nastro sporgono dal bordo della pagina e fare voce testo molto più visibile ai lettori. È possibile creare questi banner senza immagini e browser moderni li sostenere, tra cui Internet Explorer 9 e fino. Il codice prevede due pseudo-elementi: elementi che non fanno parte del codice HTML reale, ma creati da CSS, e alcuni trucchi di confine per creare i triangoli per le ombre del nastro e tacche che compaiono su ogni bordo del nastro.

istruzione

1 Aprire la pagina Web in un editor - Notepad farà - e aggiungere un titolo con voce HTML tags:

<H2 class = "ribbon"> Titolo Testo </ h2>

Dare il titolo tag un nome di classe come "nastro" in modo da poter scrivere codice per trasformare qualsiasi voce in un nastro. Potrai indirizzare il nome della classe nel codice CSS in seguito.

2 Aprire il foglio di stile per la pagina Web nell'editor. Se non ne hai ancora uno, creare un file vuoto e salvarlo come un file CSS nella stessa cartella come la pagina Web. Aggiungere questo codice dopo la "<title>" tag nella pagina Web:

<Link rel = "stylesheet" href = "yourstylesheet.css" type = "text / css" />

Quando si apre il foglio di stile, scrivere nuovo codice di stile dopo qualsiasi altro codice che è già presente.

3 Lascia la tua voce colore una posizione relativa, la larghezza e lo sfondo. stile testo come più vi piace, come nel seguente esempio:

.ribbon {
position: relative;
width: 300px;
background-color: # a91313;
colore: #FFFFFF;
font-family: Arial, sans-serif;
padding: 10px 20px;
box-shadow: 0px 2px 5px rbgba (0,0,0,0.3);
}

Questo esempio crea una barra di intestazione che è relativamente posizionato con una larghezza di 300 pixel, un colore di sfondo rosso scuro, testo bianco e un semi-trasparente drop-ombra. L'imbottitura - 10 pixel superiore e inferiore e 20 pixel a destra ea sinistra - aggiunge lo spazio attorno al testo all'interno del bar.

4 Creare una pseudo-elemento usando ": dopo" in CSS:

h2: dopo {
contenuto: ' ';
}

Utilizzando ": dopo" in una regola di stile e l'aggiunta di uno spazio vuoto di contenuti, come indicato, si sta creando un elemento che il browser vede - ma non è nel codice HTML stesso.

5 Dare posizionamento assoluto per lo pseudo-elemento e impostare la posizione del 100 per cento dall'alto e 0 pixel da sinistra. Rendere la larghezza e l'altezza pari a 0 pixel e impostare un valore z-index negativo:

h2: dopo {
contenuto: ' ';
position: absolute;
top: 100%;
sinistra: 0px;
width: 0px;
altezza: 0px;
z-index: -10;
}

Questo pseudo-elemento crea la parte del nastro che si ripiega, quindi ha bisogno di un negativo z-index per posizionare dietro l'intestazione. In questo modo, è possibile sovrapporre drop-ombra del titolo sopra la pseudo-elemento, che sembra più naturale.

6 Creare la forma triangolare della sezione piegata-back del nastro. Il trucco per la creazione di un triangolo in CSS è quello di utilizzare larghezza del bordo su un elemento. Si può pensare delle frontiere su un elemento zero dimensione come quattro triangoli che puntano tutti verso l'interno. Ecco il codice per il triangolo che crea la sezione piegata-back:

border-width: 10px 5px;
border-style: solido;
border-color: # # 780d0d 780d0d trasparente trasparente;

Inserire questo codice dopo lo z-index si imposta, all'interno delle parentesi graffe della pseudo-elemento. Esso utilizza due confini - sopra ea sinistra - per creare un triangolo.

7 Scrivi un'altra regola di stile che crea un secondo pseudo-elemento prima del tag titolo:

h2: prima {
contenuto: ' ';
}

Questo pseudo-elemento creerà sezione dentellata del nastro.

8 Dare la sezione dentellato del nastro di una posizione assoluta, e rendere il suo valore z-index inferiore alla sezione piegata-back. Utilizzare una larghezza di 30 pixel e un'altezza di 0 pixel. Spingere la pseudo-elemento indietro di 30 pixel a destra impostando un valore di "sinistra" di -30 pixel. Offset questa sezione del nastro dalla parte superiore utilizzando la proprietà "top":

h2: prima {
contenuto: ' ';
position: absolute;
width: 30px;
altezza: 0;
top: 12px
sinistra: -30px;
z-index: -20;
}

9 Creare la tacca aggiungendo bordi a tre lati del ": prima di" pseudo-elemento. Ecco il codice, che si dovrebbe mettere sotto lo z-index:

border-width: 20px 10px;
border-style: solido;
border-color: # a91313 # a91313 # a91313 trasparente;

Consigli e avvertenze

• Questo codice non creerà un effetto di nastro in vecchi browser che non supportano gli pseudo-elementi. Internet Explorer offre un supporto parziale per la versione 8 e il supporto completo nella versione 9, ma le versioni 6 e 7 non supportano questo effetto.