CSS Filters
HTML
<div id="container">
<h1>CSS Filters</h1>
<p>Browser support - <a href="http://caniuse.com/#feat=css-filters">Can i Use</a></p>
<p>Description: <a href="http://www.w3schools.com/cssref/css3_pr_filter.asp">W3Schools</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">Mozilla</a>, <a href="https://www.w3.org/TR/filter-effects/#ShorthandEquivalents">w3.org</a></p>
<div class="input-block">
<form>
<fieldset>
<legend>CSS Filters</legend>
<select id="filters" name="filters">
<option value="blur">Blur</option>
<option value="brightness">Brightness</option>
<option value="contrast">Contrast</option>
<option value="drop-shadow">Drop-Shadow</option>
<option value="grayscale">Grayscale</option>
<option value="hue-rotate">Hue-Rotate</option>
<option value="invert">Invert</option>
<option value="opacity">Opacity</option>
<option value="saturate">Saturate</option>
<option value="sepia">Sepia</option>
</select>
</fieldset>
</form>
<h3>Hover over Image =></h3>
</div>
<div class="content-block">
<h2 class="demo"></h2>
<img class="blur-me" src="http://placekitten.com/300/200?image=1">
<p class="demo2"></p>
</div>
</div>
CSS
h1, h3 {
text-align: center;
font-family: sans-serif;
color: #0A3E6D;
text-transform: uppercase;
}
img {
width: 90%;
height: auto;
}
.container {
width: 90%;
max-width: 1280px;
margin: 0 auto;
}
.content-block,
.input-block {
width: 45%;
display: block;
float: left;
text-align: center;
box-shadow: 2px 2px 3pc #999;
margin: 1em;
}
.content-block img {
padding: 1em;
}
.blur-me {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.grayscale-me {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.sepia-me {
-webkit-filter: sepia(1);
filter: sepia(1);
}
.saturate-me {
-webkit-filter: saturate(.3);
filter: saturate(.3);
}
.hue-rotate-me {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.invert-me {
-webkit-filter: invert(.8);
filter: invert(.8);
}
.opacity-me {
-webkit-filter: opacity(.2);
filter: opacity(.2);
}
.brightness-me {
-webkit-filter: brightness(3);
filter: brightness(3);
}
.contrast-me {
-webkit-filter: contrast(4);
filter: contrast(4);
}
.drop-shadow-me {
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}
img:hover {
-webkit-filter: none;
filter: none;
}
.demo {
font-family: monospace;
font-weight: 600;
text-decoration: underline;
}
.demo2 {
font-family: monospace;
font-weight: 600;
}
.demo2 em {
color: red;
padding: 0 1em;
text-decoration: none;
font-size: 1.2em;
font-weight: normal;
}
select {
width: 75%;
height: 40px;
}
JAVASCRIPT
$("document").ready(function() {
$( "select" ).change(function () {
var str = "";
$( "img" ).removeClass();
var strClass = "";
$( "select option:selected" ).each(function() {
str += $( this ).text();
strClass = str.toLowerCase();
});
$( ".demo" ).text( str );
$( "img" ).addClass(strClass + "-me");
var classValue = $("img").css("filter");
$( ".demo2" ).html("Filter:" + "<em>" + classValue + "</em>");
})
.change();
// $('select').on('change', function() {
// alert( this.value );
// });
});
2 Responses
a) locally (in playground) -
click on gear-icon, select tabs "Javascript" and add external resource.
In example I used jquery-based script, therefore in playground settings i added link to jquery cdn https://code.jquery.com/jquery-2.2.4.min.js
b) globally (in custom page)
-- in documents <head> add string <script type="text/javascript" src=" https://code.jquery.com/jquery-2.2.4.min.js"></script> (this enable a jquery in all pages)
-- below jquery add string <script>...here is a code of example...</script>
P.S. For CSS filters a JavaScript not needed.