Style Sheets Web
CSS tips & tricks

Ky dokument është një përkthim i "CSS Tips & Tricks." Përkthimi nuk është një përkthim i normative dhe mund të përmbajë gabime e përkthimit. Rishikimi i statusit të vetëm në anglisht në dokument http://www.w3.org/Style/Examples/007/text-shadow.html W3C është e mbrojtur nga copyright.

Hijet Tekst

Nivel CSS 3 ka një pronë të quajtur 'text-shadow "për të shtuar një hije në çdo letër prej disa tekstit. Në formën e tij më të thjeshtë, duket diçka si kjo:

h3 (text-shadow: 0.1em 0.1em # 333)

Cili shton një gri të errët (# 333) hije pak të drejtë (0.1em) dhe poshtë (0.1em) në lidhje me tekst normal. Rezultati duket si ky:

(Në gusht 2005, jo të gjithë shfletuesit e mbështesin plotësisht 'text-shadow "ende. Mësipërme duhet të punojë të paktën në Safari dhe Konqueror.)

Hije Fuzzy tekst

Formën më të thjeshtë të tekstit 'pronë hije' ka dy pjesë: një ngjyrë (të tilla si # 333 më lart) dhe një offset (0.1em 0.1em në shembullin e mësipërm). Kjo rezulton në një hije të mprehtë në dukje kompensuar. Por mund të kompensojë edhe të bëhet fuzzy, duke rezultuar në një më shumë ose më pak të mjegulluar hije.

Shuma e fuzziness jepet si një tjetër kompensimi. Këtu janë dy linja, njëra me një fuzziness pak (0.05em) dhe një me një shumë (0.2em):

h3.a (text-shadow: 0.1em 0.1em 0.05em # 333)
(h3.b text-shadow: 0.1em 0.1em 0.2em zezë)

Teksti i lexueshëm i bardhë

Hijet mund të bëjë më shumë teksti i lexueshëm në qoftë dallim midis dukshëm dhe sfond është i vogël. Këtu është një shembull të tekstit të bardhë kundër një sfond blu të zbehtë, së pari pa një hije dhe pastaj me:

h3 (color: white)
h3.a (color: white;-hije tekst: zi 0.1em 0.1em 0.2em)

Hijet e shumëfishta

Ju gjithashtu mund të ketë më shumë se një hije. Në përgjithësi, duket se në vend të çuditshme:

h3 (text-shadow: 0.2em 0.5em 0.1em # 600,
      -0.3em 0.1em 0.1em # 060,
      0.4em-0.3em 0.1em # 006)

Por me mirë-vendosur dy hijet e errët dhe drita, efekt mund të jenë të dobishme:

h3.a (text-shadow:-1px-1px bardhë, 1px 1px # 333)
(h3.b text-shadow: 1px 1px bardhë,-1px-1px # 444)

Kjo është pak e rrezikshme, si ju mund të shohin nëse shfletuesi juaj nuk ka përkrahje 'text-shadow ". Në fakt, ngjyrat e sfondit dhe tekst në këtë shembull janë pothuajse të njëjtën (# CCCCCC dhe # D1D1D1), kështu që pa hijet, mezi ka ndonjë dallim.

Duke shkronja si përshkruan

Dy-hijet shembull të versionit të mëparshëm mund të merret edhe më tej. Me katër hijet, letra mund të jepet një skicë:

h3 (text-shadow:-1px 0 zi, 0 1px zi,
      1px 0 zi, 0-1px zezë)

Kjo nuk është një plan të përsosur, dhe në këtë kohë (gusht 2005), diskutimi është ende e hapur nëse CSS duhet të ketë një pronë të veçanta (ose ndoshta një vlerë për 'text-decoration') për ta bërë më të mirë përshkruan.

Shkëlqim Neon

Nëse ju vendosni të drejtë fuzzy hije pas tekstit, pra, me zero kompensuar, efekti është për të krijuar një skuqje rreth letra. Nëse shkëlqim i një hije të vetme nuk është i fortë mjaftueshëm, vetëm përsërisin të njëjtën hije disa herë:

h3.a (text-shadow: 0 0 0.2em # 8F7)
(h3.b text-shadow: 0 0 0.2em # F87, 0 0 0.2em # F87)
h3.c (text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F,
        0 0 0.2em # 87F)