Trendovní pozadí textu v CSS

Již nějakou dobu, řekněme několik let, je v různých tiskovinách (např. magazín Level) ale i na webových stránkách k vidění grafický prvek, který bych popsal jako pozadí za textem nekryjící celý odstavec – „obdélník“, ale pouze oblast, nad níž je text. V případě textu zarovnaného do bloku by byl rozdíl logicky vymazán. Jako obvykle, obrázek (a html soubor) to vysvětlí lépe než má slova.

ukázka

Jak takovéhoto vzhledu docílit? Je zřejmé, že nemůžeme stylovat samotný odstavec p, protože ve výchozím stavu se chová jako blokový prvek. Dovnitř odstavce tedy vložíme jiný, typicky řádkový prvek ? span, který bude taktéž obepínat celý text. Teprve ten se stane objektem stylování.

V prvním kroku přiřadíme spanu background.

p span {background: #cde;}

Funguje to, ale až na jeden detail. Mezi řádky se objevily nepěkné bílé mezery. Spany z principu nezabírají prostor mezi řádky a jejich background do těch míst nesahá. Výchozí line-height odstavce je nějakých 1.2em a vynulování line-heightu není řešením, protože by tím utrpěly praktické, případně i estetické „parametry“. Patřičného efektu docílíme přidáním svislého paddingu spanu.

p span {background: #cde; padding:0.05em 0;}

Řádky splynou, bílé mezery zmizí, máme hotový „cool-back-text“ :-). Padding samozřejmě závisí na nastaveném line-heightu, pokud zadáme hodnotu v em, máme relativní jistotu že splynutí řádků vydrží i při případné změně velikosti textu v prohlížeči.

Html soubor se všemi (třemi) kroky (a s css kódem).


Komentáře (3)

k formuláři

RSS kanál komentářů

    • Komentář číslo: 1
    • *
    • Jméno: Honza
    • Odesláno:
      8.6. 2006 — 18:42

    Pěkné, hezké, jen malé “rýpnutí” – jak a k čemu to využít v praxi? Ale opakuji, řešení se mi moc líbí.

    • Komentář číslo: 2
    • *
    • Jméno: Kahi
    • Odesláno:
      9.6. 2006 — 10:18

    → díky. Je to jen grafický prvek, o jeho použití myslím rozhoduje vkus nebo grafické cítění. Pokud našel uplatnění v tištěných textech, není důvod proč ho nepřenést do webu… a zřejmě už se tak stalo :-).

    • Komentář číslo: 3
    • *
    • Jméno: Vit-ass
    • Odesláno:
      9.10. 2014 — 20:21

    využití je možné například při podbarvování nadpisů

Přidat komentář

Nápověda ke psaní komentářů

Zde formátuje Texy!

  • *zvýraznění*
  • **silné zvýraznění**
  • > citace
  • "odkaz":http://kam
  • [4] reakce na komentář
  • zdrojové kódy a více

komentáře

úplně nahoru