Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

12. CSS3: przezroczystość i kolory

12. CSS3: przezroczystość i kolory

Autor: Adam Stępień Opublikowano: 29 sierpnia 2011 Odsłon: 17 951

Przezroczystość, obok zaokrąglania rogów, to jedna z najbardziej wyczekiwanych implementacji CSS3. Dzięki niej nie trzeba korzystać z programów graficznych, aby uzyskać nieźle wyglądający efekt. W niniejszym artykule wyjaśnimy, jak sterować przezroczystością elementów, a także omówimy nowe modele barw.

Opacity

Do sterowania przezroczystością danego elementu służy właściwość CSS3 opacity. Możemy ją stosować do wszystkich elementów. Pierwszy przykład będzie dotyczył zwykłego tekstu. Nadamy właściwość opacity znacznikowi akapitu <p>

Nadawanie przezroczystości elementom

<div style="font-size:24px">
<p style="opacity:1">Tekst z opacity: 1</p>
<p style="opacity:0.75">Tekst z opacity: 0.75</p>
<p style="opacity:0.5">Tekst z opacity: 0.5</p>
<p style="opacity:0.25">Tekst z opacity: 0.25</p>
<p style="opacity:0">Tekst z opacity: 0</p>
</div>

Do zastosowania efektu przezroczystości używa się właściwości, która odpowiada de facto nie za przezroczystość, a za jej brak. Jest to właśnie opacity. Nadanie wartości 1 spowoduje, że element będzie w pełni nieprzezroczysty. Zmniejszając wartość opacity, zmniejszamy jego nieprzezroczystość, czyli automatycznie element staje się bardziej transparentny. Kolejny przykład pokazuje, że pożądany efekt uzyskamy także na innych elementach. Zobaczmy, jak to będzie wyglądało dla grafiki.

Nadawanie przezroczystości grafice

<P>
<img src="http://www.centrumxp.pl/Img/HomePromo/DS7.png" ><br>
<img src=http://www.centrumxp.pl/Img/HomePromo/DS7.png style="opacity:0.5" ></p>

Specyfikacja CSS3 opisuje również inną metodę na uzyskanie przezroczystości. Ściśle wiąże się ona z nowymi modelami barw wprowadzonymi właśnie w nowej wersji Kaskadowych Arkuszy Stylów.

RGBA

W Internecie popularnym modelem barw jest RGB, dzięki któremu można uzyskać wiele pożądanych kolorów. Powszechne jest stosowanie zapisu w formacie szesnastkowym #RRGGBB, np. #FF6100. Nowy model barw RGBA dodaje możliwość określenia przezroczystości elementu poprzez tzw. kanał alpha. Kluczową zmianą jest brak obsługi zapisu szesnastkowego. W RGBA definiujemy kolor, podając albo wartość procentową udziału danej barwy albo wartość całkowitoliczbową, a jako czwarty parametr podajemy opacity w przedziale 0 do 1. Zobaczmy to na przykładzie:

Kanał alpha w rgba


<div style="font-size:24px">
<p style="background-color: rgba(0%, 0%, 100%, 1)">Akapit o tle niebieskim z alpha 1</p>
<p style="background-color: rgba(0%, 0%, 100%, 0.75)">Akapit o tle niebieskim z alpha 0.75 </p>
<p style="background-color: rgba(0%, 0%, 100%, 0.5)">Akapit o tle niebieskim z alpha 0.5</p>
<p style="background-color: rgba(0%, 0%, 100%, 0.25)">Akapit o tle niebieskim z alpha 0.25</p>
<p style="background-color: rgba(0%, 0%, 100%, 0)">Akapit o tle niebieskim z alpha 0</p>
</div>

Zasadniczą różnicą między przezroczystością ustanawianą przez właściwość opacity a model barw RGBA jest inne podejście do dziedziczenia. Właściwość opacity powoduje przezroczystość danego elementu i wszystkich elementów potomnych. Element, który znajduje się wewnątrz nadrzędnego elementu o zadanej przezroczystości, dziedziczy przezroczystość. Natomiast w modelu RGBA przezroczystość jest nadawana pojedynczemy elementowi.

Różnica między opacity a alpha

<!DOCTYPE html>
<html>
<head>
<title>opacity a rgba</title>
</head>

<body>
<div style="opacity:0.6; background-color:blue; width:200px; height:50px">
Teskt wewnątrz kontenera
</div>
<br>
<div style="background-color: rgba(0%, 0%, 100%, 0.6); width:200px; height:50px">
Teskt wewnątrz kontenera
</div>

</body>
</html>

HSLA

Analogicznie do RGB można zdefiniować kanał alpha dla modelu barw HSL. Pokażemy to na przykładzie koloru czerwonego bez przezroczystości i koloru czerwonego, który będzie transparentny w 50%.

HSLA

<!DOCTYPE html>
<html>
<head>
<title>hsla</title>
</head>

<body>
<div style="background-color: hsla(0,100%,50%,0.5); width:200px; height:50px">
Teskt wewnątrz kontenera
</div>
<br>
<div style="background-color: hsl(0,100%,50%); width:200px; height:50px">
Teskt wewnątrz kontenera
</div>

</body>
</html>

currentColor

Jeśli chodzi o kolory, warto jeszcze wspomnieć o ciekawej nowości w CSS3, mianowicie właściwości currentColor. Wskazuje ona aktualną wartość właściwości color dla innych właściwości, które mogą przyjmować daną barwę.

currentColor

<!DOCTYPE html>
<html>
<head>
<title>currentColor</title>
<style type="text/css">
div
{
color: blue;
border: 1px solid currentColor;
width:200px;
height:50px;
}
</style>
</head>

<body>
<div>
Tekst w kontenerze</div>

</body>
</html>

Jak widzimy, nie musimy definiować barwy obramowania, gdyż jest ona "pobierana" z bieżącego koloru, jakim jest kolor niebieski.

Zobacz również

Komentarze

Nie napisano jeszcze ani jednego komentarza. Twój może być pierwszy.

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.