Sito Con Box Trasparenti

[iron guardian]

Salve a tutti, ho da poco finito di realizzare il mio primo sito (vedi firma) e come potete ben vedere non è proprio il massimo, quindi volevo migliorarlo un po'(anzi molto ).
Il mio problema è questo:
Mi piacerebbe mettere i contenuti all'interno di box( qualsiasi forma va bene, ad esempio rettangoli con angoli smussati) e fare in modo che questi box siano semi-trasparenti in modo da intravedere lo sfondo della pagina.
Con i strumenti che ho a mia disposizione ovvero Dreamweaver, Flash, fireworks eccetera ho capito che ci sono molti modi per raggiungere il mio obbiettivo ma essendo alle primissime armi, non ci cavo un ragno dal buco.

Ho provato a fare un rettangolo colorato sia con Flash che con Fireworks ma non riesco a dargli la "trasparenza" e quando lo "appiccico" sulla pagina con Dreamweaver non si intravede lo sfondo.

Spero di avervi spiegato il mio problema ( anzi i miei problemi )
Vi prego datemi una mano, accetto di tutto:consigli, guide, tutorial(anche insulti se volete).
Mi sto appassionando da morire a questo fantastico mondo e ho veramente tanta voglia di imparare ma non so da dove cominciare, conosco l'HTML abbastanza bene ma per la grafica sono un disastro.

Spero di non avervi annoiato.

Un saluto da Alessio.

[Fortebraccio]

guarda questa discussione per le tabelle grafiche:
http://forum.html.it/forum/showthrea...hlight=tabelle

IExplorer non supporta il PNG 24 che è il formato per le semitrasparenze, per cui abbandonerei quest'idea

[iron guardian]

Ciao Fortebraccio e grazie di avermi risposto.
Ho letto le varie discussioni ma avrei bisogno di qualche aiuto in più.
Ti spiego:

- Con Fireworks ho fatto un rettangolo con angoli smussati e un riempimento con sfumatura lineare dal bianco verso il nero,

- ho tolto la canvas in eccesso premendo sul bottone "fit canvas" ( dimmi se è questo che intendevi).

- ho creato dentro a questo rettangolo un area per inserire il testo con lo strumento "slice tools" ed in pratica ho visto che mi divide l'oggetto in varie parti,

- ho salvato come ,dici tu, con HTML e immagini e ho aperto dreamweaver.

- ORA: come deve essere la tabella sulla mia pagina web che conterrà l'oggetto creato prima ? quali dimensioni?
Ad esempio nella cella centrale ho incollato l'immagine relativa all'area di testo, ma questa non mi riempie tutta la cella e di conseguenza non c'è continuità con le altre immagini incollate sulle altre celle.

Ti prego dammi più iondicazioni che puoi.

A presto, ciao.

[Fortebraccio]

l'idea di adoperare un riempimento lineare sfumato per riempire il rettangolo non va bene perché poi ne compromette l'allungamento, devi usare un colore uniforme.
Per maggiori spiegazioni guarda qui, dove è anche segnalato l'ottimo tutorial in inglese originale di www.ultraweaver.com:
http://forum.html.it/forum/showthrea...hreadid=347114

[appio79]

se ho ben capito cosa cerchi potrebbe anche esserti utile l'effetto di trasparenza sui layer...
crei due layer identici sovrapposti. al primo imposti:

z-index:1

ed al secondo

z-index:2

e sempre al primo imposti un colore di sfondo e un'effetto trasparenza tramite:

 filter: alpha(opacity=50); -moz-opacity:0.5;

sono necessari entrambi perchè il primo occorre per una corretta visualizzazione in IE ed il secondo in mozilla
poi poni gli oggetti che preferisci (testo, immagini, ecc.) nel layer con z-index=2.
in questo modo il colore del primo layer sarà in trasparenza sullo sfondo della pagina nel quale è impostato il layer mentre gli oggetti sul secondo layer avranno una normale opacità al 100%...

ti posto un esempio su una pagina che ho fatto:

[iron guardian]

Ciao e grazie del consiglio, ma non ho capito bene un cosa:
I livelli intendi quelli di Fireworks o su Dreamweaver?

[appio79]

dreamweaver o qualunque cosa usi per scrivere html
ci dovrebbero essere dei tutorials proprio su html.it se non ricordo male, comunque in google trovi senz'altro tutto il materiale a riguardo

[Elena7]

Ciao appio79,

ho letto il tuo post sulla trasparenza ed e' proprio quello che serve a me.

sto cercando di ricreare l'effetto che descrivi tu, ovvero una foto colorata di sfondo e un rettangolo sopra ( un box xon i css) bianco con trasparenza 80-90 % che mi lascia intravedere lo sfondo leggermente sotto e che allo steso tempo mi dia la possibilita' di scriverci del testo sopra.

Ho provato come suggerisci tu a mettere 2 livelli cosi:

body {
background:url(./images/quadro.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#contenitore {
position: relative;
top: 50%;
left: 50%;
width: 750px;
height: 400px;
margin-left: -375px;
margin-top: -200px;
text-align: center;
}

#contenuto {
position:relative;
background-color:#fff;
filter: alpha(opacity=50); -moz-opacity:0.5;
z-index:1;
}

#contenutotrasparente{
position:relative;
z-index:2;
}

#contenutotrasparente p {
text-align: center;
line-height: 18pt;
font-size: 16px;
}
...


e poi nel body:
<div id="contenitore">
<div id="contenuto">
<div id="contenutotrasparente">
...
</div>
</div>
</div>

MA IL RETTANGOLO LO VEDO SEMPRE BIANCO E NON SFUMATO.....come mai?????

puoi vedere la mia pagina di prova in www.mariateresaviaroli.it/trasparenza.html

ciao&grazie!!

elena7

[ALFABreezE]

A). Il giorno che vi deciderete TUTTI a buttare nel cesso Exploder non sarà mai troppo tardi.
B). Su Mac con Netscape si vede bene. Con Safari il layer è bianco-opaco, mentre con Firefox il layer è trasparente, ma l'impaginazione è scombinata.
C). Non capisco (proprio nel senso che "non capisco") perché il filtro "alpha" debba essere inserito nel layer 'opaco'(z=1) invece che in quello trasparente (z=2).

Non so una mazza di Css, ma hai provato a fare il contrario?

cià
ale

[Elena7]

Sono d'accordo con te ALFABreezE, ma il problema e' che IE e' veramente molto - tanto- forse troppo diffuso e fare un sito che non sia ben visibile in questo broswer e' decisamente un suicidio...e credo che tu sia d'accordo con me in questo.

Ho visto con netscape la pagina ed e' esattamente come la voglio io la trasparenza della pagina ( e vedere che li si puo' fare mi fa ancora piu' arrabbiare), pero' e' sbagliata l'impaginazione, se la guardi prima con Ie e poi con Netscape ti accorgi della differenza, ma sono sicura che quello dipenda dal modo che ho usato per centrare verticalemente e orizzontalmente il rettangolo che dovrebbe essere trasparente.

Comunque ho provato ad invertire il livello con la trasparenza e non cambia nulla con IE.

..ma non mi arrendo ...ci deve essere un modo per fare un livello trasparente!!!

ciao & grazie
elena7