November 24
Il Cascading Style Sheets (CSS) mark-up lingua ha guadagnato in CSS3 molti nuovi elementi che consentono di rivale in visualizzazione attraverso la programmazione di un sito web realizzato con le immagini. nuovi elementi di CSS3 includono triangoli e gli angoli arrotondati, che, prima di questo aggiornamento, erano difficili da creare. Queste caratteristiche lo rendono semplice per creare un effetto nastro anche per un novizio del mark-up. Un nastro è essenzialmente uno a più triangoli, una scatola, e un effetto drop-ombra. Questi componenti si collegano insieme per creare un nastro in 3D che è possibile inserire più di intestazioni, banner, o in qualsiasi altro luogo nella vostra pagina web.
1 Creare un tag di intestazione o titolo. Per esempio, se si desidera che la prima intestazione sulla pagina a dire "Header", il mark-up apparirebbe come: "<h1> Intestazione </ h1>". Chiudere sempre un tag HTML con un backslash.
2 Lascia la tua tag HTML allo stile che desiderate con i CSS. Includere almeno la sua posizione, dimensione e colore. Ad esempio, fa riferimento il tag <h1>, il CSS di mark-up sarà simile:
h1
{
position: absolute;
width: 20%;
padding: 10px;
background-color: # 999;
}
Fare ogni riga di mark-up CSS una linea separata. Iniziare e terminare ogni istruzione con staffe aperti e chiusi. "Position: absolute" indica la posizione dell'elemento è assoluto e non cambia non importa che cosa sta succedendo nella pagina. La larghezza è impostato a 20 percento dello schermo o bidone il tag h1 è impostata all'interno di, ad esempio un "div" o "tavola". L'imbottitura dà il tag h1 po 'di respiro in più. Il background-color imposta il colore intorno al testo.
3 Creare un triangolare "dopo" pseudo-elemento da aggiungere al vostro tag di intestazione. Il "dopo" pseudo-elemento è nuovo in CSS3 e permette di posizionare un elemento subito dopo un altro. Rendere un triangolo modificando più di uno dei suoi confini a trasparente. Il tuo markup dopo il tag <h1> sarebbe ora simile a questa:
H1: dopo
{
position: absolute;
left: 0;
top: 100%;
border-width: 10px 10px;
border-style: solido;
border-color: # 666 # 666 trasparente trasparente;
}
La posizione e lo stile di sinistra imposta il triangolo in basso a sinistra dell'elemento h1. Gli stili bordo superiore e impostare la dimensione del triangolo. Lo stile border-color rende il blocco appare come un triangolo e il confine-colori che appaiono più scuri del colore della testata, creando un effetto 3D, come se il blocco intestazione è nettamente piegando indietro come un nastro.
4 Aggiungere più effetti con elementi triangolari per completare il look del nastro della vostra testata. Posizionare questi ultimi triangoli all'inizio della intestazione e alla fine, in modo che il nastro ha un aspetto a bandiera. Il tuo CSS mark-up appare ora in tutta come:
h1
{
position: absolute;
width: 20%;
padding: 10px;
background-color: # 999;
}
H1: dopo
{
position: absolute;
sinistra: 0px;
top: 100%;
border-width: 10px 10px;
border-style: solido;
border-color: # 666 # 666 trasparente trasparente;
}
H1: prima
{
position: absolute;
a destra: 0px;
top: 0px;
border-color: #fff trasparente trasparente trasparente;
}
H1: prima
{
position: absolute;
sinistra: -30px;
top: 12px;
border-width: 20px 10px;
border-color: # 999 # 999 # 999 trasparente;
}
Il primo ": prima di" elemento crea un flag effetto sul lato destro dell'intestazione. La seconda ": prima di" elemento crea uno stile bandiera sulla sinistra caduto lato della testata.