CSS Text Shadow

Scris de bogdanmogo la data 8 Ianuarie, 2010

Am vazut pe blogul chinezului un efect de shadow la textul din sidebar si ma gandeam ca sunt si altii dornici sa-l aiba pe blogul lor.

Pentru ca nu toate browserele stiu sa interpreteze proprietatea CSS text-shadow, trebuie sa facem un cod CSS separat pentru IE si celelalte browsere.

Incepem cu CSS-ul pentru Internet Explorer unde folosim filtrul Shadow, deoarece IE nu stie sa interpreteze text-shadow.

.umbra_ie {
 color:#000000;
 font-family:Verdana;
 font-weight:bold;
 font-size: 1em;
 height: 1em;
 filter: Shadow(Color=#ffaaaa,
 Direction=135,
 Strength=3);
}

Rezultatul codului de mai sus este:umbra_ie

Ne ocupam acum de Mozilla si celelalte browsere:

.umbra_mozilla {
 color:#000000;
 font-family:Verdana;
 font-weight:bold;
 font-size: 1em;
 height: 1em;
 text-shadow: 0.1em 0.1em 0.1em #ffaaaa;
}

umbra_moz

Acum sa ne jucam putin cu umbrele pentru a obtine ceva mai frumos:

Codul CSS:

div {
 color:#CCCCCC;
 background:#D1D1D1;
 font-family:Verdana;
 font-weight:bold;
 font-size: 1em;
 padding:20px;
}
 
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}

DIV-ul care contine Heading 3:

<div>
<h3 class="a">Lorem ipsum dolor sit amet</h3>
<h3 class="b">In blandit dui vel augue mattis</h3>
</div>

Rezultatul este acesta:

blocul_cu_h3

sau

h3.c {
color:#000000;
text-shadow: -1px 0 #f8f8f8, 0 1px #f8f8f8,
             1px 0 #f8f8f8, 0 -1px #f8f8f8
}
 
h3.d {
text-shadow: -1px 0 black, 0 1px black,
             1px 0 black, 0 -1px black
}
<h3 class="c">Lorem ipsum dolor</h3>
<h3 class="d">Blandit dui vel augue</h3>

…care arata asa:

blocul_cu_h3b

Fisierul html cu toate exemplele CSS.


Postat în .css {} | 2 răspunsuri

2 răspunsuri la “CSS Text Shadow”

  1. StefanNch says:
    07-09-2010 at 09:07

    Din pacate, desi suportata de toate browserele moderne, proprietatea “text-shadow” nu este inclusa in setul de instructiuni valide css 2.1! Si nici “filter”! Nu le-as numi hack-uri, insa nu ar trebui prea des folosite (a se citi “niciodata”) …

  2. Anda says:
    20-11-2010 at 22:56

    Scurt si la obiect. Multumesc!
    PS: V-ar trebui un favicon ;)

Lasă un răspuns

vim sessions
Cod PHP scris corect