Маскирование в css | htmlbook. Ru.

26 мар 2015. В css 2. 1 уже определено свойство clip, оно ограничено. Изображение маски преобразуется в чёрно-белое изображение (если оно.

Css чёрно-белое изображение

По запросу «css чёрно-белое изображение» нашлось 48316 фото

При разработке сайтов бывает необходимо сделать черно-белое изображение из существующего цветного.

css чёрно-белое изображение

Раньше разработчики использовали для этой цели два заранее подготовленных изображения. Однако в современных условиях это может стать новый ниссан х.трейл фото избыточной тратой времени. Дело в том, что html5 + jquery уже позволяют сделать этот эффект динамически без использования дополнительного изображения. Как это сделать? Gianluca guarini написал для этого простой jquery плагин, который он разместил в отрытом доступе на github. Как начать использовать этот плагин? Для этого достаточно просто подключить его в заголовке вашей страницы: . Jquery black and white при этом добавит в jquery собственный метод – blackandwhite(). Перед тем, как его использовать, вы должны подготовить структуру html и css, которая должна выглядеть примерно так:

. После чего вам достаточно вызвать $(‘. Bwwrapper’). Blackandwhite() на событие jquery $(document). Ready(): $(document).

Ready(function(){ $('. Bwwrapper'). Blackandwhite(); });. По умолчанию все ваши изображения будут отображены в черно-белом виде. Если вы хотите добавить эффект при наведении мыши, вызовите метод так: $(document). Ready(function(){ $('. Bwwrapper'). Blackandwhite({ hovereffect: true }); });. Возможно, вас заинтересовало, как устроен этот плагин. На самом деле он достаточно прост и, возможно, вам понадобится более сложное поведение, поэтому рассмотрим его внутренности подробнее.

Как уже говорилось, плагин расширяет jquery одним дополнительным методом: blackandwhite.

css чёрно-белое изображение

При инициализации плагин проверяет, поддерживает ли браузер canvas – новый тэг, введенный в html5. Var supportscanvas =!! норкин андрей с женой фото Document. Createelement('canvas'). Getcontext;. Дополнительно плагин проверяет, не является ли браузер ie с версией, отличной от 9. 0 (на самом деле, наверное, этот момент не вполне корректен, потому что ie10 тоже будет считаться браузером, не поддерживающим canvas). Если это так, то черно-белый эффект достигается с помощью проприетарного свойства css filter: 'filter': 'progid:dximagetransform. Microsoft.

Basicimage(grayscale=1)'. Справедливости ради, хотелось бы отметить, что если браузер не поддерживает canvas, то он все равно будет отправлен в ветку для устаревших ie, что тоже некорректно, поэтому если у вас появится желание подправить поведение плагина, вы можете отправить patch автору на github. Поскольку в куске для ie нет ничего особо интересного, продолжим рассматривать ветку для современных браузеров с поддержкой canvas. Для начала скрипт определяет ширину и высоту исходного изображения. Затем добавляет новый элемент canvas прямо перед img, попутно выставляя первому position: absolute с top и left равными 0, что позволит перекрыть с помощью canvas первоначальный рисунок. Основная “магия” кроется в функции greyimages(): Function greyimages(img,canvas,width,height) { var ctx = canvas. Getcontext('2d'), currimg = img, imagedata, px, length, i = 0, grey; $(img). Load(function(){ ctx. Drawimage(img, 0, 0); imagedata = ctx.

Getimagedata(0, 0, width, height); px = imagedata. Data; length = px. Length; for ( ; i < length; i+= 4 ) { grey = px[i] *. 3 + px[i+1] *. 59 + px[i+2] *. 11; px[i] = px[i+1] = px[i+2] = grey; } ctx. Putimagedata(imagedata, 0, 0); }); }. Эта функция и производит преобразование цветного исходника в черно-белый вариант. В данном случае на событие $(img). Load() вызывается отрисовка в canvas. По сути алгоритм следующий: Получаем context ‘2d’ элемента canvas отрисовываем в контексте исходное изображение с помощью метода drawimage() получаем исходные данные об изображении из контекста с помощью метода getimagedata() с помощью математических преобразований убираем цветовую составляющую в цикле по известной формуле для rgb палитры: greyscale = 0.

2989 * r + 0. 5870 * g + 0. 1140 * b (альфа-канал при этом не меняется) после чего размещаем модифицированное изображение в контексте элемента canvas.

css чёрно-белое изображение

Как видно, это преобразование в плагине работает только по событию load(). Если вам нужно это сделать в произвольный момент, повторите логику плагина, изменив момент вызова самого преобразования. P. S. В плагине присутствует заплатка для оперы. Дело в том, что в бразуере opera странным образом работает кэширование изображений, в результате чего, в canvas приходит пустой рисунок. Автор решил эту проблему так: If (jquery. Browser кошки с фото с названиями. Opera){ var rand = math.

Random(); // fix opera bug decaching images $(pic). Prop('src',src+'? '+ rand) }. По сути это вынуждает оперу каждый раз заново загружать изображение. Не самое элегантное решение. Если вы знаете решение получше, не стесняйтесь отправить его автору.