Průhlednost CSS a její aplikace pro různé prvky

Stylové prvky na vašem webu mohou být nepochybně nazývány jedním z nejdůležitějších úkolů, kterým čelí webmaster. Tady, jako v životě, se setkat na oblečení. Unikátní styl, krása a současně jednoduchý a intuitivní design nejen pomohou udělat první dojem, ale také přilákat nové čtenáře, zákazníky nebo zákazníky, v závislosti na směru webu.

Průhlednost obsahu

Vytváření prostředků CSS-transparentnosti obsahu, pro začátek stojí za pochopení, jak je třeba předepsat samotnou formu. Samozřejmě, že v tomto materiálu nebudou žádné standardní značky pro programování stránky stránek obecně. Pro ilustrativní příklad se zaměříme na obdélníkovou oblast, barevnou monotónní výplň. Chcete-li jej zobrazit, musíte vytvořit jednoduchý styl stylu CSS s následnou vazbou nebo kód umístěte přímo na stránku html dokumentu. Po předepsání potřebných parametrů výšky, šířky, obrysů a obrysů obdélníkového bloku musíte přidat kód do stylu, který vám umožní vytvořit objekt CSS transparentní. Parametr "opacity: 0.X" je za to zodpovědný, jelikož se jedná o úroveň viditelnosti. Čím blíže je hodnota jedné, objekt se stává neviditelným. Tento styl bude fungovat správně v prohlížečích s podporou CSS3. Téměř všechny moderní webové prohlížeče mají nyní takové instrukce.

Zvyšte univerzálnost kódu

Pokud chce programátor optimalizovat obsah pro starší aplikace, bude se muset naučit další styly.

Pro aplikaci Internet Explorer verze 5.5 a vyšší je vnímán kód velmi dlouhá a ošklivá - "filter: progid: DXImageTransform.Microsoft.Alpha (opacity = X)", kde by parametr průhlednosti měl být specifikován nikoliv ve zlomcích jednoho, ale ve stovkách. Maximální hodnota, při níž je barva objektu CSS plná, je 100.

Vlastní kód existuje pro méně populární prohlížeče. Jedním z nich je Konqueror, který je lépe znám uživatelům plochy KDE v systémech typu UNIX. Pro to musíte nastavit průhlednost CSS parametrem "-khtml-opacity: 0.X".

Pro úplnou důvěru v optimalizaci kódu můžete přidat řádek, který poskytuje podporu pro jednu z prvních verzí prohlížečů Mozilla: "-moz-opacity: 0.X".

Díky této optimalizaci může webmaster dosáhnout správného zobrazení svého obsahu na většině uživatelských zařízení.

Aktivita kurzoru

Vzhledem k tomu, že průhlednost CSS je nejčastěji používána jako návrh prvků s hypertextovými odkazy, pohybová aktivita se stává jedním z hlavních úkolů. Jako příklad zvažte stejný obdélník. Předpokládejme, že je nutné, když se pohybujete na bloku, průhlednost se změní z 0 na hodnotu 0,5. Chcete-li získat takovou příležitost, bude nutné přidat pouze již existující styl odpovědný za průhlednost Zadat parametr css Tato vlastnost se také používá k přidávání efektů, jako je změna barvy a tvaru objektů během pohybu myši. To vám umožní vytvořit vizuálně potřebné oblasti, přilákat pozornost návštěvníků k odkazům nebo obsahu.

Aplikace pro obrázky

V případě, že výše popsaný proces je jasný, bude snadné přidávat průhlednost do obrázků pomocí CSS. Nemusíte dokonce provádět změny samotného kódu stylu. Může být ponechán beze změny. Budete muset pracovat pouze s rozložením obrázků v samotném html dokumentu. Pokud jste v předchozích případech vložili prvek používali značky «div», stačí je nahradit "img", vhodným pro tento typ obsahu. Styl pro obrázky je stejný jako u bloků. Samozřejmě s použitím CSS popsaného na začátku článku budete potřebovat změnit parametry výšky, šířky a hran pro harmonický vzhled vloženého obrázku.

Transparentnost textu a pozadí

Příklad textu je podobný vložení obrázků. Vytvářejte průhlednost v CSS samostatně také nevyžaduje. V takovém případě bude nutné značky vyměnit za ty, které se používají pro rozvržení textových polí. Jedná se o "p" a "span".

Když je text napsán v těle html dokumentu bez použití zvláštních značek, přidání průhlednosti bude velmi obtížné a časově náročné. Proto tato možnost nemá smysl zvažovat.

V případě, že by web potřeboval transparentní pozadí, CSS by zde byla tou nejlepší volbou. Vzhledem k tomu, že pozadí je v podstatě stejný obrázek nebo podoba, stačí připojit náš styl do hlavního kódu webového zdroje.