Wpisy oznaczone tagiem "svg" (5)  

csslab
 
Efekt przenikania jednych elementów strony przez drugie jest możliwy na wiele sposobów. Niestety, nie wszystkie są dostępne we wszystkich popularnych przeglądarkach oraz nie wszystkie są akceptowane przez pingera podczas weryfikacji kodu CSS. Należy też wspomnieć, że nie ma rozwiązania idealnego – każde ma jakieś zalety i wady.

Obrazki w formacie PNG

Jest to prawdopodobnie jedyna technika, która jest dostępna na pingerze na przeglądarkę Internet Explorer w wersji 7. Polega na osadzeniu jako tło obrazka PNG 32-bit, w którym kolory opisane są przez 24 bity, a przez kolejne 8 bitów przezroczystość (kanał alfa). Wadą tej techniki jest jej mała elastyczność – przy każdej zmianie koloru lub stopnia przenikania potrzebna jest ponowna edycja obrazka.

Właściwość CSS 'opacity'.

Niewątpliwą zaletą tego rozwiązania jest prostota jego zastosowania. Wystarczy krótka reguła CSS z tą właściwością w środku i wybrany fragment strony jest półprzezroczysty. Konsekwencje są jednak takie, że półprzezroczyste są również wszystkie elementy 'dzieci' znajdujące się wewnątrz jak np. tekst i obrazki. Inną ujemną cechą tej właściwości CSS, jest brak jej obsługi przez przeglądarkę Internet Explorer starszą od wersji 9. W IE8 zamiast 'opacity' można wykorzystać właściwość '-ms-filter'  wraz z opisem filtra 'alpha'.

Wartość koloru jako RGBA lub HSLA

Kiedy określamy kolor tła lub czcionki w CSS, używamy zazwyczaj nazwy koloru jak np. 'red' lub wartości szesnastkowej jak np. '#FF0000'. Innym sposobem, jaki można użyć, to zastosowanie formatu RGB lub HSL. Pierwszy umożliwia podanie wartości koloru w postaci dziesiętnej, a nie szesnastkowej, np. zapis '#FF0010' możemy zastąpić 'rgb(255, 0, 16)'. Model HSL z kolei opisuje kolor na podstawie trzech zupełnie innych składowych: Barwy (Hue), Nasycenia (Saturation) i Jasności (Lightness), np. zapis dla koloru czerwonego wygląda tak: 'hsl(0, 100%, 50%)'. Formaty RGBA i HSLA różnią się od poprzednich tym, że dochodzi do zapisu kolejna składowa, która określa stopień przezroczystości (kanał alfa) o wartościach od 0 do 1, gdzie wartość 0 oznacza całkowitą przezroczystość, a wartość 1 pełną nieprzezroczystość. Zaletą stosowania formatu RGBA lub HSLA dla określenia np. tła elementu jest to, że nie ma to wpływu na elementy 'dzieci', czyli nic nie przenika przez tekst lub obrazki. Należy wspomnieć, że obrazki zastosowane jako tło, również pozostaną nieprzezroczyste. Alternatywą dla IE8 jest zastosowanie właściwości '-ms-filter' oraz filtru 'gradient'.

Obrazki w formacie SVG

Technika podobna do tej, w której wykorzystuje się osadzone obrazki PNG, tylko że tym razem jest to plik w formacie SVG, który w swoim opisie może zawierać półprzezroczyste elementy. Zaleta tej techniki to zachowanie tej samej jakości grafiki przy 'rozciąganiu' obrazka (brak tzw. pikselizacji). Osadzanie obrazków SVG przez język CSS to w miarę nowa właściwość przeglądarek internetowych, więc stosowanie jej na dzień dzisiejszy jest dosyć ryzykowne.
 

janqu
 
Animacja CSS, wewnątrz której animacja SVG. Działa na firefox 5, chrome i safari. pb5.pl/0b6/animacja/
 

 

Kategorie blogów