Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
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 '13 at 1:11
    
I searched and didn't find where I could do that. But, yeah, a CSS solution would be great. –  Tom Collins Nov 13 '13 at 1:19

1 Answer 1

up vote 3 down vote accepted

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:

tab

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.

share|improve this answer
    
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. –  Tom Collins Nov 13 '13 at 3:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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