CSS effekter
Genom att använda CSS kan du få effekter på text, rubriker,
bilder tabeller mm som annars kräver att en bild används. Viktigt!
När du använder CSS för effekter krävs oftast
att objektet ligger i en sk "Box" för
att synas. Storleken i "width" och "height"
kan anges i pixlar, procent, mm, cm etc. Syns inte effekten kan det bero
på att området är för litet för textens storlek.
Gör gärna boxen större än innehållet. Du kan
koppla CSS-koden direkt till ett märke som tex <P> eller <TD>
men då blir all text inom <P> formaterad. I exemplen nedan
används <SPAN> för att omge den text eller område som ska ha effekten.
OBS! Effekterna fungerar inte i alla webbläsare!
Använd rätt doctype
Om du inte anger rätt doctype visar inte IE bläddringslisternas
färg. Använd doctype-deklarationen Transitional utan
länk till W3C för
korrekta resultat i IE:
Denna doctype fungerar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
OBS! Detta fungerar inte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Läs mer om Doctypes och
W3C här »
Tips! När du gör effekter som tex "glow"
eller "blur" kan du behöva göra ett extra blanksteg:   före eller efter texten för att
inte en kant ska uppstå på effekten.
Blur
Suddig
<head>
<style type="text/css">
<!--
.blur {font-size: 40px; font-weight: bold; filter:
Blur(Add=1, Direction=120, Strength=10); width: 100%; height: 60px;}
-->
</style>
</head>
<body>
<span class="blur">din
text här</span>
</body>
blur
<head>
<style type="text/css">
<!--
.blur {font-size: 40px; filter: Blur(Add=1, Direction=0,
Strength=15); width: 100%; height: 60px;}
-->
</style>
</head>
<body>
<span class="blur">din
text här</span>
</body>
<head>
<style type="text/css">
<!--
.blurimage {filter: Blur(Add=1, Direction=120,
Strength=20); height: 220px; width: 220px;}
-->
</style>
</head>
<body>
<span class="blurimage"><img
src="din_bild.jpg" width="200"
height="200">
</span>
</body>
Glow
Gläns
<head>
<style type="text/css">
<!--
.glow {font-size: 40px; font-weight: bold; filter:
Glow(Color=ff6900, Strength=5); width: 100%; height: 60px;}
-->
</style>
</head>
<body>
<span class="glow">din
text här</span>
</body>
glow
<head>
<style type="text/css">
<!--
.glow {font-size: 40px; font-weight: bold; color:
#FFFFFF; filter: Glow(Color=0099cc, Strength=2); width: 100%; height:
60px;}
-->
</style>
</head>
<body>
<span class="glow">din
text här</span>
</body>
glow
<head>
<style type="text/css">
<!--
.glow {font-size: 40px; font-weight: bold; color:
#FFFFFF; filter: Glow(Color=0099cc, Strength=10); width: 100%; height:
60px;}
-->
</style>
</head>
<body>
<span class="glow"> din
text här</span>
</body>
<head>
<style type="text/css">
<!--
.glowimage {filter: Glow(Color=ff6900, Strength=10);
width: 250px; height: 250px;}
-->
</style>
</head>
<body>
<span class="glowimage"> <br>
<img src="din_bild.jpg"
width="200" height="200">
</span>
</body>
Tips! När du gör effekter som tex "glow"
eller "blur" kan du behöva göra ett extra blanksteg:   före eller efter texten för att
inte en kant ska uppstå på effekten.
Drop shadow
Droppskugga
<head>
<style type="text/css">
<!--
.shadow {font-size: 40px; font-weight: bold; filter:
DropShadow(Color=aeaeae, OffX=5, OffY=5, Positive=1); width: 100%;
height: 60px;}
-->
</style>
</head>
<body>
<span class="shadow">din
text här</span>
</body>
drop shadow
<head>
<style type="text/css">
<!--
.shadow {font-size: 40px; font-weight: bold; filter: DropShadow(Color=0099cc,
OffX=5, OffY=5, Positive=0); width: 300px; height: 60px; padding:
5px;}
-->
</style>
</head>
<body>
<span class="shadow">din
text här</span>
</body>
Shadow
Skugga
Shadow
<head>
<style type="text/css">
<!--
.shadow {font-size: 40px; font-weight: bold; filter:
Shadow(Color=666666, direction=120); width: 100%; height: 60px;}
-->
</style>
</head>
<body>
<span class="shadow">din
text här</span>
</body>
<head>
<style type="text/css">
<!--
.shadowimage {font-size: 40px; font-weight: bold;
filter: Shadow(Color=666666, Direction=120); width: 100%; height:
60px;}
-->
</style>
</head>
<body>
<span class="shadowimage"><img
src="din_bild.jpg"
</span>
</body>
Wave
Vågig
<head>
<style type="text/css">
<!--
.wave {font-size: 60px; font-weight: bold; filter:
Wave(Add=0, Freq=5, LightStrength=5, Phase=5, Strength=5); width:
100%; height: 80px;}
-->
</style>
</head>
<body>
<span class="wave">din
text här</span>
</body>
Vågig
<head>
<style type="text/css">
<!--
.wave {font-size: 60px; font-weight: bold; filter: Wave(Add=1,
Freq=5, LightStrength=3, Phase=5, Strength=5); width: 100%; height:
80px;}
-->
</style>
</head>
<body>
<span class="wave">din
text här</span>
</body>
wave
<head>
<style type="text/css">
<!--
.wave {font-size: 60px; font-weight: bold; filter:
Wave(Add=0, Freq=8, LightStrength=5, Phase=8, Strength=5); width:
100%; height: 80px;}
-->
</style>
</head>
<body>
<span class="wave">din
text här</span>
</body>
<head>
<style type="text/css">
<!--
.waveimage {filter: Wave(Add=0, Freq=5, LightStrength=5,
Phase=5, Strength=5);
width: 250px; height: 250px;}
-->
</style>
</head>
<body>
<span class="waveimage"> <img
src="din_bild.jpg">
</span>
</body>
Alpha
Toning
<head>
<style type="text/css">
<!--
.alpha {font-size: 60px; font-weight: bold; filter:
Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0,
FinishX=0, FinishY=100); width: 100%; height: 100px;}
-->
</style>
</head>
<body>
<span class="alpha">din
text här</span>
</body>
Toning
<head>
<style type="text/css">
<!--
.alpha {font-size: 60px; font-weight: bold; filter:
Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=100,
FinishX=0, FinishY=20); width: 100%; height: 100px;}
-->
</style>
</head>
<body>
<span class="alpha">din
text här</span>
</body>
Alpha
<head>
<style type="text/css">
<!--
.alpha {font-size: 60px; font-weight: bold; filter:
Alpha(Opacity=100, FinishOpacity=0, Style=2); width: 100px; height:
100px;}
-->
</style>
</head>
<body>
<span class="alpha">din
text här</span>
</body>
Alpha
<head>
<style type="text/css">
<!--
.alpha {font-size: 60px; font-weight: bold; filter: Alpha(Opacity=0,
FinishOpacity=50, Style=2); width: 100px; height: 100px;}
-->
</style>
</head>
<body>
<span class="alpha">din
text här</span>
</body>
Alpha
<head>
<style type="text/css">
<!--
.alpha {font-size: 60px; font-weight: bold; filter:
Alpha(Opacity=0, FinishOpacity=100, Style=3); width: 100px; height:
100px;}
-->
</style>
</head>
<body>
<span class="alpha">din
text här</span>
</body>
<head>
<style type="text/css">
<!--
.alphaimage {filter: Alpha(Opacity=100, FinishOpacity=0,
Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100); width: 200px;
height: 200px;}
-->
</style>
</head>
<body>
<span class="alphaimage"><img
src="din_bild.jpg">
</span>
</body>
Flip
Omvänd vertikalt
<head>
<style type="text/css">
<!--
.flip {font-size: 30px; filter: FlipV; width: 100%;
height: 60px;}
-->
</style>
</head> <body>
<span class="flip">din
text här</span>
</body>
flip horisontal
<head>
<style type="text/css">
<!--
.flip {font-size: 30px; filter: FlipH; width: 100%;
height: 60px;}
-->
</style>
</head>
<body>
<span class="flip">din
text här</span>
</body>
till sidans topp