|
Home -> Manuali e Tutorials -> Guida CSS -> Immagini
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
IMMAGINI CON I CSS
Sfumare un'immagine
Ho ottenuto così un'immagine sfumata al 40% e con un bordo particolare; il codice usato per la seconda img è il seguente:
<IMG SRC="img.jpg"
WIDTH="190" HEIGHT="132" BORDER=1
style="filter: Alpha(Opacity=40);
border:3px dotted width;
border-color:#999999 "> |
Realizzare una Pop-up
Sopra è mostrato un esempio di come sia possibile ottenere una pop-up di una immagine (thumbnail) semplicemente con il seguente codice CSS:
#pic {
LEFT: 30px; WIDTH: 135px; POSITION: relative; TOP: 10px; BACKGROUND-COLOR: #ffffff
}
#pic A .large {
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; LEFT: -1px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 1px; POSITION: absolute; TOP: -1px; HEIGHT: 1px; BORDER-RIGHT-WIDTH: 0px
}
#pic A IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#pic A.p1 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; BORDER-LEFT: #000000 1px solid;
WIDTH: 135px; BORDER-BOTTOM: #000000 1px solid; TOP: 0px; HEIGHT: 90px; TEXT-DECORATION: none
}
#pic A.p1:visited {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT:
0px; BORDER-LEFT: #000000 1px solid; WIDTH: 135px; BORDER-BOTTOM: #000000 1px solid; TOP: 0px; HEIGHT: 90px; TEXT-DECORATION: none
}
#pic A.p1:hover {
COLOR: #000000; BACKGROUND-COLOR: #8c97a3; TEXT-DECORATION: none
}
#pic A.p1:hover .large {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; DISPLAY: block;
LEFT: 150px; BORDER-LEFT: #000000 1px solid; WIDTH: 300px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; TOP: -60px; HEIGHT: 233px
}
|
ed HTML:
<DIV id=pic>
<A class=p1 title="thumbnail image" href="#">
<IMG title="Thumbnail image" height=90 alt="Thumbnail image" src="fig_esempi/front3tn.jpg" width=135>
<IMG class=large title="Enlarged view of image" height=233 alt="Enlarged view of image" src="fig_esempi/front3.jpg" width=350>
</A>
</DIV>
|
Immagine di Background ad un bottone
Utilizzando la proprietà background-image dei Css è possibile assegnare un'immagine di sfondo (anche animata) ad un bottone di un modulo Html.
E' consigliabile creare un'immagine su misura o dimensionare il bottone ad hoc, per evitare effetti grafici e/o stilistici indesiderati.
Di seguito un esempio ed il relativo codice CSS:
Torna su  | Indice Guida  | Pagina << 23 >>
|
