Změna velikosti písma

Drobečková navigace

CSS blog > Texty v hlavičce

Texty v hlavičce



HTML

<a id="headerText" title="CSS blog" href="http://ipopage/?oid=2874093">CSS blog</a>

CSS

#headerText {
    color: white;
    font-family: Impact,Charcoal,sans-serif;
    font-size: 4em;
    left: 100px;
    position: absolute;
    top: 50px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    -moz-transition:all 0.3s ease-out;
    -webkit-transition:all 0.3s ease-out;
    -ms-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
#headerText:hover {
  -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

Texty do hlavičky stránek přidáváme kvůli SEO, vrstvení grafiky, efektům a hlavně také lehké editaci. Obdobně přidáváme do headeru stránek i obrázky (loga, CTA buttony atd.), které můžeme směřovat na konkrétní stránky oproti headeru, který vždy směřuje na stránku úvodní.

Použití textů pro odlišné jazykové mutace

Textům s jiným překladem postačí dát stejnou class a odlišné ID a to skrýt/zobrazit podle jaz. mutací v CSS. Pokud budeme mít třeba:

HTML

<a class="headerText" id="headerTextCZ" href="#">Úvod text</a>

<a class="headerText" id="headerTextEN" href="#">Homepage text</a>

<a class="headerText" id="headerTextDE" href="#">Startseite text</a>

CSS:

.headerText {

.... ....

}

#headerTextCZ, #headerTextEN, #headerTextDE {

display:none;

}

html[lang="cs"] #headerTextCZ {

display:block;

}

html[lang="en"] #headerTextEN {

display:block;

}

html[lang="de"] #headerTextDE {

display:block;

}


Komentáře


  • 19. 2. 2013 8:55
    Mirek Sáblík
    Texty v hlavičce

    Jak lze texty v hlavičce použít u více jazykových mutací, kdy je potřeba do hlavičky vložit text v různých jazycích a korektně zobrazit pro danou mutaci správnou verzi?
    Prvky, vložené přes "... -horní HTML", se zobrazí ve všech mutacích.


  • 19. 2. 2013 10:55
    Ondřej Kohout - Moderátor
    Re: Texty v hlavičce

    updatnul jsem článek o příklad jak to provést s jaz. mutacema. Jediné, kde to možná nebude fungovat je IE6, ale to bych bral jako bezpředmětné ;)


  • 25. 2. 2013 15:34
    Mirek Sáblík
    Re: Texty v hlavičce

    Díky, funguje to, rovnou jsem to vyzkoušel na
    http://www.rykov.cz - Chrome, Firefox, IE7+
    Na ty hranaté závorky jsem úplně zapoměl :-)


Kalendář akcí

Po Út St Čt So Ne
25 26 27 28 29 30 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5