Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 

skriv ut »

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! Inget av exemplen nedan fungerar i Firefox!

Tips! När du gör effekter som tex "glow" eller "blur" kan du behöva göra ett extra blanksteg: &nbsp 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">&nbsp;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"> &nbsp;<br>
&nbsp;&nbsp;<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: &nbsp 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">&nbsp;&nbsp;<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>