Best way to show color combinations of shirts and logos with CSS?

Posted on 2012-09-20
Last Modified: 2012-09-21
I need to show a lot of shirts with varying combinations of colors.  

There are 10 colors of the shirts themselves and 5 logo colors.  People ordering the shirts can choose any combination of logo color and shirt color.

I'd like to show the shirt and logo in the colors that they choose on the order page.  I am using WordPress and WP E-commerce.

How should I code this so as to not have to create/photograph 50 different color combinations for each type of shirt?

I also don't want it to look cheesy.  I'd rather photograph/photoshop all of those images than have it looking amateurish.

Question by:JimHubbard
    1 Comment
    LVL 25

    Accepted Solution

    One trick I've used before in a similar situation is to create the T-shirt graphic as an inverse transparency. You make the background opaque, and the t-shirt transparent. But not completely transparent. You leave semi-transparent areas to simulate shadows. You can then change the background-color with CSS for each t-shirt color. If you want to get really fancy, apply a background gradient.

    Stack these items on top of each other with absolute positioning. You can nest them or not, depends how you want to write the css

    <div class='bg-color'> <!-- apply a background color or gradient -->
       <div class='t-shirt'>  <!-- apply semi-transparent t-shirt as background-image -->
         <div class='logo'>   <!-- apply the logo.png -->

    Open in new window


    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
    The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: : Click on Too…

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now