CSS3 Tutorial: Sleek Card Pockets using CSS Only


Warning: Invalid argument supplied for foreach() in /home/creative/public_html/wp-content/plugins/seo-image/seo-friendly-images.class.php on line 851

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.

One of the great things CSS3 has brought to web developers is the ability to create transitioning effects on elements. The whole benefit of this is to turn ten to twenty lines of Javascript code into five or so lines of CSS. Combine this property with other new CSS3 properties and we can create visually appealing and realistic looking card pockets on a web page.

Before you go ahead with this post you might want to check out some other tutorials and articles that we have here at CreativeFan:-

In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.

Getting Started

The first step in building our pockets we need to start off with some basic HTML markup.

<div id=”pockets”>
<div>
<a href=”#”>
<h2>Follow me</h2>
</a>
</div>
<div>
<a href=”#”>
<h2>Contact me</h2>
</a>
</div>
</div>

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.

Adding Styles

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.

.pocket-container {
width: 460px;
height: 58px;
float:left;
}
.card {
width: 400px;
height: 22px;
float: left;
overflow: hidden;
margin-left: 28px;
margin-top: 35px;
}

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.

.card-one {
background-color: #28b8d7;
border-top: 1px solid #83e2f6;
border-left: 1px solid #3cc0dc;
border-right: 1px solid #3cc0dc;
}
.card-two {
background-color: #e1e1e1;
border-top: 1px solid #fff;
border-left: 1px solid #eff4f6;
border-right: 1px solid #eff4f6;
}

*Colour tip: You will need your base colour, two highlight colours and a single darker colour to add definition to your card.

More Definition

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.

.pocket-container {
width: 460px;
height: 58px;
float:left;
border-bottom: 1px solid #C5C5C8;
}
.card {
width: 400px;
height: 22px;
float: left;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
-webkit-box-shadow: #8c8c8c 0 -2px 3px;
-moz-box-shadow: #8c8c8c 0 -2px 3px;
overflow: hidden;
margin-left: 28px;
margin-top: 35px;
}

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.

.card h2 {
font-size: 16px;
font-family: Arial, sans-serif;
font-weight: bold;
margin-top: 18px;
padding-left: 10px;
}
.card-one h2 {
color: #177a90;
text-shadow: 0 1px #83e2f6;
}
.card-two h2 {
color: #8a8a8a;
text-shadow: 0 1px #fff;
}

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.
Adding Effects
Another great addition to CSS3s arsenal is the ability to transform elements on both the X and Y axis by using the transform property.

.pocket-container a:hover {
height: 42px;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
text-decoration: none;
}

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.

Conclusion

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.

6 Responses to “CSS3 Tutorial: Sleek Card Pockets using CSS Only”
  1. DeisgnMango August 26, 2010
  2. Alphonse August 26, 2010
  3. Mike J August 27, 2010
  4. Klimatici August 31, 2010
  5. Jelmer Borst May 3, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *