Vlastnost css `transparentnost `je snadný způsob, jak zvýšit zajímavost designu stránky
Dnes se vytváření návrhu webových stránek stává skutečným uměním. Není to jen sada prvků stránky určité barvy a velikost, písma různé styly a tematické kresby. Aby bylo místo odlišné od ostatních, přilákat pozornost návštěvníků a směrovat je k těmto nebo jiným prvkům, používají se obrovské množství metod a nástrojů. Mezi nimi je velmi populární vlastnost css - průhlednost. Tato technika je spíše módní a efektivní, a proto se často používá. Transparentnost můžete zobrazit na různých stránkách - například text, celý blok nebo obrázek. To je také dosaženo mnoha způsoby. Zvažme je níže.
Obsah
Parametry pro definování průhlednosti prvků
Parametry, které umožňují regulovat stupeň průhlednosti prvků, jsou několik. Používají se podle konkrétních účelů, stejně jako prohlížeč, podle kterého je návrh "upraven". Patří sem následující vlastnosti:
- opacita;
- filtr;
- PNG obrázek jako pozadí.
Hodnoty vlastností css "transparentnosti" se mění takto: čím větší je číslice, tím nižší je úroveň průhlednosti prvku. V neprůhlednosti se liší od 0 do 1, ve filtru - od 10 do 100. A druhá se používá pro prohlížeč Interet Explorer a pro všechny ostatní se používá vlastnost opacity.
Transparentnost obrazu (změna)
Začneme tím, když se objeví průhlednost, když umístíte ukazatel myši nad prvek kurzor myši.
Zvažte, jak nastavit průhlednost obrázku. CSS nabízí dvě možnosti. Pro tento účel je nutné ji zapsat přímo do kódu html dokumentu následovně:
- Určete cestu k obrázku.
- Určete nastavení průhlednosti při pohybu kurzorem a ne. K tomu použijeme vlastnosti onmouseover a onmouseout, ve kterých nastavíme hodnoty opacity a filtru.
Stejné vlastnosti lze zapsat do css dokumentu a do zdrojového kódu přidat pouze odkaz. Výsledky jsou stejné.
Transparentnost textu a bloků stránek
Co se týče textu nebo bloku (průhlednost div), css navrhuje použití možnosti podobné vytvoření transparentnosti obrazu, tj. Pomocí připojeného css souboru, ve kterém budou nastaveny požadované parametry. Můžete jít jednodušeji. Při zadávání stylů bloku stylu div nebo p textu předepište následující html kód pro prvky onmouseover a onmouseout. Obě možnosti fungují a poskytují požadovaný výsledek.
Konstanta průhlednosti
V některých případech je třeba průběžně specifikovat průhlednost objektu, konstrukčního prvku nebo textu. V této situaci je řešení dokonce jednodušší, než když umístíte kurzor myši.
Pro prvek css je průhlednost dána následujícím kódem. V bloku div štítu přidáváme hodnoty pro pozadí (například # ff8800), opacitu (např. 0,5), stejně jako šířku a polstrování.
Pro obrázek v kódu zadáme hodnoty opacity a filtru a také zadáme cestu k obrázku.
RGBA metoda
Existují další možnosti pro použití této vlastnosti css: průhlednost lze aplikovat na barvu pozadí libovolného konstrukčního prvku. Pro tento účel se používá metoda RGBA. První tři písmena označují primární barvy (červená, plná, modrá) a poslední jedna - alfa, která nastavuje úroveň průhlednosti. Pomocí formátu RGBA předepište stupeň průhlednosti a označte ji v poslední číslici. Je to například: pozadí: rgba (240,2,33,0,4035).
Závěr
Použitím jednoduché, ale efektivní vlastnosti css "průhlednosti" v průběhu práce na designu lokality můžete své prvky lépe a vidět, s minimálním úsilím. Popsané možnosti pro určení charakteristik průhlednosti vám v tom pomohou.
- Rozteč řádků, CSS, základy
- Pozadí. Co to je? Volné generátory pozadí pro web
- Použití funkce CSS `display: none`
- Zarovnání středu: rozložení CSS
- Struktura dokumentu HTML: hlavní značky, příklad
- Příkazy HTML pro vytváření webových stránek
- Jak vytvořit trojúhelník v CSS: nejvhodnější způsoby
- CSS: návrh tabulek. Příklady designu
- Nastavení v CSS: vzdálenost mezi čarami
- CSS Framework: Impromptu a efekt
- Jak vytvořit průhlednost ve Photoshopu?
- HTML tagy: layout, programování, design
- CSS font-weight property: jak nastavit sytost písma
- Jak vložit obrázek do HTML bez problémů
- Pomocí prvků DOM přes jаvascript getElementById
- Jak si sami vytvořit banner pro webové stránky
- Co je to "layout div" při vytváření webu, jeho výhody a nevýhody
- Co je rozvržení webu? Rozložení tabulek a bloků: rozdíly
- Popisek: Funkce a způsoby vytváření
- Podtržení v html: způsoby.
- Animace CSS: příklady aplikací