Jednoduché stínování textu
2006-08-15 21: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í:
Komentáře
Nenapadlo by mě asi něco podobného dělat, ale jako – dobrá práce!
Ne ze bych to chtel nejak shazovat, ale je to dost stare. Bohuzel uz neznam autora. Mozna casem dopisu.
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 :-).
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í :)
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čů).
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…)
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…
Re: Zerog. Patrně první koho to napadlo byl v roce 98 Jirka Kosek. Viz http://www.kosek.cz/…l/styly.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.
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.
Radek Hulán
Já mám tedy za to, že vyhledávače Javascript neinterpretují… A tudíž žádný zdvojený nadpis nevidí.
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.nawebu.cz/…04/0129.html
http://www.markcarey.com/…ascript.html
http://www.markcarey.com/…t-links.html
Nemyslím si, že by uměl JS na takové úrovni aby zvládl getElementsByTagName, ale možné to je.
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á.
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).
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?
@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“ :)
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).
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
Komentáře jsou uzavřeny