Przejrzystość tagów: zasada krycia CSS

Projekt strony i jej dialog z odwiedzającym mogą być skutecznie realizowane przy użyciu efektu przejrzystości. Zasada krycia CSS zapewnia możliwość ustawienia przezroczystości treści znacznika z 0 na 1, czyli z pełnej przezroczystości na pełną nieprzezroczystość.

Zasadniczo przejrzystość jest prostokątna. Ale jeśli użyjesz zasady: kolor tła: przezroczysty i kształt obrazu (na przykład w formacie * .png), który różni się od prostokąta, możesz osiągnąć prawie każdy efekt.

Składnia reguły przejrzystości

Korzystanie z konstrukcji: nieprzezroczystość: 0,4 - w opisie stylu lub klasy identyfikatora zapewnia przezroczystość znacznika, do którego są stosowane, 40%. Wartość przezroczystości stylu jest zapisywana z liczbą od 0 do 1. Dolna krawędź oznacza pełną przezroczystość, to znaczy, że znacznik nie będzie widoczny, a górna granica będzie pełna, co oznacza, że ​​wszystko, co znajduje się pod znacznikiem, nie będzie widoczne.

Pamiętaj, że zasada krycia CSS wpływa zarówno na tło (kolor, obraz), jak i ramkę i tekst w tagu. Ponieważ projektowanie, w szczególności, okno dialogowe wskazane jest oddzielenie tła od tekstu na nim (tworzenie różnych stylów dla tych elementów) lub wybieranie kolorów, które wyglądają dobrze na ogólnym tle strony przy wybranym poziomie przezroczystości.

Przejrzystość przejrzystego elementu

Nawet jeśli przezroczystość wynosi zero, to znaczy element jest niewidoczny, jest obecny w oknie przeglądarki i może generować zdarzenia.

W tym przypadku tag z truskawką ma tag w kształcie koła z motylem, a w nim jest tag z tekstem Click Me! Przezroczystość tagu z motylem wynosi 0,5, a przy tekście - 1, tekst jest całkowicie nieprzezroczysty.

Jeśli w tagu tekstowym ustawiłeś obsługę zdarzeń, na przykład onclick, to bez względu na to, jaki poziom przezroczystości ma ten znacznik, kliknięcie jego lokalizacji zawsze będzie działać.

Zastosowanie zasady przejrzystości

Logika stosowania zasady przejrzystości w klasycznej jakości tle CSS, nieprzezroczystość = 0.3 - 0.5: okno komunikatu lub dialogu pojawia się ponad ogólnym tłem strony, tylko je pokrywa i prowadzi dialog z odwiedzającym. Ta praktyka stała się już nawykiem, że strona bez tej funkcjonalności nie jest już uważana za nowoczesną.

Tymczasem zasada przejrzystości ma inne zastosowania. Przede wszystkim jest to animacja: zarówno poprzez reguły CSS, jak i kontrolowana przez kod JavaScript. Pierwsza opcja jest lepsza, na przykład, zmieniając krycie CSS w ramkach @keyframes używanych w regule animacji CSS, można szybko i efektywnie animować przycisk menu, logo firmy, dowolny inny znacznik w rozumieniu treści witryny.

Używanie różnych poziomów przezroczystości w nakładanych na siebie znacznikach pozwoli ci tworzyć oryginalne efekty wizualne. Niestety, przezroczystość urządzeń, które nie obsługują myszy, nie pozwala ujawnić interesujących wizualnych pomysłów, ale jeśli zastosujesz opóźnioną regułę nieprzezroczystości CSS, ruch palca na ekranie smartfona może na przykład zostać animowany w nieoczekiwany sposób.