CSS3 RGBa

RGB barva se čtvrtým číslem, jež alfa kanálem říká informaci o hodnotě průhlednosti.

rgba(_red_, _green_, _blue_, _pruhlednost_);

Poloprůhledné RGBa barvy můžete samozřejmě aplikovat všude, kde se v CSS barvy používají. Zdůrazním hlavně rámečky, stíny nebo gradienty.

Porovnání s opacity

opacity: 0.5 zajistí poloprůhlednost celého elementu, ale i jeho dceřiných objektů.

RGBa je barva aplikovatelná na cokoliv bez vlivu na zbytek elementu. Třeba jen na barvu pozadí background: rgba(20%, 100%, 20%, .5).

V prohlížeči vyťukejte cdpn.io/e/HrBsD.

Podpora v prohlížečích

RGBa mají rády všechny prohlížeče kromě osmičky a starších MSIE. Elegantně si se stařečky poradíte definovaným fallbackem:

color: rgb(128, 0, 0);
color: rgba(255, 0, 0, 0.5);

V moderních browserech se zobrazí červená s padesátiprocentní průhledností. V IE8– pak tmavý odstín červené. Fallback barvu musíme určit s ohledem na barvu pozadí. Tady počítáme s černou.

Alternativně použijte CSS3Pie.com.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře