Jak dodać filtry i refleksje do obrazów w CSS?

Wygląd strony internetowej jest bardzo ważne, jeśli zamierzasz przyciągnąć coraz więcej odbiorców do swojej witryny. Dlatego w celu zwiększenia ogólnego wyglądu dodania efektów graficznych do obrazów lub odbicia obrazów jest bardzo zalecane. CSS zapewnia różne właściwości, które pozwalają z łatwością wykonać te zadania. W tym opisie szczegółowo omówiliśmy te właściwości. W tym poście omówiliśmy następujące.

1. Filtry obrazu w CSS
2. Odbicia obrazu w CSS

Filtry obrazu w CSS

W celu dodania różnych efektów specjalnych do obrazu, takiego jak krycie, rozmycie, nasycenie itp.

Składnia

Filtr: wartość;

Różne metody powiązane z właściwością filtra są wyjaśnione poniżej.

Wartość	Opis
nic	Ta wartość nie dodaje żadnego efektu i jest wartością domyślną.
plama	Dodaje rozmycie obrazu i czyni wartość w pikselach.
jasność	Służy do zwiększenia lub zmniejszenia jasności obrazu i wykazania wartości w procentowym.
kontrast	Ta wartość dostosowuje kontrast obrazu, a wartości są zdefiniowane w procentach.
skala szarości	Przekształca obraz w obraz w skali szarości, a także wykazuje wartości w procentach.
Hue-rotacie	Ta wartość służy do obracania obrazu i renderowania wartości w stopniach.
odwracać	Odwraca próbki istniejące na obrazie, a wartości są zdefiniowane w procentach.
nieprzezroczystość	Ta wartość dostosowuje przezroczystość obrazu i przyjmuje wartości od 0 do 1.
nasycić	Nasyca obraz, przyjmując wartości w procentach.
sepia	Ta wartość służy do konwersji obrazu na sepię i wykazywania wartości w procentowym.
Drop-Shadow	Służy do zastosowania efektu cienia na obraz.
URL ()	Jest to funkcja, która wymaga lokalizacji dokumentu XML zawierającego filtr SVG i może renderować link do konkretnego elementu filtra.
wstępny	Ta wartość nadaje właściwości jej wartość początkowa.
dziedziczyć	Ta wartość dziedziczy właściwość filtra z elementu przodka.

Teraz, gdy znasz wszystkie wartości, które właściwość filtra może wykazywać, poniżej pokazaliśmy te wartości dla lepszego zrozumienia.

Przede wszystkim dodajmy obraz na naszej stronie internetowej za pomocą podstawowego HTML.

Html

Tutaj po prostu dodaliśmy obraz za pomocą znacznika.

CSS

img
Szerokość: 30%;
Wysokość: auto;

Teraz używamy podstawowych CSS, aby nadać obrazowi trochę szerokości i wysokości.

Wyjście

Obraz został dodany do strony internetowej.

Teraz zastosujmy filtry do tego obrazu i zbadajmy różne wartości, które właściwość filtra może wykazywać.

Plama

Ustawiliśmy efekt rozmycia na 2px. Im większa wartość metody zamazania zwiększy rozmycie.

.Blur
Filtr: Blur (2px);

Wyjście

To jest zamazany obraz.

Jasność

Jasność obrazu została ustawiona na 0.50. Zmniejszenie wartości spowoduje spadek jasności i odwrotnie.

.jasność
Filtr: jasność (0.50);

Wyjście

Jasność obrazu została pomyślnie dostosowana.

Kontrast

Kontrast obrazu ustawiliśmy na 160%. Jeśli chcesz zwiększyć kontrast, zwiększ wartość tak bardzo, jak chcesz.

.kontrast
Filtr: kontrast (160%);

Wyjście

Efekt kontrastowy dodany z wielką łatwością.

Skala szarości

Podajmy metodę Grayscale () pewną wartość i zobacz zmiany w obrazie.

.Grayskale
Filtr: skala szarości (100%);

Wyjście

Kolorowy obraz został przekonwertowany na czarno -biały obraz przy użyciu metody Grayscale () właściwości filtra.

Hue-rotacie

Przypisujemy metodę Hue-Rotate () 270 stopni. Ta metoda zasadniczo modyfikuje obrazy, obracając obraz wokół koła kolorów.

.hue-rrotate
Filtr: Rotacja zęba (270DEG);

Wyjście

To jest obraz z odcieniem 270 stopni.

Odwracać

Wartość odwrócona dodaje do obrazu pewnego specjalnego efektu, odwracając. Tutaj odwracamy obraz 80%.

.odwrócić
Filtr: Odwróć (80%);

Wyjście

Próbki obrazu zostały odwrócone.

Nieprzezroczystość

Aby utworzyć przezroczystość przezroczystą wartość krycia. Poniżej dostosowujemy krycie obrazu do 0.4. Im mniejsza wartość krycia, tym bardziej obraz stanie się przezroczysty.

.krycie
Filtr: krycie (0.4);

Wyjście

To jest obraz o 40% przezroczystości.

Nasycić

Aby dodać nasycenie, stosuje się metodę właściwości filtra. Im bardziej wartość, tym więcej będzie nasyceniem obrazu.

.Nasytuj
Filtr: nasycenie (4);

Wyjście

Efekt nasycenia został pomyślnie dodany do obrazu.

Sepia

W celu dodania efektu Sepia do obrazu, daj mu pewną wartość, tak jak przypisaliśmy mu 50% w poniższym fragmencie kodu.

.sepia
Filtr: sepia (50%);

Wyjście

Efekt sepia działa poprawnie.

Drop-Shadow

Aby dodać cień, używamy metody Drop-Shadow. Długość cienia została przypisana z każdej strony obrazu.

.cień
Filtr: Drop-shadow (8px 8px 10px czerwony);

Wyjście

Z powodzeniem dodano efekt zrzutu.

Teraz, gdy dowiedzieliśmy się o właściwości filtra dogłębnie, przejdźmy do przodu i zobaczmy, co jest odzwierciedleniem właściwości.

Odbicia obrazu w CSS

W celu odzwierciedlenia obrazów używana jest właściwość CSS Box-Reflect.

Składnia

-WebKit-box-Reflect: poniżej | Powyżej | Racja | lewy;

Aby ta właściwość była w pełni funkcjonalna w różnych przeglądarkach, jest używana z prefiksem „-Webkit-”.

Notatka: Przeglądarka Firefox nie obsługuje właściwości reflektorów.

Below we have demonstrated some of these values ​​with the help of relevant examples so that you can grab the concept of image reflection.

Najpierw dodajmy obraz na naszej stronie internetowej.

Html

Tutaj dodaliśmy obraz i nadaliśmy mu trochę szerokości i wysokości.

Wyjście

Obraz został wstawiony na stronie internetowej.

Poniżej

Po prostu przypisz właściwość recenzji „poniżej”, aby odzwierciedlić obraz poniżej oryginalnego obrazu.

img
-WebKit-Box-Reflect: poniżej;

Wyjście

Obraz został odzwierciedlony poniżej.

Prawidłowy

Zbadajmy „właściwą” wartość właściwości reflektorów.

img
-WebKit-box-Reflect: Right;

Wyjście

Obraz został pomyślnie odzwierciedlony po prawej stronie.

Wniosek

W celu dodania efektów specjalnych do obrazów pojawiających się na stronach internetowych używana jest właściwość filtra CSS. Różne metody, które może wykazywać tę właściwość; Grayscale (), nasycenie (), krycia (), zamazanie (), jasność (), odcienia-rotacie () itp. Oprócz dodawania efektów specjalnych możesz również odzwierciedlać obrazy za pomocą właściwości CSS Box-Reflect do prawej, lewej, powyżej lub poniżej. Ten post obejmuje wszystkie głębokości dodawania filtrów lub refleksji do obrazów za pomocą odpowiednich przykładów.