Być może surfując po internecie natrafiliście na strony, na których tekst czy nawet inne elementy miał dosyć efektowny cień, poświatę czy coś w tym stylu. Być może dokładnie przeszukaliście wszelkie możliwe kursy HTML, JavaScriptu, PHP – i nic.
Otóż sekret tych efektów tkwi w niczym innym jak w stylach! W sumie filtry graficzne ciężko jest „zaszufladkować”, ponieważ podobnie jak kolorowe suwaki są one rozszerzeniem Internet Explorera i działają tylko w nim, ale jeżeli mam gdzieś o nich napisać, to nie gdzie indziej tylko w sekcji CSS.
Jeszcze mała uwaga: filtry graficzne powinny działać u każdego posiadacza przeglądarki Internet Explorer (zdaje się, że 5.5), ale jeżeli nie działają, trzeba dopisać jeszcze szerokość bloku (bloku może nie dosłownie, bo tyczy się to też akapitu czy obrazka, a nie tylko bloku div) np.width:100%, czy width:210px.
Kombinacje filtrów
Można także używać kombinacji filtrów (np. rozmycia z przezroczystością), co może jeszcze bardziej uatrakcyjnić stronę. Wtedy filtry należy oddzielić po prostu przecinkiem wg. schematu:
| <div style=”filter: filtr1(), filtr2(właściwość=wartość)”>Tekst z filtrem</div> |
filter:shadow()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_shadow.html Oto pierwszy z możliwych efektów. Dosyć ładnie wyglądający cień. Co prawda cień można utworzyć równie dobrze za pomocą warstw (o tym w innym tutorialu), ale taki utworzony za pomocą filtrów graficznych wygląda bardziej naturalnie. Ok, zabieramy się do pracy. Definicję cienia trzeba przypisać jakiemuś selektorowi (w całym triku będę używał stylu wpisanego i selektora div, którym obejmę nagłówek h1 oraz obrazek). A więc:
| <div style=”filter: shadow(color=green, direction=145, strength=4)”> <h1>Tekst z filtrem</h1> <img width=”300″ height=”150″ src=”image/filtry.gif”> </div> |
Już wyjaśniam konstrukcję:
- filter:shadow() – oto deklaracja filtra o nazwie shadow (czyli po angielsku cień)
- color=green – kolor cienia, ja wybrałem green
- direction=145 – kąt padania cienia.
- strength=4 – wielkość cienia. Im większa wartość, tym większy cień.
filter:dropshadow()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_dropshadow.html Mniej prawdziwy, ale równie fajny cień. Bardzo podobny do tego z użyciem warstw, ale ma tą wadę (jak zresztą wszystkie filtry), że zadziała tylko w IE. Warstwy natomiast działają także w NN.
<div style=”filter: dropshadow(offx=2, offy=2, color=green)”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:dropshadow() – deklaracja filtra o nazwie dropshadow
- offx=2 – przesunięcie poziome cienia. Można także dawać wartości ujemne, co spowoduje przesunięcie w drugą stronę.
- offy=2 – to samo co powyżej, tylko że pionowe
- color=green – kolor cienia, ja wybrałem (tradycyjnie) zielony
filter:fliph()
Odbicie poziome. Zupełnie jak w programach graficznych.
<div style=”filter: fliph()”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:fliph() – deklaracja filtra o nazwie fliph. Filtr nie posiada żadnych atrybutów.
filter:flipv()
To samo co wyżej, tylko że pionowe.
<div style=”filter: flipv()”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:flipv() – deklaracja filtra o nazwie flipv. Filtr nie posiada żadnych atrybutów.
filter:glow()
Bardzo ładny efekt poświaty. Doskonale nadaje się np. na nagłówki.
<div style=”filter: glow(strength=2, color=green)”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:glow() – deklaracja filtra o nazwie glow.
- strength=3 – wielkość poświaty. Moim zdaniem optymalną wielkością jest 3
- color=green – tutaj ustawiamy tradycyjny kolor…
filter:alpha()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_alpha.html Filtr przezroczystości. Bardzo dobrze nadaje się do buttonów i bannerów na stronie: banner jest z początku słabo widoczny, ale po najechaniu na niego myszką znika cała przezroczystość i staje się wyraźny. Ale do tego trzeba użyć odrobiny JavaScriptu…
<div style=”filter: alpha(opacity=40)”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:alpha() – deklaracja filtra o nazwie alpha.
- opacity=40 – im większa wartość tego atrybutu, tym mniejsza przezroczystość. 0 spowoduje, że obiekt nie będzie widoczny, natomiast 100 – że bęzie normalnie widoczny.
filter:blur()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_blur.html Rozmycie. Również ciekawy efekt.
<div style=”filter: blur(direction=50, strength=4, add=0)”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:blur() – deklaracja filtra o nazwie blur.
- direction=50 – rozmycie składa się tak jakby z dwóch warstw tekstu. Jedna z nich jest, podobnie jak cień, pzesunięta i kilka pikseli i dodatkowo rozmyta co potęguje wrażenie rozmycia. Tutaj ustawia się kąt tego przesunięcia.
- strength=4 – tutaj ustawiamy siłę rozmycia
- add=0 – hmm… no tu miałem problem… szczerze mówiąc nie za bardzo wiem co oznacza to polecenie, ale z obserwacji wiem, że jeżeli nie ma ono wartości 0, to tekst na pierwszym planie (mówiłem już, że są to 2 warstwy) nie jest rozmyty, przez co cały efekt „pada”.
filter:xray()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_xray.html Jeden z filtrów ze skalą szarości. Bardzo dobry do stosowania na obrazkach.
<div style=”filter: xray()”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:xray() – deklaracja filtra o nazwie xray. Filtr ten nie posiada żadnych atrybutów.
filter:invert()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_invert.html Negatyw. Również bardzo dobry do stosowania na obrazkach.
<div style=”filter: invert()”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:invert() – deklaracja filtra o nazwie invert. Filtr ten nie posiada żadnych atrybutów.
filter:gray()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_gray.html Redukuje kolory obrazka do 256 (skala szarości). Przydaje się przy wszelkich plikach graficznych, np. w galerii zdjęć.
<div style=”filter: gray()”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:gray() – deklaracja filtra o nazwie gray. Filtr ten nie posiada żadnych atrybutów.
filter:wave()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_wave.html Bardzo ciekawy efekt zniekształcenia. Wygląda to całkiem ładnie, ale w internecie raczej nie znajdzie zastosowania.
<div style=”filter: wave(freq=3, strength=10, phase=0, lightstrength=10)”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:wave() – deklaracja filtra o nazwie wave.
- freq=3 – „gęstość” zniekształcenia. Im większa wartość tym drobniejsze łuki (więcej znieszktałceń)
- strength=10 – siła zniekształcenia. Im większa wartość tym bardziej powyginany będzie obiekt
- phase=0 – przesunięcie światła. W przypadku ustawienia światła (patrz niżej) phase reguluje jego przesunięcie.
filter:mask()
Zobacz przykład: www.webinside.pl/materialy/rozne/filtr_mask.html W sumie chyba najmniej pożyteczny z filtrów. Zresztą sami zobaczcie!
<div style=”filter: mask(color=green)”>
<h1>Tekst z filtrem</h1>
<img width=”300″ height=”150″ src=”image/filtry.gif”>
</div> - filter:mask() – deklaracja filtra o nazwie mask.
- color=green – kolor, jakim bęziemy maskować. Tradycyjnie zielony.
