CSS3 Dotted World Map


Posted by: Jayhan Sim

CSS3 Dotted World Map

With the introduction of CSS3 in recent years and begin to widely supported by modern browsers in the market, a lot of simple effects can be done via CSS without using any images at all, for example: rounded borders, multiple drop shadows and even round shapes. Many adventurous designers start to experiment with CSS3 to see what’s the possibilities. And here, I’m going to show you a dotted world map that created by using CSS3 with no image.

To make the dotted map in CSS, first I used a dingbat font call “Geobats” to help me illustrate out the map, then I use a dot pattern to create the map into dotted style. Then I only start to code the map in Dreamweaver, the editor I frequently used. In HTML, the dots are formed by using List Item, and then by using multiple box shadow properties to create the map.

Click to view the demo

Well, there are total of 63 List-Items from left to right and the box shadows are from top to bottom. I know it’s crazy and not a practical job but I’m enjoying doing it. When finish, the CSS file is at 34KB huge, majorly caused by the CSS3 vendor prefixes (since a same properties need to be written three times). Plus, the codes are too messy to maintain as well. As solution, I picked up CSS LESS to make my CSS code more maintainable.

By following the tutorial at Smashing Magazine, I started to convert the codes into LESS and indeed the code become smarter and smaller too, from 34KB down to 18KB, almost 50% reduction. But only the fallback is that I need to use Less.js to execute the LESS code which added up the file size in total.

CSS3 Dotted World Map

I’m fine with it since the code is more maintainable now and I learn something new! Feel free to view the demo and check out the source code as well. Best supported with latest Firefox, Chrome, Safari and Opera. I think it should work in IE9 too although I didn’t test on it.

I believe in the future, many simple graphical elements will be constructed by using CSS instead of using image, like what we saw in BeerCamp 2010 website, which gives me a good amount of inspiration and motivation.

Similar Posts: