Archives for Tutorials - Page 2

CSS - Cascading Style Sheets

Preview an image / thumbnail before it is uploaded – Html5 FileReader()

It is very easy to preview an image or thumbnail on client side before uploading on the server in jQuery and HTML 5 FileReader() . Suppose you have an application where user uploads bulk photo and then the users want to upload only some selected photo,  in this case, we as a…
Continue Reading
CSS - Cascading Style Sheets

Add style to console log statements

Searching for errors in programming code is called code debugging. Debugging is not easy. But fortunately, all modern browsers have a built-in debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, you can also set breakpoints (places where code execution can…
Continue Reading
CSS - Cascading Style Sheets

CSS3 background gradient animation in a progress bar like in Windows 7

You can create a responsive, animated progress bars like in Windows 7 using pure CSS3. I haven't used any image in this tutorial. Resize your browser window to see the responsiveness. HTML <div class="bar"> <div class="blue loader"> <h3>;/h3> <span class="inner"> </span> </div> </div> CSS Next, we’ll create the background for…
Continue Reading
JAVASCRIPT

JQuery or JavaScript tricks for mobile devices like – Android, Windows, BlackBerry, Apple, iphone, ipad

JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5(CSS 3 + JavaScript + HTML 5 ) features. Most mobile phones are running some version of WebKit (what Chrome runs on), so you're pretty much guaranteed better…
Continue Reading
CSS - Cascading Style Sheets

Convert Color images to Grayscale, Sepia, Blur & more with CSS Filter

"Is there a simple way to display a color bitmap in gray-scale with just HTML/CSS?" - This was a question for most of web designer / developer. Meanwhile for achieving this effect, they were using JavaScript Library like or two different images.  After the end of Flash for website development,…
Continue Reading