This tutorial will show you how to create an interactive map of the world you can use to display travel photos. In the process, you’ll be introduced to Raphael.js. It is a small JavaScript library that makes it easy to work with vector graphics. Instead of using HTML5 Canvas for interactive animations, it uses SVG (for modern browsers) and VML (for IE8 and earlier). This means that Raphael.js looks great on modern browsers and mobile devices, but degrades gracefully and is functional on legacy browsers. Because it is written in JavaScript, it’s very easy to integrate with other elements in the DOM. This makes it a great choice for all sorts of interactive animations and a useful tool to add to your skill set.

Note: this is a guest post by Chris Youderian.

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I’ve discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer!

View Demo Responsive Menu

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

View Demo Responsive Column/Grid

Long ago I wrote a tutorial on how to make decorative image galleries using an extra <span> tag. It requires jQuery to append the span tag which isn’t quite user friendly. Today I’m going to share a better method without using Javascript. The same result can be achieved by using :before or :after pseudo element. The :before element is one of the commonly under used elements, but it is quite useful for adding additional elements or content. Learn it now and start using it.

View DemoDecorative Gallery

< 1 2 3 4 5 >»