Autor Zpráva
Cigan
Profil *
Neviete niekto ako s da v CSS urobit tien (stín) pisma - tak ako na http://www.stv.sk
habendorf
Profil
Při vší snaze tam žádný stín nevidím. Kde přesně tam je?
Cigan
Profil *
V tom menu:

"TV program
Relácie A-Z
Filmy
Seriály
Dokumenty
Publicistika
Šport" Pozri sa na to z menšej vzdialenosti. Este nieco, malo by to ist v IE.
T3RMiX
Profil
nevim jesli to neni v tomto http://www.stv.sk/top_navigation/style.css

a#top_stvhome:hover,a#top_superstar:hover{background:#999 url(http://www.stv.sk/top_navigation/images/over.gif);}

uz nastesti jdu z prace takze bohuzel nemam cas to pitvat
habendorf
Profil
Hm, tak přes obrázky, to je jedna možnost. Napadá mě ještě jedna bez obrázků, snad to není úplná blbost: Mít tam ten text dvakrát, jeden v barvě textu, jeden v barvě stínu. Ten v barvě stínu pak napozicovat např. o 1px výš a 1px doprava a zapsat ho jako první (abys nemusel z-indexovat). Stín pak bude vržený doprava nahoru.
Spikee
Profil
Ak by si to chcel mať na svojej stránke, tak myslím, že habendorfov návrh je lepší a jednoduchší...
Cigan
Profil *
habendorf

pri tom Tvojom sposobe je ale asi nutne pouzit 'position:absolute' Ci nie? Pri 'position:relative' sa to neda?
habendorf
Profil
Nechci říct uplně natvrdo, že to přes relativní nejde, možná by to šlo nějak domyslet. Ale měl jsem na mysli samozřejmě absolutní pozicování.
Cigan
Profil *
Tu je to s 'position:absolute':


<html>
<head>
<title>tieň písma</title>
<style>
.pismo { position:absolute; top:20px; left:20px; color:#006699; font-weight:bold; font-family:"Trebuchet MS", Verdana}
.tien { position:absolute; top:19px; left:21px; color:#0099FF; font-weight:bold; font-family:"Trebuchet MS", Verdana}}
</style>

</head>

<body>

<span class="tien">SLOVENSKO</span>
<span class="pismo">SLOVENSKO</span>

</body>
</html>
habendorf
Profil
Dobrý, jsem rád že to funguje. Nepřehodil jsi omylem barvy? Nemá ten stín být tou tmavší barvou?
Cigan
Profil *
Yuhu, Ty nevies? Nespi :-)
Cigan
Profil *
Moze to byt aj opacne. Ja by som to ale chcel s 'position:relative'. Toto mi je nanic... :-(
habendorf
Profil
<html>
<head>
<title>tieň písma</title>
<style>
.pismo { position:relative; top:20px; left:20px; color:#006699; font-weight:bold; font-family:"Trebuchet MS", Verdana}
.tien { position:relative; top:21px; left:-70px; color:#0099FF; font-weight:bold; font-family:"Trebuchet MS", Verdana}}
</style>

</head>

<body>


<span class="pismo">SLOVENSKO</span>
<span class="tien">SLOVENSKO</span>
</body>
</html>
Cigan
Profil *
Hm, dobré.

A co hovoris na dvojity tien? ;-)


<html>
<head>
<title>tieň písma</title>
<style>
.pismo { position:absolute; top:20px; left:20px; color:#003366; font-weight:bold; font-family:"Trebuchet MS", Verdana}
.tien1 { position:absolute; top:19px; left:21px; color:white; font-weight:bold; font-family:"Trebuchet MS", Verdana}
.tien2 { position:absolute; top:18px; left:22px; color:red; font-weight:bold; font-family:"Trebuchet MS", Verdana}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"></head>

<body>

<span class="pismo">SLOVENSKO - ČESKO 3:0</span>
<span class="tien1">SLOVENSKO - ČESKO 3:0</span>
<span class="tien2">SLOVENSKO - ČESKO 3:0</span>

</body>
</html>
habendorf
Profil
Hm, řekl bych, že se už trochu zhoršuje čitelnost.
Cigan
Profil *
A takto to je asi uplne najlepsie. Je pouzite 'position:relative' a najma je pouzita relativna jednotka (em).

<html>
<head>
<title>tieň písma</title>
<style>
.pismo { color:#003366; font-weight:bold; font-family:"Trebuchet MS", Verdana; font-size: 14px;}
.tien { position:relative; top:-1px; left:-5.9em; color:#0099FF; font-weight:bold; font-family:"Trebuchet MS", Verdana; font-size: 14px;}
</style>

</head>

<body>

<span class="pismo">SLOVENSKO</span>
<span class="tien">SLOVENSKO</span>

</body>
</html>


Aj tak sa mi to ale este nezda byt dokonale...
Cigan
Profil *
Ano, mas pravdu, citatelnost sa zhorsuje. Samozrejme, ten dvojity tien nikde na stranku nedam, to som len skusal, ako to bude vyzerat.

Inak, dakujem za spolupracu... :-)
habendorf
Profil
Ještě jedna věc: se změnou velikosti písma se to rozjíždí, dobře je to vidět ve ff nebo opeře.
habendorf
Profil
Ještě mrkni sem: http://www.jakpsatweb.cz/css/css-filtry.html#kcemu

filtr DropShadow (MSIE only)
Cigan
Profil *
OK, dík.
Cigan
Profil *
Mne sa to zobrazilo dobre aj v Opere. Ale pomocou 'left:-5.9em'
habendorf
Profil
Jo, já to zkoušel s tím em. Ale rozjíždí se to. Místo toho 5,9 by musela být nějaká proměnná, ale to po mě fakt nechtěj :o)
Cigan
Profil *
Pomylil som sa. Aj mne sa to rozchadza. Uvidime, ci zareaguje Yuhu :-) a vyriesi to uplne - to rozchadzanie.
Yuhů
Profil
to rozcházení myslím obecně vyřešit nejde. Každej prohlížeč má em jinak velkej. Já bych na to asi použil pixely a smířil bych se s tím, že to s různou velikostí písma bude jinak velké.

Další věc je problém duplicitního textu. Jak je jedna informace ve stránce dvakrát (bez zřejmého informačního smyslu), tak je to podle mě spíše špatně.

Já fakt nechápu, proč neexistuje / není podporován styl, který by objektu přidal stín. Ach jo. Jak dlouho ještě budeme bastlit, než se věci stanou normálními?!

Yuhu, Ty nevies? Nespi :-)

Omlouvám, se, ale v 15:53 SEČ jsem opravdu ještě spal.
Cirdan
Profil *
To Yuhu: jakze nie je styl? Je ale funguje len v IE... toto: dropshadow(color=#6b8e23, offx=5, offy=5, positive=1) napriklad. Ja som to parkrat pouzil a v IE to vyzera celkom pekne ked je to dobre urobene a pekne skombinovane...
llook
Profil
Já bych to řešil Javascriptem. Stínovanému textu bych dal nějakou třídu a každý element s touto třídou bych nějak zdvojil.
Sice by to nefungovalo bez Javascriptu, ale lepší než nějaké <span class="stinovany">text<span>text</span></span> a podobné.
Podobně jako když jsem vymýšlel text blikající dvěma barvama, také to šlo udělat dvojitým textem čistě CSS (nějak takhle: <span style="position: relative; color: red;">text<span style="position: absolute; text-decoration: blink; color: blue;">text</span></span>), ale dvojitý text na stránce:
1 - zásadně narušuje sémantiku.
2 - znečitelňuje stránku uživatelům bez stylů.
3 - hodně blbě se udržuje.
waft
Profil
p.stienom {text-shadow: #eee 1px 2px 1}
p.stienom {text-shadow: farba x-posunutie y-posunutie rozmazanie}

ale funguje to len v safari
Toto téma je uzamčeno. Odpověď nelze zaslat.