Zadejte hledaný výraz...
Jakub Glos
Webtrh.cz
Vývoj webových stránek na WordPressu a proklientský přístup pro freelancery
Třídenní infromacemi nabitý prezenční + online kurz v Praze od Webtrhu pouze za 2 871 Kč
Více informací

Styl písma pro odrážky

Jakub Lopata
verified
rating uzivatele
(13 hodnocení)
28. 1. 2014 09:05:18
Dobrý den.
Neví zde náhodou někdo jaké fonty jsou použity pro tyto odrážky? Rád bych totiž tyto odrážky udělal pomoci css a ne pomoci obrázku.
28. 1. 2014 09:05:18
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990640
sipka je Open Sans, plus je Arial
28. 1. 2014 09:12:01
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990639
sweet
Takhle nějak? Odrážky
http://klient.plavacek.net/odrazky.html. Připomínám ale, že obrázek na pozadí elementu LI je vždy nejjednodušší řešení.
28. 1. 2014 09:19:28
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990638
Není jednodušší pro seznam využít css funkce content zkombinovat s before? Než to psát takhle.
28. 1. 2014 09:44:33
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990637
bebo
Možná ano, ale mé řešení je zpětně kompatibilní i s prohlížeči, které uvedené vlastnosti neznají. Navíc pomocí :before nevyrobíš imitaci obrázkového plus, protože do této pseudotřídy nejdou vkládat HTML tagy.
28. 1. 2014 09:53:13
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990636
Aleš Trunda
verified
rating uzivatele
(16 hodnocení)
28. 1. 2014 12:17:39
Napsal Plaváček;1049865
bebo
Možná ano, ale mé řešení je zpětně kompatibilní i s prohlížeči, které uvedené vlastnosti neznají. Navíc pomocí :before nevyrobíš imitaci obrázkového plus, protože do této pseudotřídy nejdou vkládat HTML tagy.
before a after je od IE8 - kam až chceme mít kompatibilitu?
a proč bych jako nevyrobil imitaci obrázkového plus přes before - úplně v pohodě a žádné html tagy k tomu přece nepotřebuji
především obrovská výhoda before je, že pro zprovoznění jednoduše přidám pár řádků do css nehledě na to kolikrát to použiji, kdežto v tvém řešení, pokud bych měl těch odrážek 100, tak u každé budu jako opice psát + ! A co když to budu potřeboval potom změnit z '+' na '-', v css změna jednoho řádku, v tvém řešení u 100 odrážek budu dělat 100 změn!
Taky píšeš "obrázek na pozadí elementu LI je vždy nejjednodušší řešení" - v tomto případě, kdy je jako odrážka jednoduché plus, tak nejjednodušší to určitě není. Přes css to udělám ještě jednodušeji a rychleji, než v grafickém programu a stejně tak jakákoli změna se bude přes css taky dělat rychleji. Další nevýhoda - přibližování - obrázek se zdeformuje, řešení přes css ne. A další nevýhoda - obrázek zabere o dost víc místa = větší provoz na serveru, nehledě na to, že si musím někde uchovávat i vektorový obrázek pro případnou změnu, ať to nemusím celé dělat znovu.
Doufám, že jsem to osvětlil jasně a přispěl tak ke vzdělanosti zdejších kodérů.
Občas se tady člověk i nasměje, když čte, co kdo napíše za absolutní nesmysly.
28. 1. 2014 12:17:39
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990635
ivanbohatyr
a proč bych jako nevyrobil imitaci obrázkového plus přes before - úplně v pohodě a žádné html tagy k tomu přece nepotřebuji.
Udělej, prosím, živou ukázku pomocí pseudotřídy :before tak, aby plus mělo červené pozadí a bílý text. Rád se přiučím.
before a after je od IE8 - kam až chceme mít kompatibilitu?
IE 7 ještě zdaleka (bohužel) není mrtvý prohlížeč.
28. 1. 2014 12:31:46
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990634
Aleš Trunda
verified
rating uzivatele
(16 hodnocení)
28. 1. 2014 12:56:40
No v diskuzích rád dám radu, ale naopak rady typu napiš kód dávám nerad, k tomuto slouží sekce poptávky.
Nicméně abych to tedy dotáhnul do konce, tak s touto malou dopomocí to určitě už zvládneš sám:
ul li:after {
content: '+';
background-color: #FF0000;
color: #FFF;
}
nastavení patřičných rozměrů a pozice už určitě nebude problém.
28. 1. 2014 12:56:40
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990633
Oukej, tak pro ty, kteří neřeší starší prohlížeče, aktualizovaná ukázka:
Odrážky
http://klient.plavacek.net/odrazky.html. Lepší je použít pseudotřídu :before.
28. 1. 2014 13:09:03
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990632
Aleš Trunda
verified
rating uzivatele
(16 hodnocení)
28. 1. 2014 13:31:44
Napsal Plaváček;1049977
Oukej, tak pro ty, kteří neřeší starší prohlížeče...
V tomto případě já tohle vůbec neřeším. Pokud někdo opravdu má stále archivní IE7, tak by měl počítat s tím, že v dnešní době mu archivní prohlížeč může přivodit komplikace. Pokud by mělo přes before být na webu logo, tak potom ok, asi by se to umístění loga mělo vyřešit jinak, ale taková drobnost jako odrážka, ta i když nebude zobrazena, tak to neznamená prakticky nic.
28. 1. 2014 13:31:44
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990631
ivanbohatyr
Odrážky u seznamů, zvláště delších, se používají pro zpřehlednění textu. Nepovažuji to za drobnost a dovolím si tvrdit, že zdaleka nejbezpečnější je použití obrázku na pozadí. Nicméně jde o volbu každého kodéra a jsme tak trošku mimo téma.
28. 1. 2014 13:34:38
https://webtrh.cz/diskuse/styl-pisma-pro-odrazky/#reply990630
Pro odpověď se přihlašte.
Přihlásit