Transparencias a prueba de browsers

24/Ene/2007 77

Hasta no hace poco, para lograr transparencias en imágenes para web, el método era exclusivamente hacerlo con un SWF. Con la masificación del PNG, esto se ha hecho más fácil y el resultado es bastante satisfactorio (no como esos horrendos bordes dentados de los eternos GIF), pero lo complementaremos bastante con el uso de CSS.

Propiedades del browser

Cada browser tiene su propio método de aplicar opacidad a las imágenes. CSS ha implementado 3 diferentes propiedades que afectan la transparencia de un elemento:

  • opacity: con valores decimales entre 0 (invisible) y 1 (sólido). (CSS3)
  • moz-opacity: también con valores decimales entre 0 y 1. (Firefox)
  • filter: es una propiedad de IE (5.5+) el cual trae varios efectos (degradaciones, desenfocado, sombras, etc). Para lograr la transparencia se ocupa el filtro alpha, con valores entre 0 y 100.

Al declarar las 3 propiedades juntas mediante CSS y con el mismo valor de opacidad, podrás tener una transparencia a prueba de browsers:

#elementotransparente {
     opacity: 0.4;
     -moz-opacity: 0.4;
     filter: alpha(opacity=40);
}

Y utilizando comentario condicional para IE (recomendable):

<style type=“text/css”>
     #elementotransparente { opacity: 0.4; -moz-opacity: 0.4; }
</style>
<!—[if IE]>
     <style type=“text/css”> #elementotransparente { filter: alpha(opacity=40); }
     </style>
<![endif]—>

Ver ejemplo

La transparencia la puedes aplicar en bloques (un div por ejemplo) o a elementos individuales (imágenes, textos). Importante es considerar el nivel de lectura, si quieres darle transparencia a bloques de texto, por ejemplo. Por último, ninguno de estas 3 propiedades validarán por la W3C. Depende de tí si es importante que tu hoja de estilos valide.

Probado en: Safari, IE6, IE7, Opera9, FF 1.5.3+

Links:

Comentarios

  1. Ezscux [#]

    Ndzdcu – kamagra pills Vganet rmrcln

  2. Jasonrag [#]

    https://gabapentinst.com/# gabapentin generic

  3. Liwsmj [#]

    Mxlpvr – india pharmacy mail order Mzmgrf yubunw

  4. Futclb [#]

    Bsewgq – buy tadalafil 5mg online Qazsyo prmppf

  5. Cqufbn [#]

    Ivbper – 60 mg viagra Neeybe nnpktz

  6. Scottsnuro [#]

    https://zithromaxproff.com/# how to get zithromax online
    zithromax generic price

  7. Nendjg [#]

    Kwbqqm – sildenafil tablet usa Imnill lluqus

  8. Scottsnuro [#]

    https://zithromaxproff.com/# can you buy zithromax online
    buy zithromax without presc

  9. Williamtaw [#]

    chat free dating site
    free adult personals

  10. Oklgil [#]

    Opvrlj – thinking problem solving Gnrqcn trfffd

  11. Rxlfom [#]

    Dfxxbx – writing an introductory speech Dvqqmv thcunk

  12. Ndqoqv [#]

    generic ivermectin – ivermectin 2ml ivermectin 3mg

  13. Tqoglh [#]

    ivermectin 4 tablets price – ivermectin for humans ivermectin 3mg tablets price

  14. Soccwb [#]

    stromectol for humans – ivermectin 3 mg ivermectin 3mg pill

  15. Faqnmj [#]

    stromectol tab 3mg – stromectol price usa cost of ivermectin cream

  16. Javierexesk [#]

    tindr , tinder date
    how to use tinder

  17. Hrsprh [#]

    buy ivermectin for humans australia – ivermectin for horses paste stromectol pills canada

  18. Cgvzan [#]

    ivermectin pills – ivermectinep ivermectin 2ml

  19. Xpsibz [#]

    stromectol 2mg online – cost of ivermectin pill buy ivermectin online

  20. Williamben [#]

    generic viagra available: how does viagra work – viagra pills
    viagra without prescription

  21. Xwkulf [#]

    buy ivermectin online – ivermectin canada ivermectin lotion for lice

  22. Luzdyc [#]

    buy plavix online uk – plavix price south africa clopidogrel 75 mg price in india

  23. Javierexesk [#]

    how to use tinder , tinder sign up
    http://tinderentrar.com/

  24. CharlesFek [#]

    buy cialis shipping canada: buy cheap cialis uk cialis without presciption in usa
    buy cialis online viagra

  25. Vzdmqx [#]

    clopidogrel 5mg – plavix 600 mg buy plavix 75 mg online uk

  26. Cbvpio [#]

    how does water pill cause ed – erectile dysfunction medicine buy online the best non prescription ed pills

  27. CharlesFek [#]

    buy cialis online in canada: cialis online daily cialis without prescriptions canada
    cialis original for sale

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab