In this tutorial, we are going to create a photo filter and effects web application and android app like Instagram filters using html, css and JavaScript. Photo Filters are a fun way to share your mobile photos and computer photos with friends.
Step 2 : CSS Code
CSS Code is used to make the structure design and to control the layout of share filter image web application.
The Important CSS code for your application.
Step 3 : JavaScript
This javascript code is used to show the percentage of how many filter and effects applied.
The onmousemove event occurs when the pointer is moving while it is over an element.
The web application allows you to choose a photo from your computer into browser window , and apply filter and effects on it .
In this tutorial, you get to know how to apply the filter and how to make filter using css and JavaScript.
But firstly you should know about the css3 syntax and JavaScript syntax.
Share Filter Image application works on web browser. Share Filter Image design is a responsive interface. You should also use this interface for your filter android application but firstly know about the How Make Android Apps Using HTML, CSS and JavaScript .
Step 1 : HTML Code
The first step is to write the html code for your interface. Which type of interface you want ? Here is the starting code in index.html file. Here we are loading Share Filter Image web application library and also our styles.css and filter.js files.
<html> <head> <title>Share Filter Image : Powered By ShareCodePoint.com</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" id="subnav"> <div class="container"> <div class="" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav sub-nav-option scroll"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Brightness</a> <ul id="filter-options" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> Brightness <br/> <div align="center"> <span id="brightv" class="per-filter">100 %</span> </div> <input id="brightness" class="filter-setting-slider" onChange="brightnessv(this.value)" type="range" min=0 max=200 value="100"> </div> </div> </li> </ul> </li> </form> </ul> </div> </div> </nav> <div class="container-fluid main-top"> <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" align="center"> <img id="img" class="img img-responsive img-thumbnail" src="imgs/default.svg "/> </div> </div> </div> <div class="container"> <div class="fileUpload btn"> <form id="form1" runat="server"> <span>Choose Image</span> <input id="choose" type="file" class="upload" /> </form> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/filter.js"></script> </body> </html>In above code, you can see the ul li tags. These tags are used for making the filter options like Brightness , Blur , Invert , Contrast , Opacity and Saturate.
Step 2 : CSS Code
CSS Code is used to make the structure design and to control the layout of share filter image web application.
The Important CSS code for your application.
input[type=range]{ -webkit-appearance: none; background:#CCCCCC; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 20px; border: none; background:transparent; border-radius:2px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 40px; width: 40px; border-radius: 50%; background: goldenrod; margin-top: -10px; border:2px solid goldenrod; cursor:pointer; } input[type=range]:hover::-webkit-slider-thumb { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border:2px solid #000; } input[type=range]:focus { outline: none; } .per-filter{ font-size:25px; font-weight:300;} .img{ width: 450px !important; height:450px !important; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 15px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 15px 0px rgba(0, 0, 0, 0.3); border: 5px solid white; border-radius:0px !important; }The input[type="range"] is used to change the style of slider. Class .pre-filter is used to show the % of your filter options. It shows how many effects you can apply for image. See Live Demo
Step 3 : JavaScript
This javascript code is used to show the percentage of how many filter and effects applied.
<script type="text/javascript"> function blurv(value){ document.getElementById("bv").innerHTML=value+' %'; } </script>Blur function is used for the blur filter option. It shows the value in percentage.
The onmousemove event occurs when the pointer is moving while it is over an element.
function filter() {
var f = $("#blur").val(),
d = $("#brightness").val(),
c = $("#contrast").val(),
b = $("#opacity").val(),
e = $("#invert").val(),
a = $("#saturate").val();
$("#img").css("-webkit-filter", " blur(" + f + "px) brightness(" + d + "%) contrast(" + c + "%) opacity(" + b + "%) invert(" + e + "%) saturate(" + a + "%)")
}
$("input[type=range]").change(filter).mousemove(filter);