Фильтры в CSS для редактирования изображений.

дравствуйте! В этой статье речь пойдет о фильтрах в css. До появления CSS фильтров вам оставалось или загружать несколько версий изображения, или манипулировать ими при помощи JavaScript. Если вы не хотите сами возиться с изображениями, вам помогут CSS фильтры.С помощью фильтров можно очень гибко редактировать изображения, а именно уменьшать или увеличивать яркость, контрастность, тень и.т.д. Но давайте обо всем по порядку.

Фильтр размытия

Фильтр применяет к изображению размытие по Гауссу. Необходимо указать длину, которая определяет количество взаимосмешиваемых пикселей. Чем больше значение, тем сильнее размытие. Радиус размытия нельзя задавать в процентах. Если данный параметр не задан, используется нулевое значение. Синтаксис фильтра:

filter: blur( <length> )

Фильтр blur() не принимает отрицательные значения.

Фильтр яркости

Фильтр применяет к изображениям линейный множитель, делая их ярче или темнее. Принимаются числа и проценты. Со значением 0% вы получите полностью черное изображение, а 100% даст оригинал. Значения выше 100% осветляют изображение. Достаточно большое значение сделает изображение полностью белым. Синтаксис фильтра:

filter : brightness( [ <number> | <percentage> ] )

Фильтр также не принимает отрицательные значения.

Фильтр контрастности

Фильтр изменяет контраст изображений. Как и в фильтре яркости, тут принимаются числа и проценты. 0% даст полностью серое изображение, 100% даст нам оригинал, а значения выше 100% увеличивают контрастность. В фильтре contrast() нельзя использовать отрицательные значения. Синтаксис фильтра:

filter : contrast( [ <number> | <percentage> ] ) Читать далее

		Это интересно +1	Как всё будет выглядеть в блоге: Фильтры в CSS для редактирования изображений. дравствуйте! В этой статье речь пойдет о фильтрах в css Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/13318839/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Фильтры в CSS для редактирования изображений. </a> <div class="insert-intro" style="font-family:trebuchet MS;">дравствуйте! В этой статье речь пойдет о фильтрах в css </div> </div> Фильтры в CSS для редактирования изображений. <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/13318839/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Фильтры в CSS для редактирования изображений.</a> <div style="font-family:trebuchet MS;">дравствуйте! В этой статье речь пойдет о фильтрах в css </div> </div>

webguru

05.03.2017

В избранное Пожаловаться Просмотров: 780

Комментарии ⁰

Учимся работать в компьютерных программах 1086

Последние откомментированные темы: