Compatibilità:

# For IE we can set: this.filters.alpha.opacity=50
# For Mozilla we set: this.style.MozOpacity=0.5

<img
src="data/thumbs/Art/ponte.jpg.jpg"
width="105" height="140"
alt="solar-radar (7K)"
style="-moz-opacity:0.5; filter:alpha(opacity=50); cursor:hand"
onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50"
>

Al passaggio del mouse l'immagine si "illumina".

CSS Transparency for Internet Explorer (IE), Mozilla and Safari.

<style type="text/css">
<!--
/* This is the background image */

div.prova {
padding:20px;
background: url(albums/Art/elfo.jpg);
border: 2px solid blue;}

/* This is the transparent box 50% */
div.prova0 {
width: 300px;
border: 2px solid blue;

background-color: #fff;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}

-->
</style>

Ecco un esempio:
<div class="prova">
<div class="prova0">
50% Lorem ipsum dolor sit amet, consectetuer adipiscing etc. etc.
</div>

</div>

Produrrà una cosa di questo tipo:


ATTENZIONE!: Potrebbero esserci incompatibilità con alcuni browser.

In questo articolo vedremo come realizzare un elenco di link con effetto rollover utilizzando i fogli di stile css. Un elenco di link di questo tipo risulta particolarmente adatto per essere utilizzato come menu di navigazione per un sito web.

Il codice html per l'elenco di links sarà di questo tipo:

<DIV ID="navmenu">
<UL>
<LI><A href="#">Home</A></LI>
<LI><A href="#">Html</A></LI>
<LI><A href="#">How To</A></LI>
<LI><A href="#">Link</A></LI>
<LI><A href="#">Tips</A></LI>
</UL>
</DIV>

Il foglio di stile associato sarà:

<STYLE TYPE="text/css">
#navmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

#navmenu a
{
display: block;
color: #000066;
background-color: transparent;
width: 100px;
padding: 2px 8px;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
}

#navmenu a:hover
{
background-color: #003399;
color: #FFFFFF;
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

#navmenu li { margin-bottom: 2px; }
</STYLE>

Ed ecco l'effeo ottenuto con questo esempio:


Senza il foglio di stille CSS l'elenco di links si presenterà così:

• Home
• Html
• How To
• Link
• Tips

Vediamo come creare una interfaccia di questo tipo con l'uso del CSS.



Il foglio di stile associato è questo:

<style type="text/css">
<!--
/* Tabbed example */

div.tabs {
min-height: 7em;
position: relative;
line-height: 1;
z-index: 0}

div.tabs > div {
display: inline}

div.tabs > div > a {
color: black;
background: #CCC;
padding: 0.2em;
border: 0.1em outset #BBB;
border-bottom: 0.1em solid #CCC}

div.tabs > div:not(:target) > a {
border-bottom: none;
background: #999}

div.tabs > div:target > a,

:target #default2 > a {
border-bottom: 0.1em solid #CCC;
background: #CCC}

div.tabs > div > div {
background: #CCC;
z-index: -2;
left: 0; top: 1.3em;
bottom: 0; right: 0;
overflow: auto;
padding: 0.3em;
border: 0.1em outset #BBB}

div.tabs > div:not(:target) > div {
position: absolute }

div.tabs > div:target > div, :target #default2 > div {
position: absolute;
z-index: -1}

--></style>

Le righe di codice html sono queste:

<div class=example>
<div class=tabs>
<div id=tab1>
<a href="#tab1">Tab 1</a>
<div>One might well argue, that...</div>
</div>
<div id=tab2>
<a href="#tab2">Tab 2</a>

<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id=tab3>
<a href="#tab3">Tab 3</a>
<div>... that 2 should have been enough, but...</div>
</div>
<div id=default2>

<a href="#default2">Default</a>
<div>... it works!</div>
</div>
</div>
</div>