Свойствата на CSS са достигнали такова ниво на развитие, че са в състояние да се справят с някои важни функции на графичните редактори. Пример за това са CSS филтрите, с които можете да създавате красиви ефекти за изображения.

Ако по-рано беше трудно дори да си представим, сега почти всички софтуерни филтри са внедрени в каскадната таблица, от размазване до артистични цветови модели.

Но все още има един малък недостатък на CSS филтрите - не всички уеб браузъри поддържат визуални ефекти. Разбира се, това е само въпрос на време. И когато настъпи часът „x“, разработчиците трябва да бъдат подготвени. Засега нека разгледаме какво вече е реализирано досега.

Поддръжка на браузър за CSS филтри

По принцип всички популярни браузъри, Firefox, Chrome, Opera, имат „приятелска“ връзка с филтърни ефекти. Не може да се каже същото за IE, който напълно отказва да поддържа ефекти, дори и в най-новите версии.

Функции и синтаксис на CSS филтри

Всички CSS свойства имат определени параметри, които комбинират реда, в който се записват стойностите. Свойството филтър не е изключение, подобно на други, може да използва комбинация от няколко правила в едно приложение. Например, добавете филтър за яркост за изображение и след интервал посочете друг - контраст. Ще разгледаме всичко в тази статия с няколко примера за по-добро разбиране.

Синтаксис

Филтър: име на филтъра (процент от стойността); филтър: url(img.svg); филтър: размазване (10px); филтър: яркост (0.9); филтър: контраст (150%); филтър: падаща сянка (5px 5px 10px черно); филтър: скала на сивото (80%); филтър: hue-rotate(60deg); филтър: инвертиране (80%); филтър: непрозрачност (50%); филтър: насищане (50%); филтър: сепия (40%); /* Прилагане на няколко филтъра */ филтър: контраст (150%) скала на сивото (80%);

Списък с филтри

Примери за CSS филтри

Стигнахме до интересна част от статията, в която ще разгледаме всеки филтър поотделно с примери за неговото приложение. За по-голяма яснота ще бъдат използвани три снимки. Първият ще покаже отправната точка, появата на оригиналност. Вторият ще служи като статичен пример за прилагане на филтър, а третият ще покаже ефекта на задържане на курсора на мишката върху изображението.

Филтър за размазване

В графичните редактори филтърът за размазване е незаменим инструмент и често се използва в работата. Може лесно да създаде размазано изображение, но може да създаде ефект на фокусиране върху конкретен елемент, докато останалата част от изображението попада под размазването. И много повече.

В дизайна на уебсайтове (например размазване) може да се използва като подплата за по-добра четливост на текста, разположен в картината. Всъщност размазването е Гаусово от стойност 0 px, докато изчезне напълно.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efbl1 img( филтър: blur(2px); -webkit-filter: blur(2px); ) /*за ефект на задържане*/ .efbl2 img(преход: всички 0,6s улесняват 0s; ) efbl2 :hover img( филтър: размазване(4px); -webkit-filter: размазване(4px); преход: всички 0,6s лекота 0s; )

Филтърна сянка

Свойството на сянка дойде при нас с третата версия на каскадната маса. Разбира се, той е познат на всички, които участват в разработката на уебсайтове, тъй като box-shadow играе важна роля в дизайна. Филтърът за падаща сянка може да се нарече по-ниска алтернатива с подобни параметри и има само 5 от тях, без да се брои вътрешната сянка.

Редът на писане е следният: 5px/-5px (хоризонтално отместване), 5px/-5px (вертикално отместване), 15px (радиус на замъгляване на сянка), 5px/-5px (разтягане на сянка), черно (цветно). Филтърът поддържа целия синтаксис с изключение на разтягане и вмъкнати стойности, както и добавяне на множество сенки, разделени със запетаи. Но въпреки всичко това има някои предимства, например филтърът взема предвид псевдоелементите, което ви позволява да покажете точната форма на сянката на елемента.

Също така е интересно, че когато блокът няма фон, а е посочен само щрих на границата, тогава при използване на кутия-сянка ще се покаже сянка, като се предполага, че се взема предвид фонът, тоест плътен. А в случай на използване на падаща сянка, сянката приема формата на щрих, без да се взема предвид фонът.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efdrswd1 img( филтър: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0.4)); 0.4));

Филтър за обезцветяване

Класически стил на фотография за всички времена в правилната посока. Филтърът позволява само една стойност - положителна. В зависимост от зададения процент, нюансите на сивото плавно ще заменят цвета на изображението. Освен това вместо проценти можете да използвате дроби до цяло число (0,01/1).

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efgrays1 img( филтър: сива скала(90%); -webkit-filter: сива скала(90%); ) /*за ефект на задържане*/ .efgrays2 img(преход: всички 0,6s улесняват 0s; ) .efgrays2:hover img( филтър: скала на сивото (90%); -webkit-filter: скала на сивото (90%); преход: всички 0,6 s лекота 0 s; )

Филтър за яркост

Добавяне на светлина към "неизследваните" черни ъгли на изображението. Често се използва при обработка на снимки, тъй като любителските снимки обикновено се правят на лошо осветени места. Яркостта на филтъра се регулира от 0% (напълно черна картина) до почти пълно изчезване на изображението. Първоначалната точка се определя като 100%, а стойността може да бъде определена и като дроб.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efbrig1 img( филтър: яркост(150%); -webkit-filter: яркост(150%); ) /*за ефект на задържане*/ .efbrig2 img(преход: всички 0,6s улесняват 0s; ) .efbrig2:hover img( филтър: яркост(150%); -webkit-филтър: яркост(150%); преход: всички 0,6s лекота 0s; )

Контрастен филтър

Лесен начин да направите изображението по-изразително е като експериментирате с настройките за яркост на най-светлите и най-тъмните части на картината. Контрастният филтър е готов да помогне с това. Параметрите му, подобно на много други, изключват отрицателна стойност (-150%), а началната позиция е посочена на 100%. В допълнение към процентите се допускат и дроби (1,5).

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efcontr1 img( филтър: контраст(150%); -webkit-filter: контраст(150%); ) /*за ефект на задържане*/ .efcontr2 img(преход: всички 0,6s улесняват 0s; ) .efcontr2:hover img( филтър: контраст (150%); -webkit-филтър: контраст (150%); преход: всички 0,6 секунди лекота 0 секунди; )

Филтър за цветни тонове

Отлична дизайнерска техника в дизайна на изображения, която съответства на стила на дизайна на основния ресурс. Идеята е да наслагвате нюанс на избрания цвят върху оригиналното изображение. Съотношенията излизат в зависимост от дадения градус, който показва цветовата точка на цветното колело.

Ако стойността е положителна (150 градуса), тогава въртенето се извършва по посока на часовниковата стрелка. Съответно, ако е отрицателен, тогава обратно на часовниковата стрелка. В две позиции започва от 0 градуса до 360 градуса.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efhrotai1 img( филтър: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*за ефект на задържане*/ .efhrotai2 img(преход: всички 0,6s лекота 0s ; ).

Инверсионен филтър

Специфичен ефект, който ви позволява да обърнете цвета на изображение с главата надолу. В графичните редактори той има определена роля и се случва, че без неговото участие не може да се постигне желаният резултат. Параметърът за инвертиране на филтъра се определя само в положителна посока от стойност от 0% до 100%.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efinve1 img( филтър: инвертиране(100%); -webkit-filter: инвертиране(100%); ) /*за ефект на задържане*/ .efinve2 img(преход: всички 0,6s улесняват 0s; ) .efinve2:hover img( филтър: инвертиране(100%); -webkit-filter: инвертиране(100%); преход: всички 0,6s улесняват 0s; )

Филтър за насищане

Когато едно изображение загуби естествения си цвят по неизвестни причини (нещо като избеляла от слънцето тениска), увеличаването на наситеността може незабавно да възстанови първоначалния му вид. И ако този филтър се използва в комбинация с други филтри, резултатът ще бъде много задоволителен. Настройката се извършва от 0 първоначален изглед до големи числа.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efsatut1 img( филтър: насищане(165%); -webkit-filter: насищане(165%); ) /*за ефект на задържане*/ .efsatut2 img(преход: всички 0,6s улесняват 0s; ) .efsatut2:hover img( филтър: насищане(165%); -webkit-filter: насищане(165%); преход: всички 0.6s лекота 0s; )

Сепия филтър

Имитация на ефекта на стари снимки (леко кафяв оттенък). Така се постига ретро стил на изображение, който е особено популярен. Филтърът за сепия може да се регулира от 0% (начална позиция) до 100%.

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efsepiaa1 img( филтър: сепия(100%); -webkit-filter: сепия(100%); ) /*за ефект на задържане*/ .efsepiaa2 img(преход: всички 0,6s улесняват 0s; ) .efsepiaa2:hover img( филтър: сепия(100%); -webkit-filter: сепия(100%); преход: всички 0,6s улесняват 0s; )

Прозрачност на филтъра

Филтър, подобен на свойството за непрозрачност от версия 3 на каскадната таблица. Синтаксисът е същият и стойността на прозрачност може да се регулира от 0% до 100% (оригинална позиция).

Оригинален

Филтър

Ховър ефект

/*статично правило*/ .efopaty1 img( филтър: непрозрачност(50%); -webkit-filter: непрозрачност(50%); ) /*за ефект на задържане*/ .efopaty2 img(преход: всички 0,6s улесняват 0s; ) .efopaty2:hover img( филтър: непрозрачност(50%); -webkit-филтър: непрозрачност(50%); преход: всички 0,6s лекота 0s; )

Филтърна връзка

Персонализиран филтър се създава въз основа на SVG елементи със специфичен идентификатор, който впоследствие може да се използва в CSS чрез филтър за връзки. Ефектите могат да бъдат много различни от стандартните филтри, от маски за наслагване до банална прозрачност.

Генератор на CSS филтри

Отдавна е обичай да се създават генератори на различни CSS свойства. , и много, много повече. Те служат като инструмент за улесняване на работата. А за начинаещи уеб администратори те могат да имат двойна полза. Те са много лесни за използване: преместете плъзгачите и можете да видите резултатите веднага. И когато приключите, остава само да копирате генерирания код. Същото важи и за генераторите на CSS филтри. Ето две от тях за справка:

Заключение

Прегледът се оказа доста голям, но се надявам, че ще бъде полезен на някого на практика. Освен това не забравяйте да комбинирате филтри, един е добър, но два ще бъдат по-добри в определени случаи.

CSS3 филтрите са много интересна издънка на SVG, която ви позволява да променяте HTML елементи и изображения чрез прилагане на размазване, яркост и много други филтри. В този урок ще разгледаме набързо как точно работят.

как става това

Използвайки само CSS, можем да създадем някои доста сложни ефекти. Те могат да се прилагат както към изображения, така и към HTML елементи. Свойството, което се използва за контролиране на всички тези ефекти, е филтър.

филтър: филтър (стойност);

Както може да очаквате, това свойство изисква използването на префикс на браузъра. Но засега само -webkit-(Chrome и Safari) са единствените браузъри, които поддържат това свойство.

Webkit-филтър: филтър(стойност);
-moz-filter: филтър (стойност);
-o-filter: филтър (стойност);
-ms-filter: филтър (стойност);

Филтриране

Има редица филтри, така че за да разберете по-добре всеки от тях, нека ги разгледаме поотделно. Множество филтри могат да бъдат приложени към един елемент (разделен с интервал), например яркостИ размазване:

филтър: размазване (5px ) яркост (0,5 ) ;

Има няколко филтъра, които няма да бъдат разгледани по-долу, но те могат лесно да бъдат внедрени със съществуващ CSS (прозрачност и сенки). Ето оригиналното изображение, което ще използваме, за да демонстрираме как работят филтрите:

Ще покажа снимка с приложен филтър (първа снимка) и резултат от филтъра под формата на статично изображение (втора снимка), ако използвате браузър, който не поддържа филтри и не можете да видите резултата.

Размазване

Някога искали ли сте да направите замъгляване по Гаус върху изображение или текст, използвайки само CSS? С филтри можете да направите това! Замъгляването се измерва в пиксели, така че можете да направите нещо подобно:

филтър: blur(5px );
// Специфичен за браузър
-webkit-filter: blur(5px) ;
-moz-филтър: размазване(5px) ;
-o-филтър: размазване(5px) ;
-ms-филтър: размазване(5px);

Яркост

Яркостта се измерва от нула до едно, като 1 е пълна яркост (бяло) и 0 е оригинална яркост.

филтър: яркост (0.2 );
// Специфичен за браузър
-webkit-filter: яркост (0.2 ) ;
-moz-филтър: яркост(0.2 );
-o-филтър: яркост (0,2 );
-ms-филтър: яркост(0,2 );

Насищане

Наситеността се измерва в проценти.

филтър: насищане (50% );
// Специфичен за браузър
-webkit-filter: насищане (50% );
-moz-филтър: насищане (50% );
-o-филтър: насищане (50% );
-ms-филтър: насищане (50%);

Въртене на тона

Този филтър ви позволява да промените тона, като го завъртите (помислете за колело от цветове, което след това завъртате). Измерва се в градуси.

филтър: hue-rotate(20deg) ;
// Специфичен за браузър
-webkit-filter: hue-rotate(20deg) ;
-moz-филтър: hue-rotate(20deg) ;
-o-филтър: hue-rotate(20deg) ;
-ms-филтър: hue-rotate(20deg) ;

Контраст

Контрастът отново се измерва като процент. 100% е по подразбиране, 0% ще създаде напълно черно изображение. Всичко над 100% добавя контраст!

филтър: контраст(150% );
// Специфичен за браузър
-webkit-filter: контраст(150% ) ;
-moz-филтър: контраст(150% );
-o-филтър: контраст(150% );
-ms-филтър: контраст(150% );

Инверсия

Също така се измерва като процент. Наличните стойности варират от 0% до 100%. Колкото и да е странно, в момента webkit не поддържа инверсии, ако са под 100%.

филтър: инвертиране (100%) ;
// Специфичен за браузър
-webkit-filter: инвертиране (100%);
-moz-филтър: инвертиране (100% );
-o-филтър: инвертиране (100% );
-ms-филтър: инвертиране (100%);

Избелване

Отново въведете процента, с който искате да обезцветите изображението. Наличните стойности варират от 0% до 100%.

филтър: скала на сивото (100% );
// Специфичен за браузър
-webkit-filter: скала на сивото (100% );
-moz-филтър: скала на сивото (100% );
-o-филтър: скала на сивото (100% );
-ms-филтър: скала на сивото (100%);

Сепия

Предполагам, че това е много полезно, ако искате да публикувате нещо в Instagram. Въпреки че също предполагам, че няма да използвате CSS за това. Във всеки случай тези нюанси на сивото и негатива ще се добавят, за да добавят сепия към изображението. 100% ще бъде пълна сепия, 0% ще бъде оригиналното изображение.

филтър: сепия (100% ) ;
// Специфичен за браузър
-webkit-филтър: сепия(100% );
-moz-филтър: сепия(100% );
-o-филтър: сепия (100% );
-ms-филтър: сепия(100%);

Поддръжка на браузър

Ако имате някакви въпроси, препоръчваме да използвате нашия

здравей Днес няма да изненадате никого с красиви ефекти върху уебсайтове. Някои правят това във Flash през последните 10 години, други все още не са спрели да го правят в Javascript, но най-напредналите използват CSS3 отдавна. Това ще направим днес.

Нека научим как да обезцветяваме CSS изображение (CSS изображение в сива скала) и да го правим красиво

И така, нека започнем с нещо просто, имаме нужда от красиви снимки, нека вземем това:

Трябва да го десатурираме (десатурираме CSS изображението - премахваме цветовете, правим изображението черно-бяло). За това (и за работа с графики като цяло) CSS3 има специален инструмент за филтриране.

Това ще използваме.

Решение: Обезцветете CSS изображението

Първо, нека изложим самото изображение:

След това ще добавим стил към изображението:

Img ( -webkit-filter: скала на сивото (100%); -moz-филтър: скала на сивото (100%); -ms-филтър: скала на сивото (100%); -o-филтър: скала на сивото (100%); филтър: скала на сивото ( 100%) филтър: сив /* IE 6-9 */ )

Сега нашата снимка ще стане черно-бяла.

Можете, разбира се, да спрете дотук, но е много по-интересно, когато картината също реагира на действията на потребителя.

Предлагам да го направя така, че когато задържите курсора на мишката върху снимката, тя постепенно се оцветява.

Всъщност това изобщо не е трудно да се направи и изобщо не е необходимо да знаете Javascript.

Анимиране на обезцветено изображение CSS

Нека добавим малко към предишния ни стил:

Img ( -webkit-filter: скала на сивото (100%); -moz-филтър: скала на сивото (100%); -ms-филтър: скала на сивото (100%); -o-филтър: скала на сивото (100%); филтър: скала на сивото ( 100%); филтър: сив; /* IE 6-9 */ ) img:hover ( -webkit-filter: none; -ms-filter: none; -o-filter: none; filter : няма; филтър: няма; /* IE 6-9 */ )

Това ще позволи на картината да се оцвети, когато задържите курсора на мишката върху нея. Нека използваме и CSS3 прехода, за да направим процеса на обезцветяване анимиран:

Img ( -webkit-filter: скала на сивото (100%); -moz-филтър: скала на сивото (100%); -ms-филтър: скала на сивото (100%); -o-филтър: скала на сивото (100%); филтър: скала на сивото ( 100%); /* IE 6-9 */ -webkit-transition: всички 1s; /*край на кода с преход */) img:hover (-webkit-filter: няма; -moz-filter: няма; -ms-filter: няма; -o-filter: няма; филтър: няма; филтър: няма; /* IE 6-9 * / )

Параметърът за всички при преход казва, че правилото ще работи за всички стилове, а вторият параметър е времето за анимация.
В първия параметър можете да зададете определено свойство (например височина, за да анимирате само височината), а във втория времето в секунди (може да е в десетични дроби - 0.1s).

Може да се наложи изображението да стане сиво възможно най-бързо и без използване на графични редактори. Разбира се, можете да използвате графичния редактор на Adobe Photoshop (дори можете да зададете дълбочината и тона). Разбира се, не можете да конфигурирате такива параметри в браузъра, но нашите очи (освен ако, разбира се, не сте професионалист) едва ли ще забележат разликата.

В тази статия ще разгледаме начини да направите изображение сиво.

1. CSS филтър

Ползване на имота филтъре може би най-лесният начин за създаване на черно-бяло изображение. За да създадете черно-бяло изображение в IE, трябва също да използвате свойството филтър.

Днес имот филтъре част от технологията CSS3, която се поддържа от браузъри като Firefox, Chrome и Safari. Филтрите на Webkit могат не само да създадат черно-бял ефект, но и да дадат ефекти на сепия и замъгляване.

За да направите изображението сиво, трябва да зададете следните свойства:

Този код ще работи в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.

2. Javascript

Алтернатива на кода по-горе е Javascript, който работи във всички браузъри, ако е активиран, включително IE6 и по-стари.

функция gray(imgObj) ( var canvas = document.createElement ("canvas" ) ; var canvasContext = canvas.getContext ( "2d" ) ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH;drawImage (imgObj, 0, 0); var imgPixels = canvasContext.getImageData (0, 0, imgW, imgH);

С помощта на Javascript можем да дадем на изображението черно-бял ефект, например, когато задържим курсора и щракнем върху изображението. Можете да използвате jQuery заедно, за да създадете плавен ефект на избледняване към сиво. Единственият недостатък е, че Javascript може да е деактивиран в браузъра.

3.SVG

Друг начин е да използвате SVG филтри.

Всичко, което трябва да направите, е да създадете SVG файл и да използвате кода по-долу:

#сива скала");"

Резултатът ще бъде подобен.

Заключение

img ( -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1) ; филтър: grayscale(100% ) ; филтър: url ("../img/gray.svg#grayscale" ) ; филтър : сив ;

Този код може да се използва заедно с Javascript и ако Javascript е деактивиран, този код ще работи. Modernizr може да помогне с това. Modernizr добавя js клас за тяло, ако Javascript е активиран в браузъра, и ще регистрира класане-js

.no-js img ( -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1) ; филтър: grayscale(100% ) ; филтър: url (../img/gray.svg#grayscale " ) ; филтър : сив ;) CSS3 филтри

възпроизвеждат визуални ефекти в браузъра, подобни на филтрите на Photoshop. Филтри могат да се добавят не само към изображения, но и към всякакви непразни елементи.

Наборът от филтри не се ограничава до предварително инсталираните в браузъра. Можете също да използвате SVG филтри, като ги изтеглите от връзката заедно с svg елемента.

Браузърите обработват страницата пиксел по пиксел, като прилагат зададените ефекти и рисуват резултата върху оригинала. По този начин, като използвате няколко филтъра, можете да постигнете различни ефекти; Колкото повече филтри, толкова повече време отнема на браузъра да изобрази страницата.

Можете да приложите няколко филтъра едновременно. Класическият начин за прилагане на такива ефекти е, когато задържите курсора на мишката върху елемент: hover .

Поддръжка на браузър

IE:не поддържа
Ръб: 13.0 освен url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Опера: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Браузър за Android: 53.0, 4.4 -webkit-
Chrome за Android: 55.0, 47.0 -webkit-