Návrh místa a jeho dialog s návštěvníkem mohou být účinně prováděny prostřednictvím transparentnosti. Pravidlo opacity CSS umožňuje nastavit průhlednost obsahu značky od 0 do 1, tj. Od úplné průhlednosti až po úplnou neprůhlednost.

Obecně platí, že průhlednost je obdélníkový. Ale pokud použijete pravidlo: barva pozadí: průhledná a tvar obrazu (například ve formátu * .png), jiný než pravoúhlý, pak můžete dosáhnout prakticky jakéhokoli efektu.

Syntaxe pravidel průhlednosti

Použití konstrukce: opacita: 0,4 - V popisu stylu identifikátoru nebo třídy je průhlednost značky, na kterou jsou použity, 40%. Hodnota průhlednosti stylu je napsána od 0 do 1. Dolní mez znamená úplnou průhlednost, to znamená, že značka nebude viditelná a horní hranice je celková nepropustnost, to znamená, že nebude vidět na všechno pod značkou.

Všimněte si, že pravidlo opacity CSS funguje jak na pozadí (barva, obrázek), tak na rámečku a textu v tagu. Proto při vytváření dialogového okna je vhodné rozdělit jeho substrát z textu na něj (vytváření různých stylů pro tyto prvky) nebo vybrat barvy, které vypadají dobře na celkovém pozadí stránky na zvolené úrovni průhlednosti.

Viditelnost průhledného prvku

I když je průhlednost nula, tedy neviditelný prvek, je přítomna v okně prohlížeče a může generovat události. V tomto případě na obrázku s jahodou je umístěna značka ve tvaru kruhu s motýlem a v ní je značka s textem Klikněte na mě! Transparentnostoznačit motýla je 0,5 a text - 1, v tomto pořadí, v textu je zcela neprůhledná. Pokud se obsluha události tag set textu, například onclick, pak to, co by se míra transparentnosti nebyla v této značky, klikněte na jeho umístění vždy fungovat.

Uplatňování pravidel transparentnosti

Logika uplatňování pravidel transparentnosti v klasickém jako CSS pozadí, neprůhlednosti = 0,3 - 0,5: Okno se zprávou nebo dialogového okna vyskočí nad obecnou pozadí stránky, stačí ji pokrývá, av dialogu s návštěvníkem. Tato praxe se stala samozřejmostí, že místo bez takové funkce již není považováno za moderní.

Mezitím v pravidlech průhlednosti existují další oblasti použití. Nejprve tato animace: jak pomocí pravidel CSS, tak i javascript. První možností je vhodnější, například změnou CSS krytí zaměstnanecká @keyframes, které jsou používány pravidlo CSS animace, můžete rychle a efektivně provádět tlačítko animace menu či firemní logo, žádný jiný obsah stránek obsahu tag. Použití různých úrovní průhlednosti ve značkách, které jsou vzájemně budou vytvářet jedinečné vizuální efekty. Bohužel, průhlednost na zařízeních, která nepodporují myš, neodhalilo několik zajímavých vizuálních nápadů, ale pokud budete používat CSS krytí obvykle zpožděn, pohyb prstů na obrazovce chytrého telefonu, například, může být oživen v neočekávaných cestách.