Vedremo diversi modi per fare una ombreggiatura effetto di utilizzare fogli di stile CSS.
Ho trovato 3 diversi metodi per fare una ombra. Sono come segue, vedremo commentato questo articolo:
- Metodo background-color
- Metodo canale Alpha
- Metodo tratto immagine
- Metodo Colore di sfondo
Questo metodo è molto semplice. Si basa nella definizione di tre caselle spostato, con diversi colori di sfondo. Gli elementi con classe "sfocatura" e "ombra" sarà definito con toni grisáceos per creare l'effetto di ombreggiatura.
HTML:
Codice: <div class="blur">
<div class="shadow">
<div class="content"> blah blah </ DIV>
</ DIV>
</ DIV>
CSS Codice:
. Sfocatura (
background-color: # ccc; / * ombra di colore * /
color: inherit;
margin-left: 4px;
margin-top: 4px;
)
. Ombra,
. Contenuto (
posizione: relativo;
Bottom: 2px;
Destra: 2px;
)
. Shadow (
background-color: # 666; / * ombra di colore * /
color: inherit;
)
. Contenuto (
background-color: # fff; / * colore di sfondo del contenuto * /
color: # 000; / * colore del testo contenuto * /
border: 1px solid # 000; / * Colore del bordo * /
padding: .5 em 2EX;
)
L'unico svantaggio di questo metodo è che esso utilizza colori definiti per le ombre e questo può portare a non essere in grado di mescolare questo effetto con altri elementi. Con uno sfondo bianco, grigio ombre nella forma, ma dire se il fondo della pagina è stata rosso. Così l'effetto di ombreggiatura dovrebbe essere fatto scuro con sfumature di rosso.
Possiamo vedere l'esempio in funzione in una pagina separata.
Metodo canale Alpha
Questo metodo è molto simile ai precedenti, ma risolve il problema della miscelato con altri elementi. Non importa ciò che in fondo alla pagina in cui viene visualizzata l'ombreggiatura elemento, anche se l'ombreggiatura è fatto sulla stessa pagina sui singoli fondi. Utilizzare immagini di sfondo in formato PNG "alfa trasparente", invece di colori definiti nel foglio di stile.
Il codice HTML necessario è lo stesso che per l'esempio precedente, semplicemente cambiando il codice CSS, in particolare per le categorie "sfocatura" e "ombra". Siamo mostra il codice CSS per questo esempio.
Codice: <style type=text/css>
. Sfocatura (
background: url trasparente (shadow1.png);
/ * Percorso per l'80% 1x1 pixel trasparente di colore nero * /
color: inherit;
margin-left: 4px;
margin-top: 4px;
)
. Shadow (
background: url trasparente (shadow2.png);
/ * Percorso per il 60%-trasparente di colore nero 1x1pixel * /
color: inherit;
)
. Ombra,
. Contenuto (
posizione: relativo;
Bottom: 2px;
Destra: 2px;
)
. Contenuto (
background-color: # fff; / * colore di sfondo del contenuto * /
color: # 000; / * colore del testo contenuto * /
border: 1px solid # 000; / * Colore del bordo * /
padding: .5 em 2EX;
)
</ Style>
Per testare il vantaggio di tale fondo, siamo in grado di cambiare il colore di sfondo del sito e vedremo come l'ombra anche cambia colore.
Le due immagini di 1x1 pixel trasparente la metà sono tenuti a comporre questo esempio qui:
Fare clic per scaricare le immagini-transparentes.zip
Possiamo vedere l'esempio in funzione in una pagina separata.
Metodo tratto immagine
Penso che i due metodi precedenti non sono troppo bene, perché l'ombra non sembra del tutto naturale. In altre parole, non è sufficientemente realistico. Così ho aperto il mio editore, a creare una scatola rettangolare con l'effetto di ombra e esportati in un'immagine. Eventualmente possibile utilizzare questa immagine per creare l'effetto di ombra.
Il codice HTML pilota
Codice: <div class="shade">
src = "shadow.png" width = "0" height = "0" <img alt="" /> class = "ombra"
blah blah </ DIV>
Il codice CSS pilota
img.shade (
larghezza: 37ex;
Altezza: 9eme;
/ * Specificare la dimensione dell 'immagine * /
display: block;
posizione: assoluta;
z-index: -1;
/ * Forza l'immagine per mostrare al di sotto del contenuto * /
Destra:-3EX;
Bottom:-1em;
)
div.shade (
larghezza: 30ex;
Altezza: 6eme;
/ * Specifica la dimensione del contenuto, leggermente inferiore rispetto l'immagine * /
posizione: relativo;
z-index: 1;
/ * Forza il contenuto di mostrare l'immagine di sopra * /
background-color: # fff;
border: 1px solid # 000;
padding: 1em 2EX;
margin-right: 6EX;
margin-bottom: 3eme;
)
Abbiamo tre svantaggi in questo metodo
Come l'immagine è allungato, essa non può essere molto piacevole.
In Mozilla Firefox immagine talvolta scompare (è possibile recuperare o spostamento di raffreddamento pagina). In Internet Explorer non viene visualizzato buon senso, almeno nella versione 6.
Il contenuto non può flottante (non siamo in grado di utilizzare l'attributo float)
Possiamo ottenere l'immagine per esempio.
Possiamo vedere in questo esempio il movimento in una pagina separata.
Un momento. Come faccio testo con ombreggiatura?
Se si utilizza un browser basato su Gecko, è possibile visualizzare un altro interessante effetto di ombreggiatura per eseguire senza utilizzare testi e immagini ridimensionate semplicemente cambiando la dimensione del testo, o le fonti, che utilizza il browser (con il menu vista> la dimensione del testo> aumento / diminuzione).
Il codice HTML sarebbe la seguente:
Codice: <span id="text"> ombreggiato testo </ span>
Il codice CSS
# (Testo
font-size: 3eme; / * facoltativo. solo per aumentare la dimensione del carattere. * /
display: block;
line-height: 1em;
color: # 666; / * ombra di colore * /
background-color: trasparente;
spazi bianchi: NoWrap; / * confezionamento rompe l'effetto * /
)
# Testo: Prima,
# Testo: dopo (
contenuto: "Testo ombreggiatura" / * Lo stesso testo che vogliamo mostrare ombreggiatura * /
display: block;
)
# Testo: Prima (
margin-bottom:-1.05em;
margin-left: 0.1ex;
color: # ccc; / * ombra di colore * /
background-color: trasparente;
)
# Testo: dopo (
margin-top:-1.05em;
margin-left:-0.1ex;
color: # fff; / * colore del testo * /
background-color: trasparente;
)
Questo effetto può essere utile in questo momento. Tuttavia, le specifiche del CSS2 includono una proprietà di testo chiamato CSS-ombra, che serve a definire un effetto ombra di un testo. Tuttavia, la maggior parte dei browser ancora non supportano questa proprietà. |
