Obrázková odrážka

Kaskádové styly používají k obrázkové odrážce vlastnost list-style-image s adresou obrázku zadaného do url().

element {list-style-image: url(odrazka.png)}
  • Text s obrázkovou odrážkou,
    může být i
    víceřádkový.
  • U obrázkové odrážky vytvořené přes list-style-image lze měnit umístění.
  • Prohodit umístění odrážky (list-style-position)

Jak je vidět, nastavit přesnou posici obrázku pro list-style-image odrážku není možné. Dosáhnout přibližného zarovnání lze docílit nastavením line-height shodného s výškou obrázkové odrážky. Jelikož je ale možné text na webu zvětšovat, za moc toto řešení nestojí.

Normální pozadí (background-image)

Z výše popsaných důvodů se nabízí používat obyčejné obrázkové pozadí:

  • Seznamu <ul> nebo <ol> se odrážky zruší:

    ul {list-style: none}
  • Položkám se přidá levý padding o šířce obrázku + něco málo navíc jako odsazení:

    li {padding-left: 30px}
  • Položkám ne nastaví neopakující se obrázek (no-repeat):
    li {background: url(odrazka.png) no-repeat}
  • Text s obrázkovou odrážkou,
    může být i
    víceřádkový.
  • U obrázkové odrážky vytvořené přes background lze měnit umístění.
  • Změnit umístění odrážky (background-position)

CSS sprite a absolutní posicování

Máme-li na stránce kvůli rychlejšímu načítání obrázky spojené do jednoho (tzv. CSS sprite) a nechceme-li odrážku vyčlenit do zvlášť souboru, nezbývá než posicovat.

<ul>
  <li><span class="css-obrazek odrazka"></span> Text
</ul>
li {position: relative; padding-left: 30px}
.odrazka {position: absolute; left: 0; top: 0}

Pro vycentrování doprostřed řádku stačí použít běžné centrování, kdy se odrážka umístí na 50% a polovina výšky obrázku se odečte záporným marginem.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře