Transparentnosť značiek: Neviditeľnosť CSS

Projekt lokality a jej dialóg s návštevníkom môžu byť efektívne realizované prostredníctvom transparentnosti. Pravidlo opacity CSS umožňuje nastaviť priehľadnosť obsahu značky od 0 do 1, tj od úplnej transparentnosti po úplnú nepriehľadnosť.

Vo všeobecnosti je transparentnosť obdĺžniková. Ale ak budete používať pravidlo: background-color: transparent, a tvoria obraz (napríklad vo formáte * .png), iné ako obdĺžnikové, môžete dosiahnuť takmer žiadny vplyv.

syntaxe pravidlá transparentnosti

Za použitia prevedenie: opacity: 0,4 - pri opise štýlu alebo trieda robí transparentnosť číslo značky, ku ktorému sú použité, 40%. Hodnota transparentnosti štýlu písomných čísel od 0 do 1. Spodná hranica znamená úplnú transparentnosť, že značka nebude vidieť, a horný limit - úplný nedostatok transparentnosti, ktorý nie je vidieť všetko pod značkou.

Všimnite si, že pravidlo CSS opacity pôsobí ako na pozadí (farba, obrázok), tak aj na ráme a texte v tagu. Preto navrhovaní osobitný dialóg vhodné rozdeliť svoju podporu pre text na ňom (vytváranie rôznych štýlov pre tieto položky), alebo zvoliť také farby, ktoré vyzerajú dobre na pozadí stránky na zvolenej úrovni transparentnosti.

Viditeľnosť transparentný prvok

Aj v prípade, že transparentnosť je nula, že prvok je neviditeľný, je prítomný v prehliadači a môžu vytvárať udalosti.
V tomto prípade obraz s jahodami značkou umiestnená v kruhu s motýľ av ňom - ​​značka s textom Click Me! priehľadnosťZnačka s motýľom je 0,5 a text je 1, resp. Text je úplne nepriehľadný. Ak nastavíte príkaz na spracovanie udalostí, napríklad kliknutie na textovú značku a akú úroveň priehľadnosti nebude v tejto značke, kliknutie na jej mieste bude vždy fungovať.

Uplatňovanie pravidiel transparentnosti

Logika uplatňovanie pravidiel transparentnosti v klasickom ako CSS pozadie, nepriehľadnosti = 0,3 - 0,5: Okno so správou alebo dialógového okna vyskočí nad všeobecnou pozadie stránky, stačí ju pokrýva, av dialógu s návštevníkom. Táto prax sa stala samozrejmosťou, že miesto bez takejto funkčnosti už nie je považované za moderné.

Medzitým v pravidlách transparentnosti existujú ďalšie oblasti použitia. Po prvé, táto animácia: obaja s pomocou pravidiel CSS a spravovaný javascript. Prvou možnosťou je vhodnejšie, napríklad zmenou CSS krytie zamestnanecká @keyframes, ktoré sú používané pravidlo CSS animácie, môžete rýchlo a efektívne vykonávať tlačidlo animácie menu či firemné logo, žiadny iný obsah stránok obsahu tag.
Použitie rôznych úrovní transparentnosti v značkách, ktoré sú uložené na seba, vám umožní vytvoriť originálne vizuálne efekty. Bohužiaľ, priehľadnosť na zariadeniach, ktoré nepodporujú myš, neodhalilo niekoľko zaujímavých vizuálnych nápadov, ale ak budete používať CSS krytia zvyčajne oneskorený, pohyb prstov na obrazovke smartfónu, napríklad, môže byť oživený v neočakávaných cestách.

Súvisiace publikácie