Přizpůsobení textu motivu

27. 9. 2016

Text motivu šablony Hanami disponuje několika předdefinovanými hodnotami, které můžete libovolně upravit pomocí stylu CSS. Kde tyto změny můžete provádět, se dozvíte v jednom ze základních příspěvků Práce s vlastním CSS stylem. Samotný obsah textu lze upravit dle návodu Text motivu.

Text motivu je v šabloně zapsán následujícím kódem:

<div id="motto">
  <p id="motto-title">
    Šperky a snubní prsteny
  </p>
  <p id="motto-text">
    Exkluzivní výrobky od nejlepších šperkařů
  </p>
</div>

Prvek #motto obsahuje titulek ( #motto-title ) a podtitulek ( #motto-text ). Přidáváním vlastností prvku #motto se tedy způsobí změny v obou podřadných prvcích.

Předdefinované hodnoty

Samotný prvek #motto neobsahuje v základu žádnou vlastnost, přiřazené vlastnosti titulku a podtitulku jsou vypsány níže:

Vlastnosti titulku

#motto p#motto-title { 
  margin: 150px auto 0px auto; 
}

tento zápis aplikuje definované vlastnosti na všechny odstavce (p) uvnitř prvku #motto, které jsou označené identifikátorem #motto-title.

#motto #motto-title { 
  color: #fff; 
  font-size: 5em; 
  font-weight: 900; 
  text-shadow: -1px 2px 5px rgba(0, 0, 0, 0.22); 
}

Tento zápis aplikuje definované vlastnosti na všechny prvky uvnitř prvku #motto, které jsou označené identifikátorem #motto-title. 

V obou případech na Hanami ovlivňujeme stejný prvek, zápis je rozdělen pouze pro ukázku jeho možností.

Vlastnosti podtitulku

#motto #motto-text { 
  color: #000; 
  font-size: 20px; 
  text-transform: uppercase; 
  font-weight: bold; 
  width: 50%; 
  margin-left: auto; 
  margin-right: auto; 
  text-align: center; 
}

V závislosti na zvolené barevné variantě pak může být kód doplněn ještě o vlastnost barvy, která přepisuje barvu základní. Například v růžové variantě Hanami je podtitulek přebarven na šedou:

#motto #motto-text { 
  color: #e8e8e8; 
}

Význam většiny použitých hodnot naleznete v článku CSS uživatelské základy. Níže uvádíme vysvětlení předdefinované vlastnosti text-shadow, text-transform a doplňujeme letter-spacing.

Pokročilé vlastnosti

Text-shadow

- přidá stín textu

Zapisuje se:

text-shadow: 2px 2px 8px #ff0000;

ve smyslu:

stín textu: horizontální umístění, vertikální umístění, rozmazání, barva;

Číselné hodnoty lze zadávat v jednotkách délky (px, pt, cm, apod.) a procentech (%), jsou povoleny také negativní hodnoty. Barvu lze zadat HEX kódem, RGB či validním názvem. Pokud si přejete vlastnost odstranit, učiníte tak zadáním hodnoty none.

Text-transform

- určuje velikost písmen textu

Zapisuje se:

text-transform: uppercase;

ve smyslu:

transformace textu: všechna písmena verzálkami;

Další možné hodnoty vlastnosti text-transform:

none - žádná transformace

capitalize - první písmeno každého slova velké

uppercase - všechna písmena velká

lowercase - všechna písmena malá

Letter-spacing

- určuje velikost mezer mezi jednotlivými písmeny

Zapisuje se:

letter-spacing: 1px;

ve smyslu:

velikost mezery mezi písmeny: jeden pixel;

Hodnotu lze zadat v jednotkách délky (px, pt, cm, apod.) a jsou povoleny také hodnoty negativní. Dále je možné vlastnost uvést do výchozího nastavení pomocí hodnoty normal.