Spriehľadnenie prvku pomocou CSS

Ak chceme nejaký prvok sčasti alebo úplne spriehľadniť (stále však má svoje miesto v stránke, na úplne zmiznutie slúži deklarácia display: none;) môžme použiť vlastnosť opacity.

Nasledujúce príklady deklarujú rovnakú priehľadnosť:

opacity: 0.5;
opacity: .5;

Príklady využitia vlastnosti opacity:

Často narazíme aj na situácie, kedy potrebujeme spriehľadniť iba dané pozadie a text zachovať čitateľný. Práve na takéto situácie je tu pre nás formát zadávania farby v tvare RGBA, pričom „R“ (red) je červená, „G“ (green) zelená, „B“ (blue) modrá, a „A“ (alpha) deklaruje priehľadnosť.

Ako môžte vidieť na nasledujúcej živej ukážke, v niektorých prípadoch je formát RGBA užitočnejší ako opacity:

Opacity vs. RGBA

Je pravda, že aplikovanie priehľadnosti na prvky našej webovej stránky môže umocniť pôžitok užívateľa, ale nie je vhodné, používať ju všade. Staršie prehliadače vlastnosť opacity nepodporujú a RGBA je pre nich tiež nepoznaná novinka. Snažte sa preto túto vlastnosť a formát farby používať tak, aby ste užívateľovi bez podpory prehliadača nezamedzili prehliadať obsah vašej webovej stránky.

Ak by ste niečomu nerozumeli alebo v článku našli chybu, pokojne prispejte do komentárov.

Napište komentář!