April 23
Blog contenute all'interno dei confini sono comuni su Internet, e spesso hanno effetti visivi come gli angoli arrotondati, gradienti e bordi ombra. Creazione di un bordo ombreggiato usato per prendere un sacco di lavoro, che coinvolge la creazione di immagini in Photoshop, tagliare le immagini e la scrittura di codice complicato per metterli intorno al bordo. Utilizzando la proprietà "box-shadow" in CSS di livello 3 (CSS3) è possibile aggiungere un bordo in ombra in una sola riga di codice CSS.
1 Aprire il file template principale del tuo blog in un editor di testo o un editor di codice. Trovare il "<div>" o "<section>" tag che circondano il corpo del tuo blog:
<Div id = "blog_wrapper">
Tutti i contenuti del blog qui ...
</ Div>
Ottenere il nome ID del tag o aggiungerne uno, come mostrato in precedenza.
2 Aprire il foglio di stile per il tuo blog. Nella parte inferiore del codice del foglio di stile creare una nuova regola di stile che gli obiettivi tag di avvolgimento del blog con il loro nome ID:
blog_wrapper {
}
3 Aggiungere la proprietà "box-shadow" per la nuova regola di stile. La struttura, crea ombre e può anche fare incandescente colore o un bordo in ombra:
blog_wrapper {
box-shadow: 0px 0px 10px nero;
}
Impostando i primi due valori - sinistra e top offset - ti dicono al browser di centrare l'ombra dietro il blog. Il terzo valore rappresenta la quantità di sfocatura aggiunto all'ombra con grandi numeri che indicano una maggiore sfocatura.
4 Change "nero" per un RGBA (Rosso, Verde, Blu e Alfa) codice di colore:
blog_wrapper {
box-shadow: 0px 0px 10px rgba (0,0,0,0.3);
}
L'esempio sopra mostra un codice di RGBA per il nero in trasparenza il 30 per cento. I primi tre valori in RGBA corrispondono valori di rosso, verde e blu. L'ultimo valore varia da zero a uno in decimali e imposta il livello di trasparenza, con zero è invisibile e uno è opaco.