Nyeste it-job

Flere it-job

CSS filters: Drop Shadow

af Jonas Astrup, HTML.dk
Sidst opdateret d. 30. maj 2001

Filters er en Microsoft extension til Cascading Style Sheets. Dette eksempel er altså ikke omfattet af den officielle CSS standard, og virker kun i Internet Explorer 5.5 og nyere. Øvrige browsere ignorerer blot effekten.

Hvis du ikke kan se nogen skygge effekt - klik her for at se hvordan eksemplet fortolkes i Internet Explorer 5.5 (gif billede 7kb)

Drop Shadow!

Drop Shadow effekt på en boks - ganske flot, ikke?

Sådan gør du:

For at give et element dropshadow effekt kræves kun ganske få liniers kode i dit stylesheet:

Du kan indstille skyggeeffekten ved at justere følgende parametre:

Color: Farven på skyggen
offY: Skyggens vertikale forskydning
offX: Skyggens horisontale forskydning
positive: om elementet skal vises i positiv eller negativ

Vis som eksempel

<html>
<head>
<title>CSS filters</title>
<style type="text/css"">
#text
  {
  color:rgb(0,51,102);
  font: bold 4em "arial black",arial,sans-serif;
  height:80px;
  filter: progid:DXImageTransform.Microsoft.dropShadow( Color=99CCFF,offX=10,offY=10,positive=true);
  }
#box
  {
  width:300px;
  height:150px;
  padding:1em;
  border:1px solid rgb(0,0,0);
  background:rgb(102,153,204);
  color:rgb(255,255,255);
  font: bold 1.5em arial,sans-serif;  
  filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);
  }
</style>
</head>
<body>

<div id="text">Drop Shadow!</div>

<div id="box">Drop Shadow effekt på en boks - ganske flot, ikke?</div>

</body>
</html>

Vis som eksempel