livelli obliqui

[maurizio54]

Sapete indicarmi come fare quei livelli che appaiono su di una pagina e che sembrano essere obliqui? Sono cioè livelli che contengono immagini .gif, .png con trasparenze e sono essi stessi trasparenti in modo che la dove l'immagine è trasparente si vede il testo al di sotto del livello che la contiene

[Francis87]

beh, le immagini devi procurartele a seconda delle tue necessità.
per quanto riguarda lo sfondo trasparente puoi usare il colore transparent nello stile:

div {
 background-color: transparent;
}

ma ricorda che un div è sempre rettangolare...

[Vincent.Zeno]

...anch'io no capisco la faccenda degli "obliqui".
Puoi postare un'esempio?

[maurizio54]

Un esempio è qui ma si visualizza solo alcune volte, a caso
http://www.stylusstudio.com/learn_xml.html

[Vincent.Zeno]

Ecco il livello "obliquo"!

[maurizio54]

L'immagine è questa, ma la particolarità sta nel fatto che sotto le aree grige si vede il testo della pagina su cui si dispone la sfumatura dell'ombra dell'immagine. Come si fa?

[Vincent.Zeno]

con un programma di grafica: "effetto trasparenza"

[maurizio54]

Quello che non so fare non è la costruzione dell'immagine .png con trasparenza, ma la sua collocazione su di un livello che sia esso stesso rtrasparente

[Vincent.Zeno]

A me sembra che questa immagine sia lo sfondo di un div; e sopra, l'immagine "reale" sia un px denomitato y.gif, che è poi quello che realmente a l'attributo "link".
Vedi il codice:

function displayPOP(top, lft, link) {
 if (pngAlpha) {
  document.write('  <div id="popwin" style="position:absolute; width:348px; height:364px; z-index:1; left:'+lft+'px; top:'+top+'px">');
  document.write('    <div id="popwin3" style="position:absolute; width:348px; height:364px; z-index:3; left: 0; top: 0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/images/popup/message.png\',sizingMethod=\'scale\');"></div>');
  document.write('    <div id="popwin4" style="position:absolute; width:348px; height:364px; z-index:4; left: 0; top: 0;">[img]/images/popup/y.gif[/img]</div>');
  document.write('    <div id="popwin5" style="position:absolute; width:56px; height:15px; z-index:5; left: 242px; top: 32px;">[img]/images/popup/x.gif[/img]</div>');
  document.write('  </div>');
	} else {
  document.write('  <div id="popwin" style="position:absolute; width:348px; height:364px; z-index:1; left:'+lft+'px; top:'+top+'px;">');
  document.write('    <div id="popwin3" style="position:absolute; width:348px; height:364px; z-index:3; left: 0; top: 0;">[img]/images/popup/message.png[/img]</div>');
  document.write('    <div id="popwin4" style="position:absolute; width:348px; height:364px; z-index:4; left: 0; top: 0;">[img]/images/popup/y.gif[/img]</div>');
  document.write('    <div id="popwin5" style="position:absolute; width:56px; height:15px; z-index:5; left: 242px; top: 32px;">[img]/images/popup/x.gif[/img]</div>');
  document.write('  </div>');
	} 
}

[maurizio54]

Penso tu abbia ragioen, ma non c'è un modo più semplice per visualizzare una immagine con trasparenze su di un livello trasparente?