|
Filters
CSS bevat een aantal filters die plaatjes zeer mooi kunnen beïnvloeden.
Het enige waar je op moet letten is dat je de <div>
een waarde meegeeft, anders werk het niet:
Dit in de <head> of in het externe
.css bestand:
<style>
div
{
width:100%;
height:100%;
}
</style>
Zo weet je zeker dat de <div>
stijlen over het plaatje heen vallen. Dus 100%! Zonder dit aan te geven
zie je niets dan het "normale" plaatje.
Het originele plaatje:
FlipV:
<div style="filter:flipv()">
<img src="../html/pics/beschrijving.jpg">
</div>
Gray:
<div style="filter:gray()">
<img src="../html/pics/beschrijving.jpg">
</div>
Invert:
<div style="filter:invert();">
<img src="../html/pics/beschrijving.jpg">
</div>
Xray:
<div style="filter:xray()">
<img src="../html/pics/beschrijving.jpg">
</div>
Ik kan ze niet allemaal uitleggen. Ik gebruik ze zelf weinig tot nooit.
Speel er maar eens mee zodat je weet wat wel en niet kan. Hieronder een
overzicht van de meest bekende filters! Bij de Waarde zie je soms meerdere
waarden staan gescheiden door een komma. Daar kun je uit kiezen. Alle filters
hebben een ander effect.
| Filternaam: |
Waarde: |
Voorbeeld: |
| Alpha |
filter:alpha(Opacity=,
FinishOpacity=, Style=, StartX=, StartY=, FinishX=, FinishY=)
|
{
filter:alpha(Opacity=75, FinishOpacity=15, Style=1) } |
| Blur |
filter:blur(Add=,
Direction=, Strength=) |
{
filter:blur(Add=1,Direction=90,Strength=10) } |
| Chroma |
filter:chroma(Color=) |
{
filter:chroma(color=#ffff00) } |
| DropShadow |
filter:DropShadow(Color=,
OffX=, OffY=, Positive=) |
{
filter:DropShaow(Color=#003399, OffX=3, OffY=3, Positve=1) } |
| FlipH |
filter:fliph |
{
filter:FlipH(enable=1) } |
| FlipV |
filter:flipv |
{
filter:FlipV(enable=1) } |
| Glow |
filter:glow(Color=,
Strength=) |
{
filter:glow(Color=#003399, Strength=30) } |
| Grayscale |
filter:gray |
{
filter:gray } |
| Invert |
filter:invert |
{
filter:invert } |
| Light |
filter:light |
{
filter:light} |
| Mask |
filter:mask(Color=) |
{
filter:mask(Color=#009933) } |
| Shadow |
filter:shadow(Color=,
Direction=) |
{
filter:shadow(Color=#9900FF, Direction=135) } |
| Wave |
filter:wave(Add=,
Freq=, Phase=, LightStrength=, Strength=) |
{
filter:wave(Add=1, Freq=10, Phase=90, LightStrength=10, Strength=10)} |
| Blend
Transition Filter2 |
BlendTrans(duration=seconds.milliseconds) |
{
filter: blendTrans(duration = 1.5) } |
|
