У графічних редакторах дуже легко міняти яскравість або контраст зображень, застосовувати різні фільтри.Від недавно це можна робити і засобами CSS, прямо на веб-сторінках за допомогою CSS Filter Effects. Перелік браузерів, що підтримують даний параметр, можна подивитися на caniuse.com Відтінки сірого, або чорно-біле
|
|
<span style="color: #000000;"><code class="css" style="color: #222222;"><span class="tag">img</span> <span class="rules">{ <span class="rule"><span class="attribute">-webkit-filter</span>:<span class="value"> <span class="function">grayscale(<span class="number">100</span>%)</span>;</span></span> <span class="rule">}</span></span> </code></span> |
Сепія
|
|
<span style="color: #000000;"><code class="css" style="color: #222222;"><span class="tag">img</span> <span class="rules">{ <span class="rule"><span class="attribute">-webkit-filter</span>:<span class="value"> <span class="function">sepia(<span class="number">100</span>%)</span>;</span></span> <span class="rule">}</span></span> </code></span> |
Яскравість
|
|
<span style="color: #000000;"><code class="css" style="color: #222222;"><span class="tag">img</span> <span class="rules">{ <span class="rule"><span class="attribute">-webkit-filter</span>:<span class="value"> <span class="function">brightness(<span class="number">50</span>%)</span>;</span></span> <span class="rule">}</span></span> </code></span> |
Контраст
|
|
<span style="color: #000000;"><code class="css" style="color: #222222;"><span class="tag">img</span> <span class="rules">{ <span class="rule"><span class="attribute">-webkit-filter</span>:<span class="value"> <span class="function">contrast(<span class="number">200</span>%)</span>;</span></span> <span class="rule">}</span></span> </code></span> |
Насичення
|
|
<span class="tag">img</span><span class="rules">{ <span style="color: #333333;">-webkit-filter: saturate(0%);</span> <span class="rule">}</span></span> |
Розмиття
|
|
<span style="color: #000000;"><code class="css" style="color: #222222;"><span class="tag">img</span><span class="rules">{ <span class="rule"><span class="attribute">-webkit-filter</span>:<span class="value"> <span class="function">blur(<span class="number">5</span>px)</span>;</span></span> <span class="rule">}</span></span> </code></span> |
Инвертировать…
