Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here are some filters that provide different types of effect:</p> <ul> <li>Drop shadow (transparent black shadow with slight offset)</li> <li>Black glow (with a fixed colour)</li> <li>Object-coloured glow (takes the colour of the object to which it is a applied)</li> </ul> <p>An example:</p> <p><img src="https://i.stack.imgur.com/33YrG.png"/></p> <p>There's a <a href="http://jsfiddle.net/drewnoakes/gc8Bt/">demo here</a>.</p> <p>The code:</p> <pre><code>&lt;!-- a transparent grey drop-shadow that blends with the background colour --&gt; &lt;filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25"&gt; &lt;feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/&gt; &lt;feColorMatrix result="bluralpha" type="matrix" values= "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.4 0 "/&gt; &lt;feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/&gt; &lt;feMerge&gt; &lt;feMergeNode in="offsetBlur"/&gt; &lt;feMergeNode in="SourceGraphic"/&gt; &lt;/feMerge&gt; &lt;/filter&gt; &lt;!-- a transparent grey glow with no offset --&gt; &lt;filter id="black-glow"&gt; &lt;feColorMatrix type="matrix" values= "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0"/&gt; &lt;feGaussianBlur stdDeviation="2.5" result="coloredBlur"/&gt; &lt;feMerge&gt; &lt;feMergeNode in="coloredBlur"/&gt; &lt;feMergeNode in="SourceGraphic"/&gt; &lt;/feMerge&gt; &lt;/filter&gt; &lt;!-- a transparent glow that takes on the colour of the object it's applied to --&gt; &lt;filter id="glow"&gt; &lt;feGaussianBlur stdDeviation="2.5" result="coloredBlur"/&gt; &lt;feMerge&gt; &lt;feMergeNode in="coloredBlur"/&gt; &lt;feMergeNode in="SourceGraphic"/&gt; &lt;/feMerge&gt; &lt;/filter&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload