menu in trasparenza

[vcarpini]

salve ragazzi ho un problema per il quale ho già postato ma che non ho risolto (colpa sicuramente della mia inesperienza!)

Comunque devo realizzare un menu con una barra blu e testo in orizzontale e verticale che faccia intravedere in trasparenza lo sfondo del mio documento html (sfondo di sassi) . Ho provato con fireworks ma non riesco a dare la trasparenza (circa un 60%) alla barra blu. Qualcuno può darmi qualche dritta?!

Allego un file con il progettino di quello che vorrei realizzare. Lo sfondo dei sassi è lo sfondo del mio documento html che realizzo in dreamweaver.

Grazie!!!

[fcaldera]

crea un elemento blocco che abbia un file png semitrasparente e del colore desiderato come sfondo

Per rendere la cosa compatibile anche su IE6 ti basta usare l'apposito filter

(nel forum ci sono molte discussioni sulle png, una ricerca può aiutarti)

[vcarpini]

beh...grazie ma potresti dirmi come si fa ad usare questo filter?! cioè posso fare il menu (barra blu e testo) tutto da fireworks e poi dare lo sfondo-sassi al documento html?

scusa ma non sono tanto esperta...comunque cercherò ancora sul forum...grazie!

[chipdb]

Secondo il mio parere, ti conviene invece fare l'immagine con tutte le trasparenze che ti pare in fireworks, paintshop pro, photoshop o quello che vuoi. Poi ti consiglio di usare photoshop per suddividere l'immagine in blocchi (sfondo, menu, centro, header, footer ecc) e poi salvare le varie parti in immagini differenti (File -> Salva per Web). Poi costruisci il css su misura in base a come hai organizzato il layout del sito. In questo modo tu hai tutti gli effetti di trasparenza e completa accessibilità da tutti i browser del mondo.

[vcarpini]

grazie mille per le dritte.
Spero tanto di riuscirci perchè sono una vera frana.....

[fcaldera]

Originariamente inviato da vcarpini
beh...grazie ma potresti dirmi come si fa ad usare questo filter?! cioè posso fare il menu (barra blu e testo) tutto da fireworks e poi dare lo sfondo-sassi al documento html?

scusa ma non sono tanto esperta...comunque cercherò ancora sul forum...grazie!

Non so come funziona fireworks per cui posso solo suggerirti come modificare il codice css della tua pagina e ciò implica che tu sappia mettere mano direttamente al codice

1) crea un immagine png con photoshop del colore e trasparenza desiderate (basta un immagine piccola ad es.100x100 che poi ripeti con background-repeat)
2) inserisci un elemento blocco (un <div>) a cui imposti larghezza e altezza e il file png come background
3) fai una ricerca su questo forum ('png explorer' oppure 'alphaimageloader') e trovi molte discussioni che ti spiegano come risolvere per IE6
4) il risultato finale è visibile ad esempio qui: http://www.fabriziocalderan.it/bg_png/bg2.html: puoi copiare il codice base che ho usato io e adattarlo secondo le tue esigenze.

[vcarpini]

grazie mille....stasera ci provo!

[chipdb]

Originariamente inviato da fcaldera
1) crea un immagine png con photoshop del colore e trasparenza desiderate (basta un immagine piccola ad es.100x100 che poi ripeti con background-repeat)

Non vorrei dire, ma questo non comporta un peso maggiore della pagina visto che un png trasparente pesa molto di più dell'intera jpg, soprattutto se è un'immagine multicolore?

[fcaldera]

Originariamente inviato da chipdb
Non vorrei dire, ma questo non comporta un peso maggiore della pagina visto che un png trasparente pesa molto di più dell'intera jpg, soprattutto se è un'immagine multicolore?

Dipende.

Se lo sfondo con i sassi tende a cambiare periodicamente potrebbe essere una scelta separare l'immagine vera e propria dall'effetto trasparenza, altrimenti conviene ritagliare l'immagine così com 'è.

Ma se includessi sassi e trasparenza in un unica immagine, al ridimensionamento del testo, questo potrebbe debordare e oltrepassare la trasparenza.

Dal mio punto di vista dovendo già avere uno sfondo jpeg (grande in termini di peso) con i sassi, non peggioro significativamente le performance aggiungendo una png da 3kb che mi dà per contro la possibilità di avere una modularità maggiore.

Poi ovviamente ognuno fa le proprie considerazioni e sceglie di conseguenza.