Play With Images

ora vi spiegherò qualche trucchetto utile per abbellire ulteriormente le nostre immagini che mettiamo nel blog…

 
Innanzitutto dobbiamo avere l’URL dell’immagine…
 
Se l’immagine è già su internet per avere l’URL basta sapere il suo indirizzo…cliccando con il tastro destro sull’immagine, andando su "Proprietà" e copiando ciò che c’è dopo la voce "URL"…
 
Se l’immagine che volete utilizzare è sul vostro Pc…Usa il Blog oppure usia il sito  per fare l’upload di un’immagine…Terminato l’upload il sito ci fornisce una serie di codici dei quali quello che a noi interessa è l’ultimo della lista…
Se non hai capito come si usa il sito consulta la mia >> Guida su imageshack <<
 
Ok..ora passiamo alle applicazioni..
 

 

Text on Images

Per inserire del testo sopra un’immagine aprite un nuovo intervento, cliccate sul pulsante <HTML> e all’interno incollate il seguente codice..
 
<div style="width: 150; height: 205" align=right>
<IMG src="Picture URL" align=right>
<div style="float: right; WIDTH: 406px; HEIGHT: 304px" align=center>
<p align="center"><font face="Times New Roman">TEXT</font>
</div>
 
Al posto della scritta Picture URL inseriamo l’URL della nostra immagine, come spiegato in precedenza.
 
I valori scritti in blu possono essere modificati a piacere…
 
Per quanto riguarda il valore "font face" al posto di Times New Roman possiamo utilizzare altri stili di scrittura come Verdana, Tahoma, Arial, Arial Black, Garamond, Lucida Handwriting e Courier New.
 
Finito di sistemare il codice clicchiamo di nuovo su <HTML> per vedere il nostro risultato e per dare gli ultimi ritocchi…
 
Ad esempio allargare o rimpicciolire l’immagine e adattare lo spazio di scrittura sopra l’immagine a piacere.
 
Quindi pubblichiamo l’intervento!
 
 
Esempio:
 
 
E voglio scriverci sopra "Ciao a tutti da Marco"
 
Il mio codice sarà allora così:
 

<DIV align=center>

<DIV style="WIDTH: 150px; HEIGHT: 205px" align=right><IMG src="http://823.ciao.jp/photo/013_DSC-U50.jpg&quot; align=right>

<DIV align=center>

<DIV style="FLOAT: right; WIDTH: 406px; HEIGHT: 304px" align=center>

<P align=center><FONT face="Times New Roman">Ciao a tutti da Marco!</FONT> </P></DIV></DIV></DIV></DIV>

 

Ed ecco il risultato:

 

Ciao a tutti da Marco!

 

 


 
 

Opacity Filter Effects

Per poter utilizzare questo effetto per le immagini aprite un nuovo intervento, cliccate sul pulsante <HTML> e all’interno incollate il seguente codice..
 
<IMG style="filter: alpha(Opacity=100, FinishOpacity=0, Style=2)" src="Picture-URL">
 

  • Al posto della scritta Picture URL inseriamo l’URL della nostra immagine, come spiegato in precedenza.
  • La parte in Viola è il valore opacity. Cambiando questo valore cambiamo la visibilità della figura. opacity=100 sgnifica che la figura è perfettamente visibile e opacity=0 significa che l’immagine risulterà invisibile. Questo valore serve principalmente per decidere in che misura l’immagine sia nitida al centro e quanto si veda poco agli angoli. 
  • Il valore FinishOpacity ha invece funzione inversa: serve per decidere in che misura la figura sia visibile agli angoli. Se metti lo stesso numero ai valori Opacity e FinishOpacity avrai la stessa visuabilità della figura su tutta la superficie.
  • Cambiando il vadore Style, con il valore Style=1 l’immagine verrà sfumata da sinistra a destra, con il valore Style=2 verrà sfumata centralmente e con il valore Style=3 verrà sfumata agli angoli.

Esempio:

 

L’immagine base è sempre la stessa…perà voglio sfumarla agli angoli…

 

Il mio codice sarà allora così

<IMG style="filter: alpha(Opacity=100, FinishOpacity=0, Style=3)" src="http://823.ciao.jp/photo/013_DSC-U50.jpg">

 

Ed ecco il risultato

 

 


 

Possiamo naturalmente usare i due effetti descritti sopra insieme…cioè creare un’immagine sfumata con sopra una scritta…

 

Per conoscere altri effetti immagine clicca su Codici HTML. 

 

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s