Pull to refresh

Инвертирование страницы только средствами CSS

Reading time2 min
Views7.3K
Original author: Lea Verou
Я недавно увидела jQuery-плагин Paul Irish для инвертирования страницы. Он инвертирует каждый цвет на странице, включая изображения и CSS. Это мне напомнило о существовании ключевого слова invert для цвета контуров (outline) (к сожалению, поддерживаемом только в Opera и IE9+). В общем, я задумалась, как можно добиться такого же эффекта только средствами CSS.

Оказалось, что это достаточно просто:
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».)
)
Tags:
Hubs:
Total votes 51: ↑45 and ↓6+39
Comments24

Articles