Articles by ‘Rochester Oliveira’

How to Add an Awesome Parallax Banner for Your WordPress Site

The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have 2 overlapped items moving in different speed ratios, to create an illusion of depth.

Parallax effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique.

The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width.

Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme.

How to Add an Awesome Parallax Banner for Your WordPress Site
Photo credits joeymc86

Read More »

Code an Awesome Registration Form with the Exotico UI Set

Today we’ll learn a few CSS tricks that you can use to code your UI elements and keep them as awesome as they were in the psds.

I know, things are much easier when you have a good design, so we’ll use Exotico UI this time. You can buy it for $19, or if you are a Vandelay Premier, you can just download it as a member. Also, we have a free version so you can see how awesome that UI Kit is.

We’ll use inputs, progress bars, and buttons this time. If you want to see any other element coded, you can let us know via comments.

That’ said, let’s start the fun part.

Demo and Download!

This is the final result we’ll get. You can download demo files or just check the online demo and see how it works!

Code an Awesome Registration Form with the Exotico UI Set

Read More »

How to Code an Awesome Categories Menu for Your WordPress Site

Sometimes it’s good to ditch the default functions for components and create our own stuff. WordPress has great features for category listing but when it comes to customization we need to dig a little deeper on its functions.

Today we’ll see how to do an awesome categories menu, based on Pawel Kadysz’s awesome menu design.

We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.

So, are you ready to rock?

The Final Look

How to Code an Awesome Categories Menu for Your WordPress Site

Read More »

How to Turn Any Site Into a Responsive Site

I remember the time when our biggest worry was about making stuff work in IE6. And sometimes I think that it was far easier then. Now we have not only to worry about IE crazy stuff (though now it’s much better) but also with a lot of new browsers /OS combinations and also a lot of screen sizes.

We can’t deny the power of mobile design. Actually, research shows that in a few years mobile will overtake desktop browsing. But also, you can’t live in the future and need results now. Like, right now.

Here we’ll see a few ways to take your current site and turn it into a mobile friendly one, with little effort. We’ll see CSS basics, HTML optimization, WordPress and jQuery plugins and other cool stuff you should be aware of.

So, let’s rock!

What is this responsive thing, and why should I care?

Responsive Web Design

Read More »