I'm not much of a graphic artist, but I try to learn how to do new things.

I learned how to use the Extrude & Bevel to create a 3D effect. I like the result.

But I'm using the resulting graphic on a web page. What I would like to do is be able to control the color through CSS. I was thinking maybe create some kind of transparent 3D mask (overlay?) that I can put on top a flat DIV of the same size & shape. This would allow me to change the DIV color and maintain the 3D look.

Doable? If you can tell me how, or point me to a tutorial, I'd much appreciate it.

enter image description here

  • Okay... viewing that sample image I'm left asking why are you using Illustrator at all? That tab is completely reproducible via CSS.
    – Scott
    Nov 13, 2013 at 1:11
  • I searched and didn't find where I could do that. But, yeah, a CSS solution would be great. Nov 13, 2013 at 1:19

1 Answer 1


Probably better suited for StackOverflow.com (which may already have an answer).

.tab { 
    margin: 20px;
    background: #601;
    color: #fff;
    display: block;
    width: 200px;
    text-shadow: 0 1px 1px #000;
    font: bold 20px Verdana, Arial, Helvetica, sans-serif;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-top-left-radius: 20px;
    -moz-border-top-right-radius: 3px;
    border-top-left-radius: 20px;
    border-top-right-radius: 3px;
    text-align: center;
    padding: 10px 20px;
    -webkit-box-shadow: inset -5px 5px 3px #801,inset 5px -5px 3px #501;
    -moz-box-shadow: inset -5px 5px 3px #801,inset 5px -5px 3px #501;
    box-shadow: inset -5px 5px 3px #801,inset 5px -5px 3px #501;}

Which creates this:


A demo can be seen here

As for creating a mask in illustrator, I don't understand what you are envisioning. Illustrator spits out images. You can cover images with divs in HTML or color the background of the image via CSS. I'm completely unclear how you would use a "mask" from Illustrator on a web page.

  • As for a "mask" I was thinking something with the right light bits, dark bits, and transparent/translucent bits to mimic the 3D. But your CSS answer works. Thanks. Nov 13, 2013 at 3:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.