Jak uzyskać na stronie efekt przezroczystości na stronie internetowej? [CSS]
Tym razem zajmiemy się przezroczystością na stronie internetowej. Czyli w dużym skrócie pokażę jak w prosty sposób można uzyskać przezroczystość w CSS. Efekt tego typu można bardzo łatwo i szybko uzyskać. Trzeba jedynie wiedzieć jak!
W zależności od tego jaki końcowy efekt chcemy uzyskać, musimy do tego zastosować inną metodę CSS. W tym wpisie pokażę wam 3 sposoby uzyskania przezroczystości. Każdy z nich działa inaczej i przydaje się w innym miejscu.
Właściwość CSS opacity sprawia, że przezroczyste staje się nie tylko tło, ale również cały kontener wraz z całą zawartością. Oznacza to, że po dodaniu tej właściwości do jakiegoś obiektu wszystkie inne obiekty, elementy mieszczące się w nim jak i on sam staną się w mniejszym lub większym stopniu przezroczyste. W zależności od ustawionej wartości opacity.
Wartość właściwości CSS opacity ustawiamy między 1 a 0. Gdzie 1 to pełna widoczność a 0 całkowita przezroczystość. Wartości pomiędzy to częściowa widoczność. Właściwość ta nie nadaje się więc zbytnio do robienia przezroczystego tła ale za to świetnie może się sprawdzić do ukrywania różnych elementów (a potem ich pokazywania np. przy animacjach). W celu uzyskania prześwitu używamy wartości ułamkowych np:
opacity:0.9;Przykłady:
Poniżej znajdziecie przykłady zastosowania właściwości opacity od większej do mniejszej przezroczystości.
See the Pen by Aura (@Julka85) on CodePen.
Domyślnym ustawieniem jest tutaj wartość „1”. Podobne działanie będzie miała właściwość CSS Filter. Jak widać na przykładzie na samym początku praktycznie nic nie widać. Zarówno <div> (kontener) jak i tekst są całkiem przezroczyste. Zmieniając wartość przechodzimy aż do pełnej widoczności.
Kolejnym sposobem na uzyskanie efektu przezroczystości są kolory RGBA.
Ten sposób w istotny sposób różni się od poprzedniego. Przezroczystość dotyczy jedynie samego tła elementu i nie wpływa na mieszczące się w nim obiekty. Kolory rgba posiadają takie same oznaczenia co w rgb różnią się jedynie ostatnim parametrem. np.
background: rgba(0,0,0,0.5);See the Pen background: rgba(0,0,0,0.2); by Aura (@Julka85) on CodePen.
W powyższych przykładach posiadamy możliwość manipulacją nasycenia. Służy do tego parametr z kropką (ostatni 4). W tym wypadku pełne nasycenie i brak przezroczystości to 1 czyli:
Z kolei całkiem przezroczyste tło daje nam 0:
Wartości pomiędzy brakiem przezroczystości a całkowitą to np. 0.5 0.2 0.8
Jest to kolejna funkcja umożliwiająca uzyskanie tym razem całego przezroczystego tła – bez manipulacją jego intensywnością. Czyli tło jest widoczne lub nie jest. Słowem transparent zastępujemy tutaj dowolny kolor.
background: transparent;background: transparent;
background: #ccc;
===
Efekt przezroczystości uzyskujemy głównie z pomocą CSS. Nie używamy do tego HTML. HTML w tym przypadku jest bowiem tylko konstruktem, który dalej obrabiamy.
Warto przeczytać
Dodawanie gradientu na stronie
Przezroczysty tekst z obramowaniem
dodatkowe tagi – czyli powiązana tematyka:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…