CSS3 can allow for all sorts of awesome new effects and usability improvements for the web. The natural ability to handle gradients, rounded corners, and shadows can make elements much more appealing and help manage the viewer’s eye and website hierarchy.
Before you go ahead with this post you might want to check out some other tutorials and articles that we have here at CreativeFan:-
- 10 Awesome CSS3 Techniques You’ll Want To Start Using
- 11 Excellent Photoshop Tutorials to Boost Creativity
- 12 Essential and Quality Photoshop Tutorials for Everyone
In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.
The first step in building our pockets we need to start off with some basic HTML markup.
Note that we are using separate DIV containers to house our pockets. Alternatively you could probably use an Unordered List but that requires a few more lines of CSS and we are keeping this simple. Each of our cards are packaged up neatly in our pocketcontainer class which we can re-use on the page each time we want to create a new card pocket if we need to.
First off with our basic styling we want to put together our pocket-container and our card class, how big they will be, and where they will be positioned.
Now we can start to add some colour. First thing we need to do is decide on our card colours. Choose your base colours first then you can use tools like Photoshopʼs color palette or Kuler™ to compose some color shades.
*Colour tip: You will need your base colour, two highlight colours and a single darker colour to add definition to your card.
Now what we need to do now is add more definition so it looks like the card is in a pocket. For this we are going to add a few more properties to our card class and pocket-container class. We will take advantage of one of CSS3s greatest features, the box-shadow property. This will give us the opportunity to add more definition with pure CSS instead of cluttering up our code with image classes.
The bottom border on the pocket-container class should be a highlight shade of your background colour so that it adds definition and gives the illusion of a pocket. We also added the CSS3 border-radius property to give our cards more of a realistic look.
Setting our Typography
Since we are making these attractive card pockets we need attractive typography to go along with them. We start off by using the Arial font with one of our darker shade colors from our card.
We use the CSS3 text-shadow property and our card highlight shade to create a beveled effect on our cards. Also, we need to use separate declarations for each cardʼs text since they both use different colours.
Another great addition to CSS3s arsenal is the ability to transform elements on both the X and Y axis by using the transform property.
On hover of our anchor which has our card class contained inside, the property moves our card element 20 pixels on the Y axis. The reason we are using a negative integer is we want our element to move up the screen and not down. At the same time this is happening our basic height property resizes our element to compensate for the transition.
Although not very practical in terms of compatibility (as of currently you could probably only get away with viewing this example in Firefox (3.6+), Safari (4+) and Chrome), this is a great example of how CSS3 can bring a siteʼs UI to life without using too many resources.