blur()
The blur()
function applies a Gaussian blur to the input image. The value of radius
defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. The initial value for interpolation is 0
. The parameter is specified as a CSS length, but does not accept percentage values.
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img
id="img1"
class="internal default"
src="test_form_2.jpeg"
style="width: 100%;" />
</td>
<td>
<img
id="img2"
class="internal default"
src="test_form_2.jpeg"
style="width: 100%;" />
</td>
<td>
<div class="svg-container">
<svg
id="img3"
overflow="visible"
viewBox="0 0 212 161"
color-interpolation-filters="sRGB">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
</filter>
<image
xlink:href="test_form_2.jpeg"
filter="url(#svgBlur)"
width="212px"
height="161px" />
</svg>
</div>
</td>
<td>
<img
id="img4"
class="internal default"
src="test_form_2_s.jpg"
style="width: 100%;" />
</td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur(5px);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</svg>
brightness()
The brightness()
function applies a linear multiplier to the input image, making it appear more or less bright. A value of 0%
will create an image that is completely black. A value of 100%
leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100%
are allowed, providing brighter results. The initial value for interpolation is 1
.
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]"/>
<feFuncG type="linear" slope="[amount]"/>
<feFuncB type="linear" slope="[amount]"/>
</feComponentTransfer>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="2"/>
<feFuncG type="linear" slope="2"/>
<feFuncB type="linear" slope="2"/>
</feComponentTransfer>
</filter>
<image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: brightness(2);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
contrast()
The contrast()
function adjusts the contrast of the input image. A value of 0%
will create an image that is completely gray. A value of 100%
leaves the input unchanged. Values of an amount over 100%
are allowed, providing results with more contrast. The initial value for interpolation is 1
.
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
<feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
<feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
</feComponentTransfer>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 240 151" color-interpolation-filters="sRGB">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5"/>
<feFuncG type="linear" slope="2" intercept="-0.5"/>
<feFuncB type="linear" slope="2" intercept="-0.5"/>
</feComponentTransfer>
</filter>
<image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: contrast(200%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
drop-shadow()
The drop-shadow()
function applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <shadow>
(defined in CSS Backgrounds and Borders Module Level 3), with the exception that the inset
keyword and spread
parameter are not allowed. This function is similar to the more established box-shadow
property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <shadow>
parameter are as follows:
offset-x
(required)
-
The horizontal offset for the shadow, specified as a <length>
value. Negative values place the shadow to the left of the element.
offset-y
(required)
-
The vertical offset for the shadow, specified as a <length>
value. Negative values place the shadow above the element.
<blur-radius>
(optional)
-
This is a third <length>
value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0
(the shadow's edge is sharp).
<color>
(optional)
-
See <color>
values for possible keywords and notations. If not specified, the color used depends on the browser - it is usually the value of the <color>
property, but note that Safari currently paints a transparent shadow in this case.
filter: drop-shadow(16px 16px 10px black)
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
<feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
<feFlood flood-color="[color]"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img
alt="A rectangular image of a pencil marking a multiple choice Optical Mark Recognition, or OMR, form."
id="img1"
class="internal default"
src="test_form_4.jpeg"
style="width: 100%;" />
</td>
<td>
<img
alt="The OMR photo with a black drop shadow visible below the image and to the right. The offset and blur-radius values produce a soft, rounded shadow."
id="img2"
class="internal default"
src="test_form_4.jpeg"
style="width: 100%;" />
</td>
<td>
<div class="svg-container">
<svg
aria-labelledby="svg-drop-shadow-title svg-drop-shadow-desc"
role="img"
xmlns="http://www.w3.org/2000/svg"
id="img3"
overflow="visible"
viewBox="0 0 213 161"
color-interpolation-filters="sRGB">
<title id="svg-drop-shadow-title">Rectangular OMR photo</title>
<desc id="svg-drop-shadow-desc">
The same image as the previous two examples, but embedded within
an SVG element. A filter element with a gaussian blur and offset
is applied. The offset and blur values (set with the stdDeviation
attribute on the feGaussianBlur element) produce a shadow that has
less spread and is more rectangular than the CSS example. The
shadow is visible below and to the right of the image, but with a
smaller spread. The result is a shadow that is closer to the
rectangular shape of the original image.
</desc>
<defs>
<image
id="MyImage"
xlink:href="test_form_4.jpeg"
width="213px"
height="161px" />
</defs>
<filter
id="drop-shadow"
x="-50%"
y="-50%"
width="200%"
height="200%">
<feOffset dx="9" dy="9" in="SourceAlpha" />
<feGaussianBlur stdDeviation="5" />
</filter>
<use xlink:href="#MyImage" filter="url(#drop-shadow)" />
<use xlink:href="#MyImage" />
</svg>
</div>
</td>
<td>
<img
alt="A screenshot of the OMR image with drop shadow applied to show the effect for browsers that do not support the CSS or SVG filters."
id="img4"
class="internal default"
src="test_form_4_s.jpg"
style="width: 100%;" />
</td>
</tr>
<tr>
<td>
<img
alt="An edited version of the original image that uses transparency to achieve an irregular shape at the bottom and add a small hole. The image also has a gradient transparency that starts on the right edge and fades towards the other side."
id="img11"
class="internal default"
src="test_form_4_irregular-shape_opacity-gradient.png"
style="width: 100%;" />
</td>
<td>
<img
alt="Image with black drop shadow applied which is visible below and to the right of the image. The shadow follows the curves of the irregularly shaped bottom and is also visible through the holes The shadow color is not fully opaque, so it displays as a dark gray over the white background of the page and is visible below most of the image, which makes it appear more gray than the original example."
id="img12"
class="internal default"
src="test_form_4_irregular-shape_opacity-gradient.png"
style="width: 100%;" />
</td>
<td>
<div class="svg-container">
<svg
aria-labelledby="svg-irregular-drop-shadow-title svg-irregular-drop-shadow-desc"
role="img"
xmlns="http://www.w3.org/2000/svg"
id="img13"
overflow="visible"
viewBox="0 0 213 161"
color-interpolation-filters="sRGB">
<title id="svg-irregular-drop-shadow-title">
OMR photo with irregular bottom edge
</title>
<desc id="svg-irregular-drop-shadow-desc">
The same image as the previous two examples, but embedded within
an SVG element. A drop shadow has been added with a filter element
using a feGaussianBlur and an feOffset element. The shadow follows
the irregular shape of the image and is visible under the
transparent gradient of the image.
</desc>
<defs>
<image
id="MyImage2"
xlink:href="test_form_4_irregular-shape_opacity-gradient.png"
width="213px"
height="161px" />
</defs>
<filter
id="drop-shadow2"
x="-50%"
y="-50%"
width="200%"
height="200%">
<feOffset dx="5" dy="5.5" in="SourceAlpha" />
<feGaussianBlur stdDeviation="2.5" />
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0.8" />
</feComponentTransfer>
</filter>
<use xlink:href="#MyImage2" filter="url(#drop-shadow2)" />
<use xlink:href="#MyImage2" />
</svg>
</div>
</td>
<td>
<img
alt="A screenshot of the previous example image with drop shadow applied to show the effect in browsers that do not support the CSS or SVG filters."
id="img14"
class="internal default"
src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png"
style="width: 100%;" />
</td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: drop-shadow(16px 16px 10px black);
}
#img12 {
width: 100%;
height: auto;
filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
#irregular-shape {
width: 64%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3,
#img13 {
width: 100%;
height: auto;
}
grayscale()
The grayscale()
function converts the input image to grayscale. The value of amount
defines the proportion of the conversion. A value of 100%
is completely grayscale. A value of 0%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The initial value for interpolation is 0
.
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 276 184" color-interpolation-filters="sRGB">
<filter id="grayscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
<image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: grayscale(100%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
hue-rotate()
The hue-rotate()
function applies a hue rotation on the input image. The value of angle
defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg
leaves the input unchanged. The initial value for interpolation is 0
. Though there is no maximum value; the effect of values above 360deg
wraps around.
filter: hue-rotate(90deg)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 266 190" color-interpolation-filters="sRGB">
<filter id="hue-rotate">
<feColorMatrix type="hueRotate"
values="90"/>
</filter>
<image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: hue-rotate(90deg);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
<svg
style="position: absolute; top: -999999px"
xmlns="http://www.w3.org/2000/svg">
<filter id="svgHueRotate">
<feColorMatrix type="hueRotate" values="90" />
</filter>
</svg>
invert()
The invert()
function inverts the samples in the input image. The value of amount
defines the proportion of the conversion. A value of 100%
is completely inverted. A value of 0%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The initial value for interpolation is 0
.
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 183 276" color-interpolation-filters="sRGB">
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
<image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: invert(100%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
opacity()
The opacity()
function applies transparency to the samples in the input image. The value of amount
defines the proportion of the conversion. A value of 0%
is completely transparent. A value of 100%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. The initial value for interpolation is 1
. This function is similar to the more established opacity
property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 276 183" color-interpolation-filters="sRGB">
<filter id="opacity">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0.5">
</feComponentTransfer>
</filter>
<image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: opacity(50%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
saturate()
The saturate()
function saturates the input image. The value of amount
defines the proportion of the conversion. A value of 0%
is completely un-saturated. A value of 100%
leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100%
are allowed, providing super-saturated results. The initial value for interpolation is 1
.
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 201 239" color-interpolation-filters="sRGB">
<filter id="saturate">
<feColorMatrix type="saturate"
values="2"/>
</filter>
<image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: saturate(200%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
sepia()
The sepia()
function converts the input image to sepia. The value of amount
defines the proportion of the conversion. A value of 100%
is completely sepia. A value of 0%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The initial value for interpolation is 0
.
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
<td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 259 194" color-interpolation-filters="sRGB">
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>
<image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
</svg><div></td>
<td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: sepia(100%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}