[CSS3] Wyszarzenie strony

Czasem musimy wyszarzeć stronę, ale nie ma czasu na zmianę każdego koloru osobno i desaturacje kolorów na wszystkich elementach graficznych. Wtedy z pomocą przychodzi CSS3. Jak? Ano tak:

* {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}


Ale to nie najlepszy pomysł. W wielu popularnych przeglądarkach (np. Chrome) spowoduje to mocne spowolnienie systemu przy wejściu na taką stronę, ponieważ przy każdej akcji nakładany jest filtr skali szarości na KAŻDY element drzewa DOM.

Dużo lepszym pomysłem jest wyodrębnienie tych elementów strony, które chcemy wyszerzeć, na przykład:

img,#logo,#background,.adds {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

Dodał(a): m-krassowski, 13.11.12

Komentarze:

Brak komentarzy

Jesteś niezalogowany, zaloguj się, aby móc dodawać komentarze.