Hopp til innholdet

cjohansen.no

CSS Opacity

Gjennomsiktige lag kan lages med CSS på to måter: med en repeterende transparent png24, eller med CSS-egenskapen opacity.

Gammelt nytt

Dette er sikkert gammelt nytt for mange, men noen har kanskje ikke sett det før. Dette handler om en del av fargemodulen i CSS3 som lar deg bestemme hvor gjennomsiktig et element skal være.

CSS3 er langt fra en fullstendig spesifikasjon, men mange enkeltelementer finnes i flere implementasjoner allerede. Mozilla-baserte nettlesere har lenge implementert disse med -moz-prefiks på egenskapene, men enkelte egenskaper som anses for å være så å si ferdige er også implementert på vanlig vis. Frem til Firefox 1.5 måtte man trå til med -moz-opacity for å bruke denne egenskapen, men med nyere versjoner er ikke dette nødvendig.

I tillegg til at det funker i Firefox, funker opacity også i Opera og visstnok Safari (selvom testsiden min kræsjet Safari på Windows), i tillegg til i IE, om enn med properietær kode (jaja, vi er vel vant til det nå?) Noen bugs er forøvrig funnet (og det er sikkert flere å spore om man bruker dette i gitte settinger).

Praktisk bruk

I praksis bruker man opacity ved å gjøre det på én måte for standard-vennlige nettlesere og en annen for IE. Ved å sette opacity mindre enn 1 vil elementet og alt det inneholder bli gjennomsiktig (mellom 1.0 og 0.0) eller helt usynlig ( 0.0). Se eksempelet i praksis.

Koden for eksempelet ser ut som følger: 

<style type="text/css" media="screen, projection">
  #layer {
    background: #c00;
    opacity: 0.5;
  }
  
  #overlay {
    opacity: 1;
    background: #000;
    color: #fff;
  }
</style>
<!--[if lte IE 7]>
  <style type="text/css" media="screen, projection">
    #layer { filter: alpha(opacity=50); }
    #overlay { filter: alpha(opacity=100); }
  </style>
<![endif]-->

Her er det opacity fra standarden, og for IE bruker vi et alpha-filter, mye på samme måte som når vi skal ha transparente PNG-er i IE versjon 6 og tidligere.

Bruksområder

Ettersom opacity setter gjennomsynlighet for hele elementet, og også tekst og annet innhold kan man ikke bruke denne egenskapen til å gi transparent bakgrunn alene. En ting man derimot kan bruke det til er typiske overlays som legges over hele siden unntatt en modal hjelpedialog eller lignende, en teknikk som er gjort populær av diverse lightbox-script.

Ellers kan denne effekten også brukes kreativt på andre elementer, se none gode eksempler på bruk i denne artikkelen.

Publisert 18. mars 2008 under css og teknikker.

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens