Web designer spesso usano bandiere del nastro posteriore piegato come un effetto decorativo per i loro titoli di testo. Queste bandiere del nastro sporgono dal bordo della pagina e rendono il testo del titolo molto più visibili ai lettori. È possibile creare questi banner senza alcuna immagine, e i browser moderni saranno sostenerli, tra cui Internet Explorer 9 e fino. Il codice prevede due pseudo-elementi: elementi non fa parte del codice HTML effettivo ma creato da CSS e alcuni trucchi di confine per creare i triangoli della barra multifunzione ombre e tacche che appaiono su ogni bordo della barra multifunzione.
Istruzioni
1
Aprire la pagina Web in un editor – blocco note verrà fare – e aggiungere un'intestazione utilizzando i tag di intestazione HTML:
< classe h2 = "barra multifunzione" > testo intestazione < / h2 >
Dare i tag di intestazione di un nome di classe come "nastro" in modo è possibile scrivere codice per attivare qualsiasi voce in un nastro. Si punterà il nome della classe nel codice CSS più tardi.
2
Aprire il foglio di stile per la tua pagina Web nell'editor. Se non hai ancora uno, creare un file vuoto e salvarlo come un file CSS nella stessa cartella come pagina Web. Aggiungi questo codice dopo il tag "< title >" nella pagina Web:
< link rel = "stylesheet" href="yourstylesheet.css" type = "text/css" / >
Quando si apre il foglio di stile, è possibile scrivere codice di stile di nuovo dopo qualsiasi altro codice che è già presente.
3
Dare il titolo di un colore di sfondo, la larghezza e la posizione relativo. Testo lo stile che preferisci, come nell'esempio seguente:
.Ribbon () {
Posizione: relativo;
Width: 300px;
colore di sfondo: #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 del titolo che è posizionata con una larghezza di 300 pixel, un colore rosso scuro sfondo, testo bianco e un'ombreggiatura semitrasparente. L'imbottitura – top 10 pixel, fondo e 20 pixel sinistra e destra – aggiunge spazio intorno al testo all'interno della barra.
4
Creare un tramite di pseudo-elemento ": dopo" in CSS:
H2: dopo {
contenuto: ' ';
}
Utilizzando ": dopo" in una regola di stile e l'aggiunta di uno spazio vuoto per il contenuto, come illustrato, si sta creando un elemento che il browser si vede..--ancora non è nello stesso codice HTML.
5
Dare al pseudo-elemento di posizionamento assoluto e impostare la sua posizione al 100% 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: ' ';
Posizione: assoluta;
parte superiore: 100%;
sinistra: 0px;
Larghezza: 0px;
Altezza: 0px;
z-indice: -10;
}
Questo pseudo-elemento crea la parte del nastro che si ripiega, quindi ha bisogno di uno z-index negativo per posizionarlo dietro l'intestazione. In questo modo, è possibile sovrapporre ombra dell'intestazione sopra lo pseudo-element, che sembra più naturale.
6
Creare la forma di triangolo per la sezione schiena piegata della barra multifunzione. Il trucco per creare un triangolo in CSS è quello di utilizzare la larghezza del bordo su un elemento. Si può pensare di bordi su un elemento di zero-dimensione come essendo quattro triangoli che tutti puntano verso l'interno. Ecco il codice per il triangolo che crea la sezione posteriore piegato:
larghezza del bordo: 5px 10px;
border-style: solid;
border-color: #780d0d #780d0d trasparente trasparente;
Inserire il codice dopo lo z-index che si imposta, tra le parentesi graffe di pseudo-elemento. Esso utilizza due bordi – top e left – per creare un triangolo.
7
Scrivere un'altra regola di stile che crea un secondo pseudo-elemento prima del tag di intestazione:
H2: prima {
contenuto: ' ';
}
Questo pseudo-elemento creerà la sezione dentellata della barra multifunzione.
8
Dare sezione dentellata della multifunzione posizione assoluta e fare il suo valore z-index inferiore rispetto alla sezione di schiena piegata. Utilizzare una larghezza di 30 pixel e un'altezza di 0 pixel. Spingere il pseudo-elemento indietro 30 pixel a destra impostando un valore di "sinistro" di pixel-30. Compensare questa sezione del nastro dall'alto utilizzando la proprietà "top":
H2: prima {
contenuto: ' ';
Posizione: assoluta;
Larghezza: 30px;
Altezza: 0;
Top: 12px
sinistra:-30px;
z-indice: -20;
}
9
Creare la tacca con l'aggiunta di bordi a tre lati della ": prima di" pseudo-elemento. Ecco il codice che si dovrebbe mettere sotto lo z-index:
larghezza del bordo: 10px 20px;
border-style: solid;
colore del bordo: #a91313 #a91313 #a91313 trasparente;
Consigli & Avvertenze
- Questo codice non creerà un effetto nastro in browser meno recenti che non supportano gli pseudo-elementi. Internet Explorer fornisce supporto parziale per la versione 8 e supporto completo nella versione 9, ma le versioni 6 e 7 non supportano questo effetto.