Immagini gioca un grande ruolo nel web design. Immagini sono incorporate all'interno di un documento web, utilizzati come sfondo e migliorati per la navigazione. Senza linguaggi di scripting come JavaScript o programmi interattivi come Adobe Flash, le opzioni di effetti sono limitate. È possibile applicare alcuni effetti di stile semplice con l'uso HTML e CSS.

HTML e CSS

Hyper Text Markup Language (HTML) è un linguaggio di creazione comune utilizzato dai programmatori web per creare semplici siti Web. Fornisce la struttura di una pagina Web. Mentre HTML è bravo a creare una cornice di filo per il vostro progetto di Internet, non è buona per l'aggiunta di effetti o stile. Cascading Style Sheet (CSS) pagine integrano HTML e consentono agli utenti di aggiungere elementi di grafica e stile in tutto un sito Web. Ad esempio, se si desidera formattare tutto il testo di intestazione in grassetto in ogni pagina in tutto il tuo sito Web, si potrebbe fare questo con i CSS.

Immagine opacità

Uno degli effetti grafici più comuni è l'opacità. L'opacità determina come trasparente è un'immagine nel documento. Se si voleva inserire un'immagine di sfondo sulla tua pagina Web, ma necessarie per ridurre l'opacità per creare un effetto più vedere-attraverso, si potrebbe fare questo con i CSS. Inserire il codice CSS nel tag < img > HTML:

< img width = "150" height = "113" alt = "yourpicture" style="opacity:0.5;filter:alpha(opacity=50)" / >

In questo esempio, è stato definito l'opacità a "50", che ha ridotto la visibilità di immagini sulla pagina Web di metà.

Mouse sopra

Potete prendere il passaggio singolo effetto Opacità ulteriormente e modificare l'opacità di una foto quando il cursore dell'utente passa sopra esso. Si tratta di un effetto del passaggio del mouse. Il codice è simile a un cambiamento di opacità semplice e inoltre è situato all'interno del tag HTML < img >. Si tratta di un buon effetto da utilizzare per i pulsanti di navigazione.

< img style="opacity:0.5;filter:alpha(opacity=50)"

onmouseover="this.Style.Opacity=1;this.filters.Alpha.Opacity=100"

onmouseout="this.Style.Opacity=0.5;this.filters.Alpha.Opacity=50" / >

Potete vedere i comandi "onmouseover" e "onmouseout". Questo codice sarà ridurre l'opacità dell'immagine 50 per cento quando la prima viene caricata la pagina, volontà e aumentarla al 100% quando il mouse sopra l'immagine poi ridurlo al 50 per cento quando il cursore nell'immagine.

Galleggiante

Float è un altro semplice HTML e CSS foto effetto. Galleggiante definisce dove verrà visualizzata un'immagine all'interno di una tabella, la cella o il documento. Il comando fluttuante utilizza la proprietà sinistra, destra e centro. È possibile utilizzare questo sia per posizionare un'immagine all'interno del testo o per creare correttamente una serie di immagini importate in una galleria. Si definirebbe questo all'interno del tag HTML < head > come segue:

< head >

< style type = "text/css" >

IMG

{

float: left;

}

< / stile >

< / head >

Nell'esempio precedente, hai indicato che piacerebbe avere tutti gli elementi HTML con il tag < img > a galleggiare verso sinistra nel documento.