Как стать автором
Обновить

Яблоко или груша?

Время на прочтение1 мин
Количество просмотров106K


На форуме Stackoverflow обсуждают, как сделать PNG, который будет по-разному выглядеть в разных браузерах. Например, картинка вверху выглядит как груша в Chrome/Firefox, но «превращается» в яблоко в браузере IE.

Рецепт простой. Всё дело в гамма-коррекции, которая учитывается в одних браузерах и не учитывается в других браузерах. Чтобы эксплуатировать эту разницу, мы берём две картинки: яблоко и грушу. Грушу помещаем в светлые пикселы PNG.



Яблоко — в тёмные пикселы PNG. Яркость нужно настроить так, что при затемнении груша становится хорошо видна, а яблоко затемняется полностью. И наоборот, при максимальном осветлении груша практически исчезает, а яблоко хорошо видно.



Совмещаем два изображения, так что светлые и «тёмные» пикселы чередуются шахматкой — и готово. Теперь, если браузер включает гамма-коррекцию, то на экране появляется груша. А если просто сохранить картинку на десктоп и открыть в редакторе, то видно яблоко.



P.S. Ещё один пример: в браузерах с гамма-коррекцией отображается эмблема GNU, а в старом IE или Opera — цветной пингвин.

Теги:
Хабы:
Всего голосов 108: ↑92 и ↓16+76
Комментарии67

Публикации

Истории

Ближайшие события

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
24 сентября
Astra DevConf 2024
МоскваОнлайн
25 сентября
Конференция Yandex Scale 2024
МоскваОнлайн
28 – 29 сентября
Конференция E-CODE
МоскваОнлайн
28 сентября – 5 октября
О! Хакатон
Онлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн