• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 601
  • Last Modified:

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

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.

1 Solution
Kyle HamiltonData ScientistCommented:
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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now