Integrate an interactive map into your website with jVectorMap. This is a jQuery plugin which shows vector maps on HTML pages and applies SVG in all contemporary modern browsers ranging from ancient IE 6 to 8, Chrome, Opera, IE9, Safari, Firefox. All you have to do is connect Javascript and CSS files of plugin and [...]
Here’s a very cool CSS trick I found that will let you have the same buttons as those in YouTube’s footer! But first, lots of thanks to the following coders below: Dennis Sa - for the jsbin of the matte buttons http://jsbin.com/efesot/6 Trevor Gerzen – for applying the transitions, and Chris Coyier - for coming [...]
Web designer Mike Merritt designed a jQuery plugin that will give more definition on your web site by adding tooltips to any element on a page. You can check out his work in this DEMO. Download the development version and production version zip files. HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″> <title>tinyTips 1.0</title> [...]
Here’s a very fascinating take on creating a CSS grid by Chris Coyier. If you’re site is text-heavy then this kind of layout might suit it perfectly. Check out the demo to see how it works. Horizontal Grid Vertical Grid The concept is inspired by one Richard Rutter with his article Compose to a [...]
Supplement your website with seamless background patterns and transform it into a work of art! I’ve collected 30 different types of equally beautiful patterns for you to try, and each set includes formats such as .jpg, .eps, .png, .ai and .pat. Click on the images below to view and grab them for free. Vector Patterns [...]
The commenting system just became more fun for users! Created by eligeske, this animated jQuery star commenting system is a great way to rate your posts. Add this to your website and see your visitor activity increase. Download the ZIP FILE. HTML (star_rating.html) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> [...]
A well-designed navigation bar leaves a good impression on first-time visitors. Here’s a list of navigation menu designs that would make you go “why didn’t I think of that?” Small Stone Recordings – Here’s a perfect example of incorporating your site’s theme with the design. This immediately gives your site’s visitors an idea of what [...]
Script-tutorials.com gives us this cool UL-LI-based multilevel menu, with transition and animation effect using CSS3. You can create this menu in 2 easy steps. Click on the above image to view the demo. You may also download the full pack HERE. Step 1: HTML Index.html <!DOCTYPE html> <html lang=”en” > <head> <meta charset=”utf-8″ /> <title>CSS3 [...]
Sometimes reading a table’s long and numerous columns can be quite a very cumbersome and tedious task. You want your readers to immediately see the whole picture once they glance at your table’s contents. This is where Design Chemical’s Data Heat Map can help. When you’re dealing with hierarchical and/or numeric data, or data with [...]
Create a Polaroid effect with your images using CSS3! Mark of Zurb.com teaches us how to do it in this uber-cool tutorial. Click on the above image to view the demo. This is done with only CSS and no Javascript, with no actual text used on the images. It works on a grid of linked [...]
0
464
