Adobe Illustrator transparente Maske

Ich bin kein großer Grafiker, aber ich versuche zu lernen, wie man neue Dinge macht.

Ich habe gelernt, wie man Extrude & Bevel verwendet, um einen 3D-Effekt zu erzeugen. Ich mag das Ergebnis.

Aber ich verwende die resultierende Grafik auf einer Webseite. Was ich gerne tun würde, ist in der Lage zu sein, die Farbe über CSS zu steuern. Ich habe darüber nachgedacht, vielleicht eine Art transparente 3D-Maske (Overlay?) Zu erstellen, die ich auf ein flaches DIV derselben Größe und Form legen kann. Dies würde es mir ermöglichen, die DIV-Farbe zu ändern und den 3D-Look beizubehalten.

Machbar? Wenn Sie mir sagen können, wie, oder mich auf ein Tutorial verweisen können, würde ich es sehr schätzen.

Geben Sie hier die Bildbeschreibung ein

Okay ... Wenn ich mir das Beispielbild ansehe, frage ich mich, warum Sie überhaupt Illustrator verwenden? Diese Registerkarte ist vollständig über CSS reproduzierbar.
Ich habe gesucht und nicht gefunden, wo ich das tun könnte. Aber ja, eine CSS-Lösung wäre großartig.

Antworten (1)

Wahrscheinlich besser geeignet für StackOverflow.com (das vielleicht schon eine Antwort hat).

.tab {
    Rand: 20px;
    Hintergrund: #601;
    Farbe: #fff;
    Bildschirmsperre;
    Breite: 200px;
    Textschatten: 0 1px 1px #000;
    Schriftart: fett 20px Verdana, Arial, Helvetica, serifenlos;
    -Webkit-Rand-Radius oben links: 20px;
    -Webkit-Rand-Radius oben-rechts: 3px;
    -moz-Rand-Radius oben links: 20px;
    -moz-Grenze-Radius oben rechts: 3px;
    Rand-Radius oben links: 20px;
    Randradius oben rechts: 3px;
    Textausrichtung: Mitte;
    Polsterung: 10px 20px;
    -webkit-box-shadow: Einfügung -5px 5px 3px #801, Einfügung 5px -5px 3px #501;
    -moz-box-shadow: Einfügung -5px 5px 3px #801, Einfügung 5px -5px 3px #501;
    Box-Schatten: Einfügung -5px 5px 3px #801, Einfügung 5px -5px 3px #501;}

Was das schafft:

Tab

Eine Demo ist hier zu sehen

Was das Erstellen einer Maske in Illustrator betrifft, verstehe ich nicht, was Sie sich vorstellen. Illustrator spuckt Bilder aus. Sie können Bilder mit divs in HTML überdecken oder den Hintergrund des Bildes per CSS einfärben. Mir ist völlig unklar, wie Sie eine "Maske" von Illustrator auf einer Webseite verwenden würden.

Was eine "Maske" betrifft, dachte ich an etwas mit den richtigen hellen Bits, dunklen Bits und transparenten / durchscheinenden Bits, um das 3D nachzuahmen. Aber Ihre CSS-Antwort funktioniert. Vielen Dank.
Adobe Illustrator transparente Maske
AntwortenHierDatenschutz-Bestimmungen1y, 0v