css смесена медия за редактиране на изображения
Дори основното редактиране на изображения често изисква повече от един елемент. Можете да направите това с псевдо-елементи. Но на пътя ни идва проблем. Тагът img се влияе от елементите, които се заменят, така че псевдокласовете :before и :after не работят върху тага за изображение. За да разрешите този проблем, увийте тага на изображението в таг с фигура. Маркирането ще бъде така:
Всички наши ефекти ще имат общ базов CSS код:
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
Използвах псевдокласовете :before и :after, за да мога да прилагам различни режими на смесване. Забележете, че съм задал свойствата за ширина и височина на 100%, така че изображението да заема цялата площ на фигурата. За перфектно подравняване използвах абсолютно позициониране.
В повечето случаи ще прилагаме филтри към изображения и ще използваме режими на смесване на псевдокласове. По-долу е оригиналното изображение, което ще редактираме.
Черно-бели изображения с висок контраст
За да създадете изображение с повишен контраст, можете просто да зададете контраста на максимум. За да направите ефекта още по-драматичен, можете да увеличите яркостта. Ако сте работили само с филтри, тогава не можете да направите повече. С режимите на смесване обаче е възможно да добавите вътрешна сянка с наслагване върху изображението. CSS код за ефекта:
Използвайки свойството z-index, можете да повдигнете слоя с наслагване над изображението. За да направя изображението малко по-тъмно след прилагане на сянката, използвах режима на смесване с наслагване. Задръжте курсора на мишкатаизображението по-долу, за да видите разликата между само филтри и филтри, съчетани с режими на смесване.
Като практика можете да промените стойностите на свойството box-shadow.
Състаряване на изображението
В повечето по-стари снимки цветовете избледняват и около очертанията се появява червеникаво-кафява рамка. За да симулираме този ефект, имаме нужда от повече елементи и филтри. CSS код:
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
Този път приложих филтри към изображението и тага на фигурата. Трябва да намалим цвета на изображението. Можете да направите това, като намалите стойността на филтъра за насищане под 1. Филтрите върху етикета на фигурата се прилагат след всички режими на смесване. Ако не се приложат филтри, крайното изображение ще има по-ярки нюанси на кафявото, което не искаме.
Трябва също да отбележите, че приложих полупрозрачен червен фон и към двата псевдо-класа. Именно този фон придава червеникавия оттенък. Свойството box-shadow се използва, за да придаде на контура кафяв оттенък.
За най-добри резултати експериментирайте с различни свойства.
Добавяне на нюанс
Този път ще се опитаме да дадем на изображението си син нюанс. В сравнение с топлите цветове, студените са много по-приятни за окото. CSS код: