Jednoduché stínování textu

2006-08-15 22:51 napsal Lukáš Havrlant

Tak mě napadlo udělat takovou blbůstka, třeba se to ještě někomu bude líbit. Jde tedy o jednoduchý příklad stínování nějakého písma, asi nejlépe nadpisu, samozřejmě bez použití obrázků. Zkoušel jsem všemožné filtry, ale nezaznamenal jsem příliš velký úspěch. Tudíž mě napadlo šalamounské řešení a sice vzít dva stejné nadpisy a napozicovat je přes sebe tak, aby to vypadalo, že ten druhý nadpis je ve skutečnosti jeho stín. Výsledek si tedy můžete prohlédnout. Pokud vám to přijde nesmyslné, tak radši ani nečtěte dál :o).

Takže nejprve tak nějak stručně popíši řešení v CSS. Na začátku jednodušší verze pro nadpis zarovnaný doleva. Na tom snad není co zkazit, prostě se nadpis relativně napozicuje a dovnitř nadpisu se hodí <span>, ve kterém bude opět obsah nadpisu a přes absolutní pozicování dostanete stín tam, kam chcete. Tedy nějak takto:

<h1>Nadpis<span>Nadpis</span></h1>

A k tomu toto CSS:

h1 {position:relative;color:#999;margin-left:20px;}
h1 span {display:block;position:absolute;left:-2px;top:-2px;color:#333;}

Výsledek bude vypadat takhle. Pokud ovšem chcete nadpis vycentrovat, musíte kód trochu předělat, budou už třeba dva spany. Takže HTML tentokrát vypadá takto:

<h1><span>Nadpis<span>Nadpis</span></span></h1>

A CSS takhle (tady patří velké dík Derovi, neboť mi to rozchodil i v Opeře, kde se mi to celé bortilo):

* { margin: 0; padding: 0; }
h1 {margin:10px 0}
h1 span {color:#aaa;display: block; position: absolute; text-align:center; width: 100%; overflow: hidden; }
h1 span span {left:-2px;top:-2px;color:#fff; }

V tuto chvíli je sice nadpis i stín tam kde mají být, ovšem pokud za nadpis přídáme odstavec, dočkáme se nemilého překvapení. Ono když je celý obsah nadpisu absolutně vypozicovaný, tak těžko může zabírat nějaké místo… Takže řešení jsou v zásadě dvě – buď se nadpisu přiřadí fixní výška (což se mi moc nelíbí) nebo se ještě do nadpisu vrazí třetí span, kde bude opět obsah nadpisu, ale nebude vypozicovaný, ale bude pouze skrytý:

<h1><span>Nadpis<span>Nadpis</span></span><span class="vyska">Nadpis</span></h1>

A upravené CSS:

* { margin: 0; padding: 0; /*position: relative;*/ }
h1 {margin:10px 0}
h1 span {color:#aaa;display: block; position: absolute; text-align:center; width: 100%; overflow: hidden; }
h1 span span {left:-2px;top:-2px;color:#fff; }
h1 .vyska {position:static;visibility:hidden;}

Má to tu výhodu, že když bude nadpis přes dva řádky, tak se to všechno natáhne, jak má, což by s fixně určenou výškou šlo docela těžko. No, v zásadě už je celý problém vyřešen, teď už jenom zbývá trocha skriptování, protože tyhle spany navíc prochopitelně do HTML nepatří. Takže jednoduchý skriptík, který mění obsah nadpisy, jak je potřeba:

nadpisy=document.getElementsByTagName("h1");
for (i=0;i<nadpisy.length;i++) {
pomocna=nadpisy[i].innerHTML;
nadpisy[i].innerHTML="<span>"+pomocna+"<span>"+pomocna+"</span></span><span class='vyska'>"+pomocna+"</span>";
}

Nejprve tedy najdu všechny nadpisy a projedu je cyklem, kde trochu pozměním jejich obsah podle svých představ. Jednoduché a funkční.

Tak pokud se tahle blbůstka někomu líbila, tak ji může použít.

Související:

Linkuj.cz!

Komentáře

# gwh
15. August 2006, 22:58

Tato „blbůstka“ ukazuje, jak jsou CSS nádherným nástrojem. Je pěkné, žes řešení dotáhl do konce.

15. August 2006, 23:05

Nenapadlo by mě asi něco podobného dělat, ale jako – dobrá práce!

# Zerog
15. August 2006, 23:19

Ne ze bych to chtel nejak shazovat, ale je to dost stare. Bohuzel uz neznam autora. Mozna casem dopisu.

15. August 2006, 23:23

Zerog
Jo, originál asi nebudu, spíš bych řekl, že jsem měl stejnou myšlenku. Když jsem se tehdá zarazil a nemohl s tím hnout v Opeře, tak jsem googlil a někde v cizině na něco podobného narazil, ale vzhledem k tomu, že tam měli jen první příklad se zarovnáním vlevo, tak mi to moc nepomohlo. Dál jsem nehledal. Opis to určitě není ale neříkám, že někde není něco podobného :-).

# Majkhii
15. August 2006, 23:31

Ano je celkem pravda, že se to objevilo již někde jinde, ale pokud se nemýlím se starým řešením se muselo trošku pohrát. Já si myslím, že tento článek je přijemné oživení :)

15. August 2006, 23:43

jen bych doplnil, že pokud netrváte na 100% validitě kódu, existují CSS vlastnosti jako:

_filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: .5;

které se dají přiřadit tomu stínu. Takže bude stínem prosvítat pozadí stránky (u většiny prohlížečů).

15. August 2006, 23:55

Dávání nadpisů přes sebě mně napadlo už když vyšly první browsery, které uměly alespoň základní pozicování. Redundantní obsah byl pochopitelně blbost, která to řešení znehodnocovala. Když už tohle, tak od toho je generovaný obsah v CSS nebo nejlépe stíny v CSS. Ale nutno přiznat, že i přes v poslední době populární zalepování CSS děr DOM skriptováním už jsem si na tohle nevzpomněl. Dobrý nápad. (Stejně bych to ale asi udělal generovaným obsahem + výrazem pro IE. Nebo opravdu stínem + mrknul se na podporu toho v IE7…)

16. August 2006, 00:06

Sakryš, teď mě ještě napadlo, že bez stylů se to zobrazí dost blbě, pokud prohlížeč zvládá Javascript, takže by to asi chtělo ty styly pro pozicování načítat taky javascriptem…

16. August 2006, 00:16

Teď mě taky napadlo… Zkoušeli jste někdo stylovat NOSCRIPT? Ten by se cojávim neměl zobrazit styly nestyly, ale možná by to šlo přebít nějakým display/visibility, ne?

16. August 2006, 00:22

Re: Zerog. Patrně první koho to napadlo byl v roce 98 Jirka Kosek. Viz http://www.ko­sek.cz/…l/sty­ly.html

Samozřejmě to není tak doladěné, ale ta myšlenka tam je.

Z důvodu zdvojeného výpisu textu při vypnutých stylech jsem se to nikdy nepokusil použít, nicméně poslední příspěvek od Lukáše může být cestou – pomocí javascriptu by se to mělo dát vyřešit.

16. August 2006, 00:46

Nebo by bylo lze použít [font color="#FFFFFF"]nadpis[/font] (proč mi to žere špičaté tagy uvnitř texy značky pro kód?)

16. August 2006, 00:47

llook
Jo, to bych taky rád věděl, dělá mi to už od začátku i při prvnotní instalaci bez jakýkoliv dalších úprav.

16. August 2006, 00:48

Zdvojení nadpisů je příšernost a praSEO ;-)

16. August 2006, 00:50

Radek Hulán
Já mám tedy za to, že vyhledávače Javascript neinterpretují… A tudíž žádný zdvojený nadpis nevidí.

16. August 2006, 02:17

Lukáš Havrlant>>> „Já mám tedy za to, že vyhledávače Javascript neinterpretují…“

Před dvěma lety se objevily zprávy, že google zvláda „číst“ JS http://seo.na­webu.cz/…04/0129­.html

http://www.mar­kcarey.com/…as­cript.html

http://www.mar­kcarey.com/…t-links.html

Nemyslím si, že by uměl JS na takové úrovni aby zvládl getElementsBy­TagName, ale možné to je.

# Zerog
16. August 2006, 09:46

Lukáš Havrlant
Ja taky netvrdim ze je to opis :) to urcite ne.

16. August 2006, 11:26

Tak jsem se na to pokusil podívat trošku víc do hloubky a napadlo mě toto řešení (bez javascriptu a bez opakujícího se text uvnitř spanu). Ani to není úplně bez much, ale nic lepšího mě nenapadá.

# RaĎim
17. August 2006, 01:36

Malis: To je myslím o dost lepší řešení. To s tím spanem by se dalo doladit přes javascript (ve zdrojáku by bylo jenom čisté h1 a bez stylů by to bylo jenom jednou), ale hlavně jsem chtěl říct, že nevím jak vám, ale u mě to v MSIE zrovna moc hezky nevypadá (myslím to řešení Malise).

# RaĎim
17. August 2006, 01:39

No ale jinak, lidi, upřímě, udělali byste něco takového na svých stránkách? A kdybyste chtěli už takový lépe vypadající nadpis, který by měl stín a podobné věci, neudělali byste to už přecejenom přes ten obrázek?

17. August 2006, 12:14

@Béďa: No zvládnout DOM je opravdu těžký problém? Knihoven pro DOM jsou už dneska desítky a Google by s tím neměl mít zas takový problém, narozdíl od Seznamu heh (to zas bude útoků na MiSHAKa)

Zdvojený text je starý jako CSS… Jinak se asi musíš docela nudti, že vymýšlíš takové „ptákoviny“ :)

17. August 2006, 12:20

Mishak
Tak ještě můžu psát o tom, jak je XHTML pro běžné stránky postradatelné, jestli by se ti to líbilo víc :o).

20. November 2006, 13:32

Našiel som jednoduchšie riešenie, pracuje aj pri vypnutom JavaScripte alebo pri zapnutom JS a vypnutých CSS štýloch korektne samozrejme bez tieňov

9. December 2006, 13:54

V CSS 3 na to bude styl.

Komentáře jsou uzavřeny