Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente bannato
    Registrato dal
    Nov 2005
    Messaggi
    146

    Effetto semi trasparenza colorata

    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

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente bannato
    Registrato dal
    Nov 2005
    Messaggi
    146
    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

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente bannato
    Registrato dal
    Nov 2005
    Messaggi
    146
    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???

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Utente bannato
    Registrato dal
    Nov 2005
    Messaggi
    146
    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?

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  9. #9
    Utente bannato
    Registrato dal
    Nov 2005
    Messaggi
    146
    Mich_ forse ho trovato come hanno fatto, nel CSS come caratteristica del DIV usano questo:

    codice:
    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)

  10. #10
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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:
    codice:
    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.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.