It used to be that shifting an image from grayscale to colored and vice-versa as you hover over it required 2 copies of the said image — one in grayscale and the other in color. But thanks to Darcy Clarke for the JavaScript & HTML 5 grayscale in this tutorial, this feat is easier and [...]
If you wish to design your WordPress blog’s appearance by yourself, you can rely on CSS. Here are 6 useful CSS color tools that could help get you started. Color Scheme Designer Color Scheme Designer provides colors in color wheel form. It has different color variations in percentage ratio like mono, tetrad, triad, analogic, accented [...]
This cool form effect has the usual attributes we enjoy — rounded corners, stroke edges and other CSS-generated qualities. But thanks to web developer Rakesh Menon, this one’s got another thing up its sleeve: it’s got a glowing neon border that pulsates! Here’s the demo for you to really appreciate it. Click here for the [...]
Here’s a list of 10 innovative plugins to create breathtaking slideshows for your image gallery or portfolio. How to Create a Slideshow Plugin with jQuery – This slideshow makes use of a jQuery plugin called Powerslide. Elastic Image Slideshow with Thumbnail Preview – Here’s a really cool slideshow that automatically adjusts according to the size [...]
Recreate Apple’s Retina display with this awesome tutorial! Thanks to web developer Martin Angelov, he designed a fully functional Apple-like Retina effect using the jQuery library. Below are the steps on how to achieve this effect. 1. XHTML The markup is pretty much straight forward and has few divs and images. <div id=”main”> <div id=”iphone”> [...]
Add fun and functionality to your website by adding Windows-style sticky notes! Thanks to the combined powers of HTML5, CSS3, and a bit of jQuery in this tutorial by Teylor Feliz, we can do just that. Let’s being with the HTML markup: < !DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <title>Posticks</title> <link rel=”stylesheet” rev=”stylesheet” [...]
Ivan Vanderbyl ‘s cool CSS3 tutorial actually shows us a numeric representation (i.e. percentage) of how long a process is going to take in modern browsers. Below is a screenshot of the resulting product, which you can click on to view the demo. Now let’s start with the HTML. HTML Markup <!DOCTYPE html> <html> <head> [...]
No music, no life. And as far as web design is concerned, this awesome CSS3 music player would be perfect for adding a new dimension to your blog or website. Indonesian artist Hidayat Sagita made this tutorial in which the goal is to use CSS3 instead of images, so CSS3 properties replace the following Photoshop [...]
It’s been another very productive year for web designers and developers this past 2011, which was brimming with jQuery plugins. And according to my observation, many of them are content sliders. So to start off this year, we’ll focus on another particular set of plugins that have made 2011 a bit easier for web developers. [...]
The use of speech bubbles in web design has become so popular that it has become an integral feature in commenting. This tutorial by Nicolas Gallagher teaches us how to create our own. Many tutorials out there rely on HTML and JavaScript which, aside from being tedious to work on, don’t work well on IE5. [...]
0
464
