Я недавно увидела jQuery-плагин Paul Irish для инвертирования страницы. Он инвертирует каждый цвет на странице, включая изображения и CSS. Это мне напомнило о существовании ключевого слова invert для цвета контуров (outline) (к сожалению, поддерживаемом только в Opera и IE9+). В общем, я задумалась, как можно добиться такого же эффекта только средствами CSS.
Оказалось, что это достаточно просто:
Для работы не нужно включать pointer-events:none, т.к. контур не получает событий от курсора, и также в этом случае не возникает проблем с полосками прокрутки, т.к. размер контура не влияет на скроллинг. К тому же это даже не CSS3, а чистый CSS 2.1.
Вот простая js-закладка (bookmarklet), которую можно вставить в любую страницу (от переводчика: т.к. на хабре нельзя вставить JavaScript-код для выполнения, ниже код, который вы можете скопировать и выполнить в браузере):
Замечание: эта возможность будет работать только в Opera и IE9+, т.к. в настоящий момент только они поддерживают ключевое слово «invert» для цвета контура. Однако, вероятно, можно реализовать что-то похожее для Firefox с помощью SVG-фильтров, т.к. в нем поддерживается их применение также и к HTML-элементам.
К вопросу о том, зачем кому-то нужно инвертировать страницу… Я не знаю, но предполагаю, что это может быть полезно для первоапрельских шуток, кода Konami и других забавных вещей.
(От переводчика: вот так, к примеру, выглядит инвертированный хабр:
p.s. Кстати, Lea будет выступать на Client Side-секции на РИТ++ с докладом «Mastering CSS3 Gradients».)
)
Оказалось, что это достаточно просто:
body:before {
content:"";
position:fixed;
top:50%; left: 50%;
z-index:9999;
width:1px; height: 1px;
outline:2999px solid invert;
}
Для работы не нужно включать pointer-events:none, т.к. контур не получает событий от курсора, и также в этом случае не возникает проблем с полосками прокрутки, т.к. размер контура не влияет на скроллинг. К тому же это даже не CSS3, а чистый CSS 2.1.
Вот простая js-закладка (bookmarklet), которую можно вставить в любую страницу (от переводчика: т.к. на хабре нельзя вставить JavaScript-код для выполнения, ниже код, который вы можете скопировать и выполнить в браузере):
(function(){var style=document.createElement('style');style.innerHTML='body:before { content:""; position:fixed; top:50%; left:50%; z-index:9999; width:1px; height: 1px; outline:2999px solid invert; }';document.body.appendChild(style)})();
Замечание: эта возможность будет работать только в Opera и IE9+, т.к. в настоящий момент только они поддерживают ключевое слово «invert» для цвета контура. Однако, вероятно, можно реализовать что-то похожее для Firefox с помощью SVG-фильтров, т.к. в нем поддерживается их применение также и к HTML-элементам.
К вопросу о том, зачем кому-то нужно инвертировать страницу… Я не знаю, но предполагаю, что это может быть полезно для первоапрельских шуток, кода Konami и других забавных вещей.
(От переводчика: вот так, к примеру, выглядит инвертированный хабр:
p.s. Кстати, Lea будет выступать на Client Side-секции на РИТ++ с докладом «Mastering CSS3 Gradients».)
)
