Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th March 2014

Create an eCommerce web element with CSS3

Using CSS3, create a simple and appealing shopping cart web element that would be useful on an eCommerce website

Create an eCommerce web element with CSS3

Selling online provides the opportunity for many businesses to reach out to huge, untapped markets. When your store can be open 24 hours a day and you can reach a global market without the costs of mailings and call centres, it can provide a huge boost to your business. But there are plenty of things to consider when designing an eCommerce site. It’s not as simple as throwing up some shopping cart software and plopping products into a database. With the power of CSS3, it is possible to create some very cool and effective web elements that can just slot into place on any eCommerce website.

The products that you or your client are selling need to stand out and the all-important buttons such as ‘Add to Cart’ need to be prominent and stylish. It is essential to think about the presentation of customer reviews, the price and product description. All of these things need to be easy to accomplish, and with CSS3, those things just got a whole lot easier. So in this tutorial, we will look at how we can create a fictional product and turn it into an appealing and interactive web element using the power of CSS3 – let’s get started!

Set everything up

First thing we need to do is create a new HTML5 document with a link to your stylesheet within the head. Then within the <body> tag, we can create two <div>s with a class name of ‘container’ and then ‘block’, making sure we comment the closing tags for better readability.

001 <body>
002 
003    <div class=”container”>
004 
005    <div class=”block”>
006 
007    </div><!-- END block -->008 009 </div><!-- END container -->010 011    </body>

Product image and buttons

Next we’re going to add in an image and some buttons for our product. Firstly we create a <div> with a class name of ‘product’. We then pull in our product image and then add in two buttons. One of the buttons is a ‘Add to Cart’ button with a class name of ‘buy’ and the other is a ‘View Item’ button with a class name of ‘preview’.

001 <div class=”product”>
002  <img src=”images/placeholder.png”>
003  <div class=”buttons”>
004  <a class=”buy” href=”#”>Add to cart</a>    005  <a class=”preview” href=”#”>View item</a>
006 </div>
007 
008    </div><!-- END product -->    
009   

Product information

Now let’s add in some information about our product. Firstly create a <div> with a class name of ‘info’ and then add in the product title, wrapped within a <h4> header element. We then add in a little text describing our product and then finish off with the price and a ‘Buy now’ button.

Star ratings

In the final bit of HTML, we’re going to add in a star rating section that will be positioned at the very bottom of our product block. We just simply add a <div> with a class name of ‘details’ and create an unordered list with a class called “rating”. In a later step, we’re going to use a CSS sprite to show a different-coloured star.

001 <div class=”details”>
002     <span class=”time”>12 hours ago</span>
003     <ul class=”rating”>
004     <li class=”rated”></li>
005     <li class=”rated”></li>
006     <li class=”rated”></li>
007     <li class=”rated”></li>
008     <li></li>
009     <li></li>
010   </ul>
011 </div><!-- END details -->
012   

The CSS

Open up a CSS file and start adding some styles. First add in some default styles within the body selector. We’ve set our font to Arial and given it a light grey colour, and we’ll use a patterned background for the page. Finish off by giving our ‘container’ <div> some width and margin.

001 body {
002     font-family: Arial, sans-serif;
003     color: #aaaeb2;
004     background: #f1f1f1 url(“../images/
bg.png”);
005 }
006 
007 .container {
008 
009     width: 900px;
010     margin: 0 auto;
011 }

Style the block

Things are not looking that great, so let’s start shaping it all up. By targeting the ‘block’ class, we can give the body of our product information some shape and some nice subtle effects by using the ‘border-radius’ and ‘box-shadow’ properties. We do want to make sure that the position is set to relative, as this will allow us to absolutely position other elements within – such as the buttons.

001 .block {
002     margin: 30px 0;
003     display: block;
004     position: relative;
005        width: 300px;
006        border-radius: 5px;
007        background: #fff;
008        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
009        }

Product image

Now let’s set some styles for our product image. Ensure the image is set to block and position is set to relative. Then we can set the width to 100% so it drops into the main product block. After that, we finish off by giving the top corners the same radius as the block.

001 .product {
002        display: block;
003        position: relative;
004 }
005 
006    .product img {
007        width: 100%;
008        border-top-left-radius: 5px;
009        border-top-right-radius: 5px;
010 }

Info and details

Next we will give our product text and other information some shape. Firstly let’s target the ‘info’ class, which holds the product title and description. We then separate the ‘details’ section – which is the star ratings – by adding a top border and then finish this off by giving it some padding all around.

001 .info {
002        display: block;
003        position: relative;
004        padding: 20px;
005    }
006    
007    .details {
008        border-top: 1px solid #e5e5e5;    009     padding: 18px 20px;
010 }

The large buttons

The buttons we are talking about here are the ‘Add to Cart’ and ‘View Item’ buttons that we will position at the centre of the product image. We then hide them until the user mouses over the product image. We won’t see much in the way of buttons yet, but we’ll tackle that soon.

Button styles

This is where we will start giving the buttons some basic styling. Because we set the ‘.product’ class to relative, we can easily use absolute positioning to give ourselves complete control of exactly where these buttons should be. We can then give them some nice, rounded corners and hide them by using ‘opacity: 0’.

001 .buttons a {
002        display: block;
003        position: absolute;
004        left: 50px;
005        width: 115px;
006     border-radius: 2px;
007     padding: 18px 10px 15px 65px;    008     font-family: Helvetica, sans-serif;
009        font-size: 14px;
010        font-weight: bold;
011     text-transform: uppercase;
012        color: #fff;
013        text-decoration: none;
014     opacity: 0;
015        text-align: center;
016    }
017    

Icon styling

Here we set some styling for the icons that will be added in the next step to both of the large buttons. Make sure the content is empty and then set a height and width. Then, divide the area where the icon will be by adding a 1px border to the right. Then add a subtle drop shadow.

001 .buttons a::after                                                                                                            
002{
003        content: “”;
004        display: block;
005        position: absolute;
006        height: 48px;
007        width: 50px;
008        border-right: 1px solid rgba(0, 0, 0, 
.25);
009        box-shadow: 1px 0 0 rgba(255, 255, 255,      
.17);
010        top: 0;
011        left: 0;
012     z-index: 1;
013 }

‘Add to Cart’ button

In this step, we’re going to just focus on the ‘Add to Cart’ button. After positioning it 20% from the top, we can give it a dark background colour. Then we can give it a subtle transition and lower its opacity for when we hover over it. Lastly, we will add in our icon that will be positioned to the left.

001 a.buy {
002        top: 20%;
003        background: #414141;
004        background: rgba(0, 0, 0, .85);
005        transition: background .2s ease-in;
006    }
007    .buy:hover {
008        background: #515151;
009        background: rgba(45, 45, 45, .85);
010 }
011    
012    .buy::after {
013        background: url(“../images/cart.png”);
014        background-repeat: no-repeat;
015        background-position: 16px 18px;
016 }

‘View Item’ button

Next up will be to add the styles to our ‘View Item’ button that will sit underneath the ‘Add to Cart’ button. We are going to give this a blue colour and also give it a linear gradient. Then, let’s give it a subtle drop shadow and finish up by giving it a two-second transition on hover.

001 a.preview {
002        bottom: 20%;
003        text-shadow: 0 -1px 1px rgba(0, 0, 0,   .4);
004    
005        background: #286398;
006        background: -webkit-linear-
gradient(bottom, #1d4970, #639ed3);
007        background: -moz-linear-
gradient(bottom, #286398, #639ed3);
008        background-position: 0 -15px;
009        background-size: 400px 80px;    
010     background-repeat: no-repeat;
011        box-shadow: 0 2px 0 #165181;
012        transition: background-position .2s 
ease-in;
013    }
014 .preview:hover, .buy_now:hover {
015        background-position: 0 0;
016    }

Finish the buttons

In this step, we’ll add a simple active state on the ‘View Item’ button. All we are going to do is move the button down by two pixels using the ‘translateY’ value of the transform property when we click the button. In the next rule, we add in the icon like we did previously.

001 .preview:active, .buy_now:active {
002        transform: translateY(2px);
003        box-shadow: none;
004    }
005    
006    .preview::after {
007        background: url(“../images/eye-icon.
png”);
008        background-repeat: no-repeat;
009        background-position: 16px 17px;
010 }

Information arrow

Let’s create the small arrow that we see pointing up to the product image just above the product’s title. This is going to be very simple. All we need to do is create a white 25 x 25px square, position it absolutely and rotate it by 45 degrees. Then we move it down using ‘top -12px’ so all we can see is one of the corners.

001 .info::after                                                                                                                      
 {
002        display: block;
003        position: absolute;
004        top: -12px;
005        left: 23px;
006        content: “”;
007        height: 25px;
008        background: #fff;
009     transform: rotate(45deg);
010     transform: rotate(45deg);
011    

Product title

In this simple step, we will apply some styles to the product title to give our product description some shape. Start by setting the position to relative and giving it some padding and margin. Then set the font family, font weight and size. Finish up by pulling all the letters in slightly, using a negative value to the letter spacing.

Product description

Everything is taking shape quite nicely now and the next step is to think about the product description. First, let’s add a two-pixel blue line just underneath the title. The good thing about doing lines like this is the ease at which you can change the height. Then we give the product description some styling.

001 .info h4::after {
002        display: block;
003        position: absolute;
004        bottom: 0px;
005        content: “”;
006        width: 40px;
007        height: 2px;             008     background: #3b86c4;
009    }
010    
011 .info .description {
012        display: block;
013        padding-bottom: 20px;
014        font-family: Arial, sans-serif;    015     font-size: 14px;
016        font-weight: 600;
017        color: #5f5f5f;
018 }
019    

The price

Having now got a lot of the product description done, there are only two things left to do, one of which is simple: give the product price a little bit of much-needed styling. Ensure that you have a play around with this; sometimes a bigger font would look better, or perhaps even a different colour would work well.

‘Buy Now’ button

The ‘Buy Now’ button is the last step to finish off the product description section. We’re going to float this right and use relative positioning in order to position it right where we want it. We’re then going to continue to give it the same styling as our ‘View Item’ button – finishing up with a nice transition and drop shadow.

001 .buy_now {
002        float: right;
003        position: relative;
004        top: -5px;
005        display: block;
006        padding: 10px 10px;
007        border-radius: 3px;
008 
009     font-family: “Helvetica Neue”, 
Helvetica, Arial, sans-serif;
010        color: #fff;
011        font-weight: bold;
012        text-decoration: none;
013        font-size: 15px;
014        text-shadow: 0 -1px 1px rgba(0, 0, 0, 
.4);
015    
016     background: #286398;
017     background: -webkit-linear-
gradient(bottom, #1d4970, #639ed3);
018        background: -moz-linear-
gradient(bottom, #286398, #639ed3);
019        background-position: 0 -15px;
020        background-size: 400px 80px;
021        background-repeat: no-repeat;
022         transition: background-position .2s 
ease-in;
023    
024        box-shadow: 0 2px 0 #165181;
025    }

The rating section

This is the last bit of the tutorial where we deal with the star rating section. We position the unordered list over to the right and zero out any default margin or padding. Once we do this, the block will become shorter and our bullet points will be overflowing. Let’s sort that out next.

001 .rating {
002        position: relative;
003        top: 2px;
004        float: right;
005     margin: 0;
006        padding: 0;
007 }

Seeing stars

On this final CSS rule, we are going to add in our stars. We have included a PNG file called ‘stars.png’ on the resource disc that you can use. We’re going to use this as a CSS sprite and first position the green stars that have the class name of “.rated” added to the <li> item.

001 .rating li {
002        float: left;
003     display: block;
004     height: 16px;
005        width: 16px;
006        margin-left: 5px;
007     background: url(“../images/stars.png”) 
no-repeat 0 0;
008    }
009 
010 .rating li.rated {
011        background-position: 0px -16px;
012    }
013    

Final thoughts

eCommerce is forever growing on the web, and the need to design cool and functional web elements is becoming more and more achievable when using CSS3. So, experiment with what you’ve learned throughout this tutorial and see what you can produce!

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Pepe

      where is the demo?