Effetto semi trasparenza colorata

[pix83]

Come è possibile fare un effetto di semi-trasparenza colorata su un'immagine???
Per spiegarmi meglio, sul sito MSN Sport (sport.msn.it/) in prima pagina c'è sempre un'immagine con uno sfondo a sinistra colorato di blu, con l'aggiunta del testo.
Studiando la pagina ho notato che non è una immagine elaborata, ma ottengono il tutto usando i CSS. Sapete dirmi come è possibile farlo??? salvando la pagina e aprendo ogni CSS non capisco bene come hanno fatto a farla

[Mich_]

Non sono riuscito a capire quale e` il CSS usato (troppi CSS da guardare); inoltre la pagina e` realizzata in un linguaggio arcaico (assomiglia a HTML 2), per cui no nla prenderei come esempio da imitare.

Posso intuire che la cosa che descrivi utilizzi istruzioni proprietarie IE, dato che io con FF non vedo nessuna trasparenza.

In linea di massima, per ottenere degli sfondi semitrasparenti si possono usare due strade:
- utilizzo di gif o png semitrasparenti
- utilizzo delle proprieta` dei CSS3, che alcuni browser gia` implementano (a volte con necessita` di codice proprietario).
La prima soluzione si presenta uguale in tutti i browser, la seconda dipende dal browser; il loro uso e` tuttavia limitato dal contesto.

[pix83]

stanamente io la vedo sia con IE che con FF.
Comunque grazie della risposta!!! quindi, potrei fare così...
Una tabella con sfonfo un'immagine e poi gli inserisco sopra una immagine semitrasparente???
può funzionare??? così dovrebbe essere, come hai detto tu, visibile per tutti i browser.

Ho trovato anche su questo sito un esempio uguale SPORT ITALIA

[Mich_]

L'esempio dell'ultimo link lo vedo anch'io.

Ma lascia stare le tabelle: sono fatte per intabellare i dati, non per formattare le pagine.

Come dici tu, devi fare un blocco con un'immagine, e sopra ci metti un altro blocco piu` piccolo che abbia come imm di sfondo una gif semitrasparente (chiaramente piccola e che venga ripetuta).
Invece se rendi il blocco semitrasparente (con l'opacity), lo diventano anche le scritte, e quindi si legge male.

[pix83]

Quindi...
se ho un'immagine da 300x100(supponiamo), poi gli sovrappongo una da 60x100 semi trasparente dovrebbe darmi lo stesso risultato??? mm, devo fare una prova con photoshop, cerco qualche tutorial, semitrasparenti mai fatte io


Ps.: io x formattare le pagine uso le tabelle, se vuoi dai un'occhiata al mio sito: Sito , dici che mi complico la vita???

[Mich_]

Originariamente inviato da pix83
Ps.: io x formattare le pagine uso le tabelle, se vuoi dai un'occhiata al mio sito: Sito , dici che mi complico la vita???

Hai sbagliato posto per dire questo.
Vuol dire che non sai usare le tecnologie moderne (sei indietro di 5 - 10 anni).
Un sito tabellare puo` sembrare piu` semplice da realizzare (ma chi sa usare i CSS smentisce questa affermazione), ma crea problemi:
- di accessibilta`
- a chi naviga con browser "leggeri" (PDA, cellulari, e sim)
- a chi ha browser diversi da quelli piu` usati o con dimensioni dello schermo diverse.

Inoltre le pagine formattate con i <div> e CSS risultano alla fine piu` leggere e piu` semplici da manutentere.

Altra considerazione (che in quache caso e` in relazione com le tabelle):
se usi gli attributi HTML per formattare, potresti avere problemi ad usare i CSS, dato che browser diversi danno priorita` diverse alle varie tecnologie: ne consegue che dove usi i CSS non puoi usare attributi di formattazione HTML.

[pix83]

Mi hai demolito...
Un consiglio da parte tua quale è??? pensavo che tabelle + CSS fosse semplice.
Vero che forse ho il vizio di creare troppe tabelle
Tu che mi consigli?

[Mich_]

Tra i "link utili" di questo forum, ci sono alcuni layout realizzati secondo le tecniche moderne.
Fatti un giro.
Se puoi vuoi vedere fino a che punto si arriva, guardati csszengarden, e siti derivati.

[pix83]

Mich_ forse ho trovato come hanno fatto, nel CSS come caratteristica del DIV usano questo:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);

...il codice che usano è quello. Non capisco una cosa, ho creato una pagina, se la visualizzo con IE mi da l'effetto, se la visualizzo con FF no...mentre il loro sito anche con FF lo vedo :berto:

Ecco il mio esempio
Prova (IE)

[Mich_]

Il filter e` una proprieta` proprietaria (scusa il gioco di parole).
Quindi in browser diversi da IE non ha effetto.

Ma tieni presente che e` possibile da un lato creare dei codici alternativi che intervengono in browser specifici (con o senza commenti condizionali), dall'altro fornire CSS diversi a seconda del browser utilizzato (ci sono sistemi semplici di sniffing del browser lato server).

Quindi per capire esattamente cosa avviene dovresti:
- confrontare i CSS che vedi con brwoser diversi
- togliere/mettere una caratteristica alla volta e vedere l'effetto sui vari browser.

Tornando al problema opacita`, attualmente si risolve con le seguenti istruzioni:

filter: alpha(opacity=75);   /* IE */
moz-opacity: 0.75;           /* mozilla */
opacity: 0.75;                 /* FF ed altri */

Mi pare invece che non ci sia modo di vedere oggetti opachi in Opera.