Máscara transparente de Adobe Illustrator

No soy mucho de un artista gráfico, pero trato de aprender a hacer cosas nuevas.

Aprendí a usar Extrude & Bevel para crear un efecto 3D. me gusta el resultado

Pero estoy usando el gráfico resultante en una página web. Lo que me gustaría hacer es poder controlar el color a través de CSS. Estaba pensando en crear algún tipo de máscara 3D transparente (¿superposición?) Que pueda colocar encima de un DIV plano del mismo tamaño y forma. Esto me permitiría cambiar el color DIV y mantener el aspecto 3D.

¿Realizable? Si me puedes decir cómo o indicarme un tutorial, te lo agradecería mucho.

ingrese la descripción de la imagen aquí

De acuerdo... viendo esa imagen de muestra, me quedo preguntando por qué estás usando Illustrator. Esa pestaña es completamente reproducible a través de CSS.
Busque y no encontre donde podria hacer eso. Pero, sí, una solución CSS sería genial.

Respuestas (1)

Probablemente sea más adecuado para StackOverflow.com (que ya puede tener una respuesta).

.pestaña {
    margen: 20px;
    fondo: #601;
    color: #fff;
    bloqueo de pantalla;
    ancho: 200px;
    sombra de texto: 0 1px 1px #000;
    fuente: negrita 20px Verdana, Arial, Helvetica, sans-serif;
    -webkit-border-superior-izquierda-radio: 20px;
    -webkit-border-superior-derecho-radio: 3px;
    -moz-border-arriba-izquierda-radio: 20px;
    -moz-border-top-right-radius: 3px;
    borde-superior-izquierda-radio: 20px;
    borde-superior-derecho-radio: 3px;
    alineación de texto: centro;
    relleno: 10px 20px;
    -webkit-box-shadow: inserción -5px 5px 3px #801, inserción 5px -5px 3px #501;
    -moz-box-shadow: inserción -5px 5px 3px #801, inserción 5px -5px 3px #501;
    box-shadow: inserción -5px 5px 3px #801, inserción 5px -5px 3px #501;}

Lo que crea esto:

pestaña

Se puede ver una demostración aquí

En cuanto a crear una máscara en Illustrator, no entiendo lo que estás imaginando. Illustrator escupe imágenes. Puede cubrir imágenes con divs en HTML o colorear el fondo de la imagen a través de CSS. No tengo claro cómo usaría una "máscara" de Illustrator en una página web.

En cuanto a una "máscara", estaba pensando en algo con las partes claras, oscuras y transparentes/translúcidas adecuadas para imitar el 3D. Pero tu respuesta CSS funciona. Gracias.
Máscara transparente de Adobe Illustrator
RespuestasAquíPolítica de privacidad1y, 0v