<div class="divshadow1">
<h4> <span id="kiemel">1. div shadow </span> </h4>
</div>

Stílus megíeása:
.divshadow1{width:500px; padding:5px; background:navy; border: 1px solid black;}
.divshadow1 h4{margin: 0px; font-size: 30px; text-align: center; color: yellow; border: 2px solid aqua;}
#kiemel{background: purple;}

.divshadow1{box-shadow: 5px 5px #818181; -webkit-box-shadow: 5px 5px #818181; -moz-box-shadow: 5px 5px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);}

 

 

<div class="divshadow2">
<h4> 2. div shadow </h4>
</div>

Stílus megíeása:
.divshadow2{width:500px; padding:5px; background:navy; border: 1px solid black;}
.divshadow2 h4{margin: 0px; font-size: 30px; text-align: center; color: yellow; border: 2px solid aqua;}

.divshadow2{box-shadow: 9px 9px 10px #818181; -webkit-box-shadow: 9px 9px 10px #818181; -moz-box-shadow: 9px 9px 10px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=9, offY=9, positive=true);}

 

 

<img src="kutya.jpg" alt="Főoldal" width="80" height="80" border="0" class="kep001" />

Stílus megírása
.kep001{box-shadow: -6px -6px 10px #561A0B;
-webkit-box-shadow: -6px -6px 10px #561A0B;
-moz-box-shadow: -6px -6px 10px #561A0B;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
}

 

 

<div class="szovegpozicio">
<h5 class="szovegpoz001">Térhatású szöveg megjelenítése</h5>
<h5 class="szovegpoz002">Térhatású szöveg megjelenítése</h5>
</div>

Stílus megíeása:
.szovegpozicio{width: 90%; height: 100px;}
.szovegpozicio h5{font-size: 50px;}
.szovegpoz001{position: absolute; margin-top: 10px; margin-left: 20px; color: blue;}
.szovegpoz002{position: absolute; margin-top: 10px; margin-left: 15px; color: yellow;}

 

 

<div class="bekezdpozicio">
<p class="bekezdes">
<span class="szovegpoz001"> Bekezdés szövegének megjelenése.<br /> Mivel a stílusokat class osztályazonosítóhoz írtuk, <br />így azokat tetszőleges jelölőelemhez rendelhetjük. <br /> Például a < span > jelölőelemhez is </span>
<span class="szovegpoz002"> Bekezdés szövegének megjelenése.<br /> Mivel a stílusokat class osztályazonosítóhoz írtuk, <br /> így azokat tetszőleges jelölőelemhez rendelhetjük. <br /> Például a < span > jelölőelemhez is </span>
</p>
</div>

Stílus megírása>
.bekezdpozicio{width: 90%; height: 150px;}
.bekezdes{font-family: Arial; font-weight: bold; font-size: 20px;}
.szovegpoz001{position: absolute; margin-top: 12px; margin-left: 18px; color: yellow;}
.szovegpoz002{position: absolute; margin-top: 10px; margin-left: 15px; color: blue;}

 

 

<div class="szovegpozicio">
<h5 class="szovegpoz005"> Árnyékos szöveg megjelenítése </h5>
<h5 class="szovegpoz006"> Árnyékos szöveg megjelenítése </h5>
</div>

Stílus megírása>
.szovegpozicio{width: 90%; height: 100px;}
.szovegpoz005{font-family: Arial; font-size: 50px; position: absolute; margin-top: 14px; margin-left: 22px; color: #999;}
.szovegpoz006{font-family: Arial; font-size: 50px; position: absolute; margin-top: 10px; margin-left: 15px; color: black;}

 

 

.Szöveg megjelenése, IE-ben és MA-ban egyforma Szöveg megjelenése, IE-ben és MA-ban egyforma

<h2 class="hh2"> . <span>Szöveg megjelenése, IE-ben és MA-ban egyforma </span>
<span class="lathato"> Szöveg megjelenése, IE-ben és MA-ban egyforma </span>
</h2>

Stílusok megírása:
.hh2{position: relative; font-size: 35px; color: #ff0;}
.hh2 span {position: absolute; top: 4px; left: 4px; width: 100%; height: 100%;}
.hh2 span.lathato{top: 2px; left: 2px; color: black;}

Megjegyzés:
A kezdő jelölőelem után, közvetlen a span címke elé, be kell írni egy pontot.
Ha nem helyezunk el egy pontot, akkor a pozíció megváltozik, ha van aláhúzás, az a szöveg fölé kerül.
Az öröklődési hiba elkerülésére, egészítsük ki a meghatározást: .hh2{position: relative; color: #ff0; border: none;}

 

 

További szövegeket Explorer és Mozilla, enyhén eltérően jeleníti meg

 

A következő részben két szövegsort láthatunk. Az egyik Mozila böngészőben, a másik Explorer böngészőben jeleníthető meg

Ez, Mozila böngészőben jelenik meg:
<span class="parag004">Ez Mozila böngészőben jelenik meg: shadow</span>
.parag004{font-family: Arial; text-shadow: #0000ff 0px 0px 3px;}
Ez Mozila böngészőben jelenik meg: shadow

Ez, Explorer böngészőben jelenik meg:
<span class="parag005">Ez Explorer böngészőben jelenik meg: shadow</span>
.parag005 {font-family: Arial; display: block; width: 100%; filter: glow(color=#0000ff, strength=3);}
Ez Explorer böngészőben jelenik meg: shadow

 

 

Ha a fenti két meghatározást így írjuk, akkor minkét böngészőben megjelenik

IE-ben a class osztályazonosító, MA-ban az id azonosító meghatározásai érvényesülnek
<style type="text/css">
#parag005{font-family: Arial; text-shadow: #0000ff 0px 0px 3px;}
.parag005 {display: block;width: 100%; filter: glow(color=#0000ff, strength=2);}
</style>

<p id="parag005"> <span class="parag005"> IE-ben a class osztályazonosító, MA-ban az id azonosító meghatározásai érvényesülnek </span> </p>

IE-ben a class osztályazonosító, MA-ban az id azonosító meghatározásai érvényesülnek

 

 

Paragrafus 001, azaz bekezdés szövege

<style type="text/css">
.parag001 { text-shadow: green 3px 2px; }
#parag001{font-family: Arial; display: block; width: 100%; filter: glow(color=green, strength=2.5px);}
</style>

<p class="parag001"><span id="parag001">Paragrafus 001, azaz bekezdés szövege</span></p>

Paragrafus 002, azaz bekezdés szövege

<style type="text/css">
.parag002 { text-shadow: aqua -1px -2px 1.5px;}
#parag002{font-family: Arial; display: block; width: 100%; filter: glow(color=aqua, strength=2.5px);}
</style>

<p class="parag002"><span id="parag002">Paragrafus 002, azaz bekezdés szövege</span></p>

Paragrafus 003, azaz bekezdés szövege

<style type="text/css">
.parag003 { text-shadow: yellow -1px -2px 0.5em, green 3px 2px; }
#parag003{font-family: Arial; display: block; width: 100%; filter: glow(color=yellow, strength=2.5px;);} </style>

<p class="parag003"><span id="parag003">Paragrafus 003, azaz bekezdés szövege</span></p>