| Scheda Tecnica del Manuale
Titolo: 4/G - Effetti delle immagini
Contenuto: 10 effetti diversi in codice CSS per le immagini
Numero Foto: 11
Numero codici Html: 10
Articoli correlati: Prefazione Manuale 4: Potenziare immagini & grafica
Topic: Potenziamento della grafica del blog
Autore: Vincenzo Longo
Copyright:
In questo manuale vi fornisco i codici in CSS per modificare le vostre foto e attribuire alle immagini molteplici effetti, utilizzando i filtri del linguaggio CSS.
L'immagine sulla quale ho applicato gli effetti è lo scudetto dell'Inter, che vi viene mostrata di seguito nel suo stato originale e predefinito
Di seguito vi elenco i codici Css con le relative dimostrazioni degli effetti creati mediante la loro applicazione:
Immagine illuminata a sinistra
<IMG style="FILTER: alpha(Opacity=100, FinishOpacity=0, Style=1)" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine illuminata a destra
<IMG style="FILTER: alpha(Opacity=0, FinishOpacity=100, Style=1)" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine illuminata all'esterno
<IMG style="FILTER: alpha(Opacity=0, FinishOpacity=100, Style=3)" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine illuminata al centro
<IMG style="FILTER: alpha(Opacity=100, FinishOpacity=0, Style=2)" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine con il punto nero al centro
<IMG style="FILTER: alpha(Opacity=0, FinishOpacity=100, Style=2)" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine opaca
<IMG style="FILTER: alpha(Opacity=50, FinishOpacity=0, Style=0)" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL height=NUM PIXEL>
Immagine ruotata da sinistra a destra
<IMG style="FILTER: flipH" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine ruotata dall'alto al basso
<IMG style="FILTER: flipV" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Immagine con effetto onda
<IMG style="FILTER: Wave(freq=5,strength=12,lightstrength=5,phase=0)" height=NUM PIXEL src="URL IMMAGINE" width=NUM PIXEL>
Immagine con effetto raggi X
<IMG style="FILTER: xray" height=NUM PIXEL src="URL DELL'IMMAGINE" width=NUM PIXEL>
Come si inserisce il codice CSS?
Per inserire uno dei codici, proposti in questo manuale, in un nuovo intervento, dovete cliccare su <HTML>, che si trova sulla barra degli strumenti a destra; di conseguenza copiate il codice e incollatelo nella pagina bianca tra i due tags <DIV> e </DIV>.
Come si compila il codice CSS?
Per compilare uno dei codici proposti, bisogna prendere in considerazione le seguenti stringhe: Height=NUM PIXEL; Width=NUM PIXEL e src="URL DELL'IMMAGINE".
Al posto della voce 'URL DELL'IMMAGINE' dovete inserire l'url oppure il link della vostra foto, in quanto deve trovarsi in rete. Se volete inserire un'immagine che è salvata sul vostro Pc, cliccate QUI per caricarla in rete e ottenere il suo URL.
Invece per quanto riguarda le stringhe Height e Width, al posto della voce 'NUM PIXEL' dovete inserire i valori dell'immagine, relativi all'altezza e alla larghezza.
Per ottenere questi attributi vi basta cliccare con il tasto destro sull'immagine e andare su 'Proprietà'.
In caso di problemi:
- vincenzothebest@altervista.org --- Otterrai una risposta entro 24 ore
- http://vincenzolongo.forumfree.net/ --- Otterrai una risposta entro 1-2 ore
Se avete qualsiasi tipo di problema inviate una mail oppure iscrivetevi al forum anzichè lasciare commenti, in quanto raramente ho la possibilità di venire nel vostro blog e rispondervi con coerenza e precisione.
Sponsor:
- Vincenzo the Best Web --- http://vincenzothebest.altervista.org/
- Vincenzo the Best Forum --- http://vincenzolongo.forumfree.net/
- Vincenzo the Best Live Space --- http://vincenzolongo.spaces.live.com/
Se i manuali e i servizi offerti soddisfano le vostre richieste, vi chiedo di ripagare il mio lavoro inserendo uno dei tre link proposti sopra in un elenco del vostro blog.
|