Blog

Szöveg árnyék CSS-el

Nagyon látványossá tehetjük a szöveget egy oldalon, ha árnyékot adunk neki. Kiemelhetjük, besüllyesztetjük, elhatárolhatjuk a háttértől. Mégis elég kevés oldalon alkalmazzák, mivel többféle megoldás is létezik az effektus kivitelezésére és sajnos egyiket sem biztos, hogy támogatja mindegyik böngésző.
Kis próbálkozással és kutatással kitaláltam egy 99% biztos megoldást. Egyszerűen az árnyékolni kívánt szöveget kétszer kell megjeleníteni. Egyik lesz maga az olvasható szöveg, másik az árnyéka. Az árnyéknak szánt szöveget a másika alá kell tolni 1, vagy több pixel elcsúsztatássál. Ezt CSS-el egyszerűen ki lehet vitelezni.

Szoveg arnyek


A CSS kód ami lehetővé teszi ezt:

.shadow {
font-family: Verdana;
font-size: 12px;
position:relative;
display:block;
color:#fff;
}
.shadow span {
font-family: Verdana;
font-size: 12px;
position:absolute;
display:block;
top:0px;
}
.shadow font {
font-family: Verdana;
font-size: 12px;
display:block;
padding:1px;
color:#000;
}

A hozzá tartozó HTML kód:

<p class="shadow">
<span>Árnyékolt szöveg minden böngészőre.</span>
<font>Árnyékolt szöveg minden böngészőre.</font>
</p>

A megoldásnak hátrányai is vannak. Ha régebbi böngészőt használunk, ami nem kezeli ezeket a CSS eljárásokat, akkor a szöveg szétcsúszhat, kétszer szerepelhet az oldalon. Ezért olyan oldalakon célszerű alkalmazni, amiről tudjuk, hogy egyébként is korszerű böngészőt kíván.

Ami még probléma lehet, hogy az árnyékolni kívánt szöveget kétszer kell beírnunk, így nagyobb mennyiségű szöveg esetén kétszer kell azt is eltárolni. Tehát ezt a megoldást célszerű címek, kisebb felíratok érdekesebbé tételéhez használni. Ha pedig dinamikusan frissülő oldalhoz alkalmazzuk, akkor JavaScript, vagy PHP nyelv felhasználásával egyszerűsíteni tudjuk a szöveg duplán kiírását.

Szóljon hozzá!

Új generációs játékok