Barva podtržení odkazu
Stručná otázka do pléna: Lze nějak zařídit podtržení odkazů jinou barvou, než je barva textu?
… obligátní odpověď: Ano, lze!
… živá ukázka …:
HTML:
<a href="#"><span>modry odkaz s cervenym podtrzenim</span></a>
CSS:
a {color:red}
a span {color:blue}
a span {color:blue}
Funguje v MSIE6, MSIE5.5, Opera 7.54 a Firefox 1.0, nefunguje v MSIE5. Jinde nebyla ukázka testována.
Související:
- Petr Weida: Podtrhněte odkaz libovolnou barvou (About Weblog, 22. prosince 2004)
- underline color (diskuse.Jak psát web.cz, 6. prosince 2004)
- Publikováno: 22. prosince 2004
- Trvalý odkaz: http://www1.mraveniste.org/weblog/2004/12/22-barva-podtrzeni.html
- Autor: Jan Bien
Komentáře
Ještě bych doplnil, že je možné zrušit podtržení a nastavit border-bottom v jiné barvě:
a {color:blue;border-bottom:2px solid red;text-decoration:none;}.No, dávat do každého odkazu navíc span je teda pěkný „opruz“. Navíc to někdy není ani možné, pokud používám nějaký CMS. Takže zbývá jen ten border-bottom.
Ad Jiří Chomát: To má ale tu vadu, že je čára vzdálenější od textu, než při normálním podtržení. Její přiblížení se mi žádným způsobem nějak nedaří.
Ad David Špinar: Ano, v normálním textu je to na houby. Ale někde v nějakých generovaných seznamech nebo navigaci se to může hodit. Kdo ví! Ona ostatně různá barva podtržení a textu je docela nezvyk (snad nikde jsem to neviděl), takže to je celé možná úplně nepoužitelné.
Este sa tam da cez CSS fuknut do podciarknutia aj obrazok. Napriklad ako na webu Nova Lesna. Moze byt dokonca ja animovany, niekde som to videl (uz neviem, a vyzeralo to pekne).
Pozn. JB.: Komentář byl upraven.
Uau, dobra hracka ;-) take do kategorie „uau to je ale jednoduche, preco doteraz na to nikto nedosiel?“ :-) Len si fakt myslim, ze castejsie sa bude pouzivat border-bottom.
Ad [4]: ten typ podciarknutia tusim vysiel v nejakom ALA.
Viz můj příspěvek na foru JPW. Navíc funguje i hover efekt, ačkoliv chce malý trik, více zjistíte ze zdrojového kodu: underline color (diskuse.Jak psát web.cz, 6. prosince 2004)
Ad [4]: CSS Design: Custom Underlines (A List Apart, 2. února 2004)
Border-botom NENI podtrzeni. Ze to dokaze vypustit zrovna David Spinar, me dost prekvapuje. Osobne border-bottom u inline prvku misto podtrzeni moc nepouzivam ani nedoporucuji z nekolika duvodu:
Jinymi slovy - zatimco podtrzeni umi prakticky kazdy browser a nijak textu neublizi, border-bottom kazdy umet nemusi a navic to muze zhorsit pristupnost.
Jedine aspon trochu vhodne pouziti je opravdu jen v tech textech separovanych od okolniho textu (polozky menu apod.).
Ad [8]: Pixy, já tuhle metodu (border-bottom) rozhodně nepropaguji, ale pokud z jakéhokoliv dobrého důvodu potřebuji podtrhnout text jinou barvou, přijde mi tato metoda lepší než vnořené spany. Notabene to v některých případech ani nepůjde jinak (ty CMS apod.).
A co se týká přístupnosti? No, nevím. Jediné riziko mě napadá u použití MSIE5, které to pro inline prvky neaplikuje. Nic víc.
Ale abych se vyjádřil opravdu k věci a nikdo mě nepodezíral z propagace pochybných technik: Rozhodně bych to nedoporučil masivně používat.
Já používám to border-bottom a naopak se mi ten větší odstup od textu líbí. :o) Navíc bývá to podtržení širší než text, takže je to i výraznější oproti klasické odkazu (viz. http://www.jsdesign.cz/autovackov/)
Jak zde ale zaznělo, je tam problém s přístupností a konkrétně MSIE 5.0. To řeším tím že pro něj tam dávám klasický odkaz bez border-bottom.
Pozn. JB.: Komentář byl upraven.
Hmm, jestli to je k necemu dobry, tak bych to ale resil spis skriptem na onload, nez ze bych zaplevelil kod.
Jak je videt, jsou dve metody jak neco podtrhnout. Nevyhody toho nekorektniho zpusobu lze vynikajicim zpusobem zuzitkovat k vytvoreni dvojiteho. podtrzeni. Ano ctete dobre – dvojiteho.
Váš komentář
K článku nelze připojit komentář, Mraveniště bylo zakonzerováno.