0 Kč s DPH

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.

Tým inPage
admin(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.