Regulacja obrazu za pomocą efektów filtra CSS

Dostosowywanie obrazu Jasność i Kontrast, lub zamieniając obraz w Skala szarości lub Sephia to wspólna funkcja, którą można znaleźć w aplikacji do edycji obrazów, np Photoshop. Ale teraz możliwe jest dodanie tych samych efektów do obrazów internetowych za pomocą CSS.

Ta możliwość pochodzi z Efektów filtra, który faktycznie znajduje się nadal na etapie roboczym. Jednak przeglądarka Webkit wydaje się krokiem naprzód w implementacji tej funkcji.

Więc spróbujmy i użyjemy tego obrazu od Mehdi Kh do pokazania efektów.

Efekty

Stosowanie efektów jest bardzo proste. Spójrz na fragment poniżej, aby włączyć obrazy skala szarości;

 img -webkit-filter: grayscale (100%);  

… I tak jest sepia ala Instagram.

 img -webkit-filter: sepia (100%);  

Oboje sepia i skala szarości wartości podano w procentach, gdzie 100% to maksimum i zastosowanie 0% zachowa niezmieniony obraz, ale gdy wartość nie zostanie wyraźnie określona 100% będzie traktowane jako domyślne.

Rozjaśnianie obrazu jest również możliwe i możemy to zrobić za pomocą jasność funkcja w następujący sposób;

 img -webkit-filter: jasność (50%);  

Efekt jasności działa jak efekt kontrastu i sepii, powyżej którego wartość 0% zachowa obraz w takiej postaci, w jakiej się znajduje i będzie go stosować 100% całkowicie rozjaśni obraz, który prawdopodobnie pokaże tylko pustą białą stronę zamiast obrazu.

Efekt jasności również pozwala na wartości ujemne, w którym będzie przyciemnij obraz.

 img -webkit-filter: jasność (-50%);  

… I możemy dostosować kontrast obrazu w ten sposób.

 img -webkit-filter: kontrast (200%);  

Istnieje niewielka różnica w sposobie działania wartości, jak widać powyżej, ustawiamy kontrast() przez 200%, to dlatego, że wartość 100% jest punktem początkowym, w którym obraz pozostanie niezmieniony. Gdy wartość jest poniżej 100%, powiedzmy 50%, obraz stanie się mniej kontrastowy.

Ponadto możemy połączyć efekt w jednym bloku deklaracji, takim jak w poniższym przykładzie. Zmieniamy obraz w skala szarości i zwiększ kontrast o 50% w tym samym czasie.

 img -webkit-filter: kontrast w skali szarości (100%) (150%);  

Łącząc filtr z przejściem CSS3, możemy sprawić, że będzie wdzięczny wahać się efekt.

 img: hover -webkit-filter: grayscale (0%);  img: hover -webkit-filter: sepia (0%);  img: hover -webkit-filter: jasność (0%);  img: hover -webkit-filter: contrast (100%);  

Wreszcie możemy jeszcze spróbować jeszcze jednego efektu; Rozmycie Gaussa, co spowoduje rozmycie elementu docelowego.

 img: hover -webkit-filter: blur (5px);  

Podobnie jak w programie Photoshop, wartość rozmycia jest określona w promieniu piksela, a jeśli wartość nie jest wyraźnie określona, ​​0 zostanie przyjęte jako domyślne, a obraz pozostanie bez zmian.

Końcowa myśl

W specyfikacji jest znacznie więcej efektów. Jak na przykład obrócić, odwracać i nasycić, ale myślę, że są one mniej stosowane w rzeczywistych przypadkach internetowych. Zatem dyskusja ograniczyła się do zaledwie czterech efektów.

I pomimo tego, że dyskusja jest stosowana do obrazów w tym samouczku, właściwość może być również zastosowana do dowolnego elementu w DOM.

Na koniec możesz zobaczyć prezentację na żywo z poniższych linków. Pamiętaj, że filtr jest obecnie obsługiwany tylko w Chrome 19 i powyżej.

• Próbny
• Pobierz źródło