Półprzezroczyste tło nawet w IE

Niedawno wspominałem o rozciąganiu tła na całą stronę - tym razem chcę również poruszyć temat tła, jednak jednolitego i półprzezroczystego. CSS3 w swojej opracowywanej specyfikacji zawiera wsparcie dla kanału alpha, pozwalając definiować kolory w postaci rgba(255,255,255,0.8). Większość przeglądarek - jak Firefox, Opera czy Chrome posiadają już wsparcie dla tej metody od dłuższego czasu, ale jak zwykle pozostaje pytanie: co z IE? Otóż należy zastosować "magiczne" filtry Internet Explorer'a...
To jest demo półprzezroczystości (IE)

Jeżeli chcemy użyć półprzezroczystego tła na stronie (bez obrazków) to warto wypróbować poniższe metody - w zależności od przeglądarki:
Standard CSS3 pozwala na zdefiniowanie kanału alpha, wraz z podawaniem składowych rgb - wówczas zamiast pisać rgb dodajemy a na końcu i podajemy 4 dane (alpha ma zakres od 0 do 1)
background: rgba(255,255,255,0.05)
Innym wyjściem jest zrobienie całego obiektu półprzezroczystego właściwością opacity - jednak należy pamiętać, że content także będzie półprzezroczysty.
opacity: 0.1;
To jest demo półprzezroczystości

Filtry MSIE

Jeżeli chcemy, aby półprzezroczystość była widoczna w IE (także w IE6), konieczna jest zabawa wbudowanymi filtrami IE, a dokładniej DXImageTransform.Microsoft.Gradient. Sam zapis koloru używany w filtrze jest nieco dziwny i wygląda mniej więcej tak #AARRGGBB. Aby zdefiniować filtr dla IE tworzymy osoby arkusz CSS dla IE (umieszczając go np. w komentarzach warunkowych) i umieszczamy w nim definicję filtru - poniżej przykład
{
   background: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5186821,endColorstr=#A5186821)"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5186821,endColorstr=#A5186821);   /* IE6 & 7 */
   zoom: 1;
}
To jest demo półprzezroczystości (IE)
W celu szybkiej konwersji naszego kodu CSS3 możemy wykorzystać generator online - działa bardzo porządnie ;).

I w ten oto sposób możemy się cieszyć półprzezroczystością w zdecydowanej większości używanych przeglądarek internetowych.

Prześlij dalej:

1 komentarz:

Anonimowy pisze...

bardzo fajne tylko jeśli warstwa przezroczysta jest odnośnikiem to nie można klikać

Prześlij komentarz