[CSS] Przezroczystość z użyciem CSS

W dzisiejszym tutorialu przedstawię sposoby na wykorzystanie przezroczystości na stronach WWW z użyciem samego CSS, bez użycia obrazków. Wykorzystamy do tego nową technikę CSS3 czyli pobieranie kolorów z palety RGBA, a także technikę bez użycia tej palety (ta technika jest wymuszona przez IE).

Sekcja 1Przezroczystość czcionek

Aby uzyskać przezroczyste czcionki należy skorzystać z następującego kodu CSS:

1
2
3
4
5

#bg p {
    padding: 5px;
    color: rgba(255,255,255,0.5);
    filter: alpha(opacity=50);
}

Taki zapis ustawia kolor czcionki na biały z pół-przezroczystością (wartości 0.5 oraz 50). filter: alpha(); odpowiada za przezroczystość w IE. Przykład działania kodu powyżej można zobaczyć na stronie z demo. Taką efektownie wyglądającą czcionkę można zastosować na przykład w w animowanym tooltipie.

Sekcja 2Przeźroczystość tła - wszystkie przeglądarki poza IE

W tym przypadku użyjemy następującego kodu:

1
2
3
4
5
6
7
8
9

#bg2 p {
    padding: 10px;
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin: auto;
    background: rgba(255, 255, 255, 0.5);
    filter: alpha(opacity=50);
}

Ten przypadek jest podobny do powyższego, tyle że stosujemy paletę kolorów RGBA do background zamiast color. Przykładowe działanie można zobaczyć na stronie z demo 2.

Sekcja 3Przezroczystość tła (inny sposób) - wszystkie przeglądarki

Tu musimy użyć nastepujących konstrukcji:

1
2
3

<div id="transbox">
    <div>Etiam varius, quam interdum augue. Maecenas nunc. Phasellus a pellentesque leo. Donec eu turpis vulputate tortor et lorem. Sed neque. Maecenas pharetra lobortis magna diam, tincidunt enim. Sed fringilla odio. Suspendisse eu pulvinar gravida, nisl risus, consequat faucibus, tortor venenatis consequat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos.</div>
</div>

Kod CSS do tego przykładu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#transbox {
    width: 300px;
    margin: 0 auto;
    background-color: #fff;
    filter:alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity:0.5;
}
#transbox div {
    padding: 20px;
    color: #000;
    filter:alpha(opacity=100);
    opacity: 1;
    -moz-opacity:1;
}

Jak widać, odeszliśmy tu od palety kolorów RGBA, a zaczęliśmy korzystać z filtrów które są specyfiką każdej z przeglądarek. To znaczy -moz-opacity dla Mozilla Firefox, opacity dla Opery oraz filter:alpha() dla Internet Explorera. Przykład działania powyższego kodu można znaleźć na: Demo 3.

Sekcja 4Podsumowanie

Mam nadzieję, że jasno opisałem sposoby na otrzymanie efektu przezroczystości w przeglądarkach. W razie jakichkolwiek pytań, proszę pisac w komentarzach.

Sekcja 4.1Aktualizacja - 12.10.2017

Obecnie, w większości przypadków aby ustawić by dany element był pół-przezroczysty wystarczy wykorzystać: opacity: 0.5; w kodzie CSS. Będzie to działało we wszystkich przeglądarkach.

Gdybyśmy jednak chcieli zrobić pół-przezroczyste tło danego elementu, np. tło dla popupu (np. jako kompontentu napisanego za pomocą React), to wystarczy temu elementowi przypisać wartość CSS: background: rgba(0,0,0, .5);. Tym samym uzyska on pół-przezroczyste czarne tło.