Universální hover efekt pro různé barvy pozadí

V případě, že na webové stránce používáme různě barevné odkazy nebo tlačítka, je trochu nepohodlné pro každou barvu zvlášť vytvářet samostatný efekt při najetí myší (:hover).

Dát uživateli potvrzení, že na tlačítko najel změnou stylu, bývá docela vhodné. Jak tedy pohodlně na to?

Průhlednost (opacity)

Jako příklad mohou posloužit tlačítka sociálních sítí:

Cílem je, aby každé tlačítko mělo :hover ve své barvě, aniž by se musela konkrétní barva pro každý jeden odkaz nastavovat.

Nejjednodušší řešení je asi měnit průhlednost (opacity). Buď ji při :hoveru snižovat.

Nebo naopak zvyšovat.

Překrytí průhledným elementem

Výše uvedená změna průhlednosti přecejenom nemusí být vždy ideální. Hezčí efekt jde vykouzlit překrytím jednobarevným elementem, vloženým přes :before/:after.

Tento pseudoelement se absolutně naposicuje přes původní obsah, nastaví se mu pozadí (např. bílá v případě zesvětlení, černá v případě ztmavení) a celé se to hodně zprůhlední (opacity: 0.1).

Zesvětlení

Ztmavení

Samostatná ukázka

Internet Explorer 8 a 9

Alternativně k opacity by šlo rovnou použít rgba, ale to funguje až od IE 9.

Vytvoření pseudo-elementu přes :before/:after sice funguje už v IE 8, nicméně u pseudo-elementů v tomto prohlížeči není možné nastavovat průhlednost. Takže je stejně nejspíš nutné použít další element uvnitř odkazu. Ukázka.

Vylepšení :hoveru

Samotnou podobou hover efektu může ještě vyšperkovat obrázkový CSS gradient (ukázka) nebo přechodový efekt transition.

CSS vlasnost filter

Dle CSS specifikace by se k ztmavení/rozsvícení báječně hodil CSS filter brightness:

.ztmavit a:hover {
  filter: brightness(90%);
}
.zesvetlit a:hover {
  filter: brightness(110%);
}

Bohužel ale momentálně funguje jen ve Webkitu (s prefixem -webkit-). Ukázka.

Použití :focus a :active

Při vytváření :hover stylu je dobrou volbou rovnou stejný styl přidat i pro :focus a :active, pokud tedy :focus a :active nemají už styly vlastní.

Nedá to moc práce navíc a zlepší to uživatelský dojem.