Marek Wituszyński

Photo

CSS
i przezroczystość

Przezroczystość w HTML'u kojarzy się przede wszystkim z: PNG, filtrami CSS oraz JavaScript. Efekt uzyskany na tej stronie jest czystym i eleganckim obejściem powyższych metod. Co więcej - jest w pełni walidowalny przez W3C. Byłoby zupełnie różowo, gdyby nie ratowało nas IE6, które po raz kolejny przypomina o swej oryginalności i oczywiście nie radzi sobie z CSS1, czyt. "źle wyświetla stronę".

Skoro nie tak, to jak?

Sztuczka jest stosunkowo prosta, opiera się głównie na zastosowaniu
background-position: fixed
i odpowiednich modyfikacjach rysunku wejściowego. Przezroczystość tak naprawdę zrealizowana jest poprzez zastosowanie kilku odmian kolorystycznych oryginalnej grafiki, co sprawia wrażenie przezroczystości. Odmian tych jest tyle, ile różnych 'przezroczystości' chcemy otrzymać. Kluczowym jest ustawienie obrazków w tym samym miejscu i nadanie odpowiednich atrybutów danym elementom. Whoah - od początku.

Krok po kroku

Wybieramy obrazek, na którym docelowo ma być zastosowana przezroczystość. Jak widać nie mogłem oprzeć się tej przepięknej pani, wyrenderowanej wprawdzie, ale cóż. Należy się zastanowić, ile elementów będzie używać przenikania. Na tej stronie div, czyli tło tego tekstu i linki. Oba elementy posiadają inną przezroczystość, co powoduje, że należy przygotować dwie modyfikacje oryginału. Jak będą wyglądać zależy już tylko od nas. W naszym przykładzie zakładamy, że chcemy umieścić obrazek w lewym górnym rogu strony, a 100px w prawo tekst na przezroczystym tle w znaczniku div. Zaczniemy od przygotowania zdjęcia.

Krótki kurs Photoshop'a

Na stronie div posiada niebiski odcień. Jak uzyskać? Na 100 sposobów. Przytoczę mój bo krótki:
Otwieramy oryginał w PS. Tworzymy nową warstwę ( Ctrl+Shift+N ). Wybieramy wiaderko ( Shift+G - ewentualnie dwukrotnie, by zmienić z gradientu) i po wybraniu interesującego nas odcienia - wylewamy na nową warstwę. Teraz możemy zmienić przenikanie warstwy na Screen lub zmniejszyć Opacity na np. 20%. Gotowe.

Przygotowanie CSS'a

body {
  background-color: black;
  background-image: url(obrazek.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

div {
  background-color: "jakiś_kolor";
  background-image: url(obrazek_div.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  left: 100px;
  top: 0px;
}
							
W znaczniku body ustawiliśmy czarne tło, obrazek umieściliśmy w punkcie (0,0), zapewniliśmy, że nie będzie powtarzany oraz że nie będzie się przewijał wraz ze stroną (znak wodny). Zapis position: relative powoduje, że elementy zawierające się w body będą pozycjonowane względem niego.

Uwaga: Używając obrazów tła background-image i ustawiając je jako nieruchome background-attachment: fixed bądźmy świadomi tego, że jest ono pozycjonowane zawsze względem początku strony!

Kolor tła dla div musimy wybrać w zależności od posiadanego obrazka - wolna ręka :) Obrazek ten jest przygotowaną przez nas modyfikacją, która to właśnie ma wywołać efekt przezroczystości. position: absolute ustawia nam to, że element będzie pozycjonowany względem body gdyż ma ustawione position: relative

Podsumowanie

Uzyskanie tym sposobem przezroczystości może wydawać się żmudną pracą, ale przy odrobinie wprawy - warto. Jeśli coś zostało przedstawione niejasno, można oczywiście zajrzeć w źródło strony z efektem. The end.