Inne działy

 

 

Filtry CSS – Tekst i Obraz efekty

 

 Filtry CSS umożliwiają dodawanie efektów specjalnych do tekstu, obrazów i innych aspektów strony sieci Web używając obrazy lub inne grafiki. Filtry działają tylko na Internet Explorer 4.0 +. Więc jeśli tworzysz witryny dla wielu przeglądarek wtedy nie może być to dobry pomysł, aby użyć filtrów CSS, ponieważ istnieje możliwość, że nie dadzą żadnych korzyści.

W tym tutorialu zobaczymy szczegóły każdego filtru CSS. Filtry te mogą nie działać w Twojej przeglądarce.

Kanał alfa

Ten filtr zmienia przezroczystość obiektu, co sprawia, że zlewa się z tłem. Oto parametry, które mogą być używane przez ten filtr: 

ParametrDescription
opacity Poziom nieprzezroczystości. 0 jest całkowicie przezroczysty, 100 jest całkowicie nieprzezroczysty.
finishopacity Poziom nieprzezroczystości na drugim końcu obiektu.
style

Kształt nieprzezroczystości gradientu.

0 = uniform
1 = linear
2 = radial
3 = rectangular  
startX Współrzędna X dla rozpoczęcia krycia gradientu.
startY Współrzędna Y dla rozpoczęcia krycia gradientu.
finishX Współrzędna X dla gradientu przezroczystości do końca.
finishY Współrzędna Y dla gradientu przezroczystości do końca.

 

 Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: 
Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20,
StartY=40, FinishX=0, FinishY=0)">
<p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0,
Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">
CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

Motion Blur

Będzie on służył do tworzenia rozmazanych zdjęć. Poniżej przedstawiono parametry, które mogą być użyte w tym filtrze

 

ParametrOpis
add True lub false. Jeśli jest true do obrazu jest dodawany efekt jeśli parametr ma wartość false do obrazu nie jest dodawany efekt.
direction Kierunek rozmycia, zgodnie ze wskazówkami zegara, zaokrąglone do 45 stopni. Wartością domyślną jest 270 (po lewej).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left
strength Liczba pikseli, która rozszerzy rozmycie. Wartością domyślną jest 5 pikseli.

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: 
Blur(Add = 0, Direction = 225, Strength = 10)"> <p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225,
Strength = 10)">CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

Chroma Filter

Ten filtr będzie wykorzystywany do określenia przezroczystości danego koloru i zazwyczaj jest używany z obrazami. Można go używać z paskami przewijania również. Oto parametry, które mogą być używane przez ten filtr:

 

ParametrOpis
color Kolor, który chcesz by był przezroczysty.

 

 Przykład:

 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: 
Chroma(Color = #FFFFFF)"> <p> Przykład tekstu:</p> <div style="width: 580; height: 50; font-size: 30pt; font-family:
Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">
CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

 Drop Shadow Effect

Ten filtr będzie służyć do tworzenia cienia obiektu w określonej pozycji X (poziomo) i Y (pionowo) przesunięcia i kolor.  Oto parametry, które mogą być używane przez ten filtr:

 

ParametrOpis
color Kolor, format #RRGGBB, dropshadow.
offX Liczba pikseli, o które cień jest odsunięty od obiektu względem osi x. Dodatnia liczba całkowita przesuwa cień w prawo, ujemne liczby całkowite przesuwają cień w lewo.
offY Liczba pikseli, o które cień jest odsunięty od obiektu, względem osi y. Dodatnie liczby całkowite przesuwają cień w dół, ujemne przesuwają cień w górę.
positive Jeśli true, wszystkie piksele nieprzezroczyste obiektu mają dropshadow. Jeśli false, wszystkie przezroczyste piksele mają dropshadow. Wartością domyślną jest true.

 

 Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: 
Chroma(Color = #000000) DropShadow(Color=#FF0000,
OffX=2, OffY=2, Positive=1)"> <p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2,
OffY=2, Positive=1)">CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

 

 

Flip Effect

Filtr służy do tworzenia odbicia lustrzanego. Oto parametry, które mogą być używane przez ten filtr: 

 

ParametrOpis
FlipH Tworzy poziome odbicie lustrzane
FlipV Tworzy pionowe odbicie lustrzane

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: FlipH"> 

<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: FlipV"> 

<p> Przykład tekstu:</p>
<div style="width: 300; height: 50; font-size: 30pt; font-family: 
Arial Black; color: red; Filter: FlipV">CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo CSS Logo

Przykład tekstu:

CSS Tutorials

 

 Efekt blasku (Glow Effect)

 

Filtr ten służy do tworzenia poświaty wokół obiektu. Jeśli jest to przejrzysty obraz blask jest tworzony wokół nieprzezroczystych pikseli. Oto parametry, które mogą być używane w tym filtrze: 

 

ParametrOpis
color Kolor, który chcesz dodać jak poświatę.
strength Intensywność blasku (od 1 to 255).

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: 
Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">
CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

 Efekt skali szarości (Grayscale Effect)

Będzie to służyć do konwersji kolorów obiektu do 256 odcieni szarości. Oto parametry, które mogą być używane przez ten filtr: 

 

ParametrOpis
gray Konwertuje kolory obiektu do 256 odcieni szarości.

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: Gray"> 

<p> Przykład tekstu:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: 
Arial Black; color: red; Filter: Gray">CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

Invert Effect (odwrócić)

Efekt ten będzie służyć do mapowania kolorów obiektu do wartości przeciwnych spektrum kolorów tzn., Aby utworzyć obraz negatywowy. Parametry, które mogą być używane przez ten filtr są następujące: 

 

ParametrOpis
Invert Mapy kolorów obiektu do wartości przeciwnych spektrum kolorów.

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: invert"> 

<p> Przykład tekstu:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: 
Arial Black; color: red; Filter: invert">CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

 Efekt maski (Mask Effect)

Będzie on służył do przezroczystych pikseli do określonego koloru i sprawia, że nieprzezroczyste piksele stają się przezroczyste. Poniżej przedstawiono parametry, które mogą być użyte w tym filtrze: 

 

ParametrOpis
color Kolory, które staną się obszarami przezroczystymi.

 

 Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="FILTER: 
Chroma(Color = #000000) Mask(Color=#00FF00)"> <p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: red; Filter: Mask(Color=#00FF00)">
CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

Shadow Filter

Ten filtr można stosować do tworzenia cienia w określonym kierunku i kolorze. Jest to filtr, który znajduje się pomiędzy dropshadow i Glow (blask). Poniżej przedstawiono parametry, które mogą być użyte w tym filtrze

 

ParametrOpis
color Kolor, który chcesz, aby miał cień.
direction Kierunek rozmycia, zaokrąglone do 45 stopni. Wartością domyślną jest 270 (po lewej).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="FILTER: 
Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">
CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

 Wave Effect

Filtr ten będzie służył, aby dodać do obiektu zniekształcenia sinusoidy, aby wyglądał tak jak wavey. Poniżej przedstawiono parametry, które mogą być użyte w tym filtrze: 

 

ParametrOpis
add Wartość 1 dodaje oryginalny obraz do obrazu waved, 0 nie.
freq Ilość fal.
light Siła światła fal (od 0 do 100).
phase W jakim stopniu sinusoida powinna rozpocząć (od 0 do 100).
strength Intensywność efektu fali.

 

Przykład: 

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="FILTER: 
Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10,
Phase=220, Strength=10)"> <p> Przykład tekstu:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family:
Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10,
Phase=20, Strength=20)">CSS Tutorials</div>

 Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

X-Ray Effect

Filtr ten będzie używany do określenia odcieni szarości i spłaszczenia głębi kolorów. Parametry, które mogą być używane przez ten filtr są następujące: 

 

ParametrOpis
xray Liczby odcieni szarości i spłaszczenia głębi kolorów.

 

 Przykład:

<p> Przykład obrazu:</p>
<img src="/images/w3css.jpg" alt="CSS Logo" style="Filter: Xray""> 

<p> Przykład tekstu:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: 
Arial Black; color: red; style="Filter: Xray">CSS Tutorials</div>

  Poniżej wynik działania kodu:

Przykład obrazu:

CSS Logo

Przykład tekstu:

CSS Tutorials

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.