Question

I need to create an horizontal navigation bar with a shape like the one used in “team” and “cooperation” divs in this link. Does exist a library for that? LINK

Answer 1

This website uses background images to achieve the appearance, more specifically it uses a technique known as spriting (or CSS sprites).

The technique is essentially just the use of one image which contains multiple images, with each image used seperately. The single image is used by way of the background-position rule that allows you to essentially pick and choose which part of the large image you want to use. The primary aim of the technique is to reduce the quantity of HTTP requests in order to speed up loading of the page.

Please do refer to http://css-tricks.com/css-sprites/ for a better explanation.

Here is the sprite they use on the website you linked to:

http://hitmo-studio.com/images/sprites-set-1.png

You can see the four boxes across the top of the sprite image. Here’s an example of how the second box (team) uses the correct part of the sprite image

.list-c li.team a {
background-position: -246px 0;
}