Come rendere trasparente un div?
Rendere semi-trasparente un blocco con i soli css è al momento possibile con due classi, come si può vedere in questa demo, a patto di perdere la validazione.
Supponiamo quindi di avere:
<ul id=”menu”>
<li><a href=”">Prova li link</a></li>
<li><a href=”">Prova li link</a></li>
<li><a href=”">Prova li link</a></li>
<li><a href=”">Prova li link</a></li>
</ul>
Adesso si ha un menù nudo e crudo.
Aggiungendo invece queste due classi css:
#menu li a
{
filter:alpha(opacity=”50″);
opacity: 0.5;
background-color: #ddaf86;
text-transform: uppercase;
padding:6px 15px;
text-decoration: none;
color: #121212;
float:left;
border-left: 1px solid #813D22;
border-right: 1px solid #fff;
}#menu li a:hover
{
filter:alpha(opacity=”100″);
-moz-opacity: 1.0;
opacity: 1.0;
background-color: #ab815b;
color:#121212;
}
In questo modo (ho aggiunto vari tag di stile solo per far capire bene l’effetto), con le classi filter:alpha (per internet explorer) e opacity (tutti gli altri browser) si ottiene la trasparenza. Sta ovviamente a voi decidere in che modo usarlo, anche se il mio consiglio è di usare un css separato, così la validazione degli altri css rimane intatta.
L'Autore
Architetto dell'Informazione presso uno società di webdesign, ho sviluppato nel tempo conoscenze in interaction design e user centered design che cerco di condividere con gli utenti di ItalianWebDesign.
Add to Google
4 Commenti
mm, su safari appare tutto rotto il menu
Si, in realtà anche su ie, non ciò fatto molto caso alla sistemazione dei blocchi, o che si vedessero bene, ho controllato solo la trasparenza
sì ma non sono proprietà css valide
io l’avevo usato per il mio sito… poi ho rimosso perché preferivo la gloria di un css valido allo stile
Il menu si scassa perchè il float è sul tag a invece che sull’li e l’assenza del display inline compromette la visualizzazione in ie. Bisogna considerare che è un’esempio sull’opacità non sui menu, mancano anche margin:0 e padding:0 per ul ed li ma sinceramente credo che lo scopo fosse quello di mostrare le funzionalità della trasparenza in crossbrowser. Sugerisco oltre a tenere il css separato per la validazione (che mi sembra un ottimo consiglio) di tenere sempre presenti i colori di bg e del testo per garantire la leggibilità con trasparenza e non.