od zera do webmastera

Zmieniamy kolor przy pomocy CSS

czyli sztuczki z grafiką.

Pokażę 2 sposoby jak można zmienić kolor w obrazku. Nie jest to taka zmiana jaką można uzyskać w programach do grafiki bitmapowej, ale czasem się przydaje jeśli chcemy zmienić trochę nastrój w obrazku, bez zmiany jego zawartości. Można to użyć gdy na stronie wykorzystujemy ten sam obrazek wielokrotnie, wówczas możemy go troszkę zróżnicować kolorem. Ale oto i przykład, o jaki efekt chodzi.


Oto jeden i ten sam plik GIF z przeźroczystością, odmiany koloru pochodzą od zmiany w stylach CSS.
Obrazek ostał włożony do 3 różnych DIV-ów a każdemu DIV-owi nadłem inny kolor tła.
I to wszystko.

.trans-01 {background-color:#f84}
.trans-02 {background-color:#8f4}
.trans-03 {background-color:#48f}

w GIF oczywiście można zawrzeć przezroczystość, czego nie da się w plikach typu JPG. Teraz jednak użyjemy JPG, bo jest ładniejszy gdyż ma większą skalę tonów. By go troszkę "rozpuścić" i by wyjrzało przez niego tło z pod spodu użyjemy FILTRA.

.trans-05 {filter:alpha(opacity=70);opacity:.70; }

A oto jaki efekt tym razem!

opacity 70
opacity 70
opacity 70

Myślę, że takie sposoby zmiany kolorów, to łatwy i pożyteczny sposób na ożywienie grafiki na stronie WWW.
i na koniec test z różną siłą filtru - OPACITY, też dało nam to zróżnicowanie wyrazu użytej bitmapy.

opacity 90
opacity 50
opacity 30