Creating a nice slide box effect in CSS 3 have never been that easy until now. Using only HTML 5 and CSS 3 you can create some cool effects of a slide in box. This can be either use to create some neat cool effects on your wordpress theme, or in your static HMTL 5 website.

Before you dive in I encourage you to follow this tutorial using a new file (.html) and not to modify directly (copy/paste) the code I will show in your theme footer.

HTML code to create css3 slide boxes

So first let’s create the HTML markup for out boxes. In this example i will use only three boxes. So the HTML code for this will look like this:

CSS code for css3 slide boxes

As you can see our boxes are actually links. now let’s create our css, where all the magic is happening. The css part for this will look something like this:

if you want to use this on your wordpress theme just paste the css code on your bottom of style.css. Make sure to create your images. In my example i have free images: elegant-themes-i-do.png, wedding-tweets-i-do.png and mobile-i-do.png. These images i’ve uploaded them to my images folder inside my theme folder.

Share This
%d bloggers like this: