Category Archives for: Webdesign

In the following quick tip I’ll explain something about using CSS3 transitions for navigation and hovering links.

Some weeks ago, I wanted to add a slider to my wordpress theme. At first, the slider was reading data from custom meta boxes at posts from the wordpress cms, and was linked to posts, but this had reduced flexibility since it was not possible to link a slider to any post, page or item. The solution? Use custom posts or custom content that is used for the slider only. This tutorial describes how to set up custom post types yourself, and to add a jquery slider that uses these custom post types, both in a wordpress environment. It is assumed that you have basic understanding of wordpress and understand html and css well.

Welcome to m-sign.nl! In this tutorial we’ll discover how to add social media icons into your blog or website by using css. Usually these are added so you allow visitors they can follow you on facebook, twitter and even allow them to influence you. We’ll rebuild the media-icons and make them able to pop-up from the navigation bar when hovering them, such as they are displayed in the header of m-sign.nl.  At last we use the css3 transition attribute for a more smooth animation when hovering the icons.

What is a sprite? A CSS-Sprite is a single image which containt multiple images and is used and placed using css on such a manner that you use each image in it. Ok, this sounds a little bit vague (a more detailed description can be found on: http://www.alistapart.com/articles/sprites/), but a css sprite helps to limit your http-requests. In other words, it is used for optimizing your website loading times. It reduces your loading times. This is especially important when having a very big site with many visitors. However, it is also interesting to learn this technique for own purposes.