Erstellen eines Verlaufsnetzes in CSS/Jquery

Question

Ich bin nicht sicher, ob das möglich ist oder nicht, aber kann ich CSS/Jquery-Techniken verwenden, um ein Verlaufsgitter zu erstellen? Ähnliches

Ich möchte dieses Netz zufällig erzeugen und dann möglicherweise animieren, also versuche ich, Bilder zu vermeiden. Ich bin mir nicht sicher, ob so etwas überhaupt möglich wäre.

Ich dachte, vielleicht mehrere Schichten einzelner Farbverläufe zu erstellen und dann alle zusammen in eine feste Position zu bringen und ihre Deckkrafteinstellungen zu ändern?

Answer 1

Derzeit

Ich experimentierte vor einigen Jahren mit etwas in dieser Richtung, mit SVG, dem HTML5-Canvas-Tag und neueren CSS3-Farbverläufen. Ich glaube nicht, dass es einen natürlichen Weg gibt, über einfache lineare oder radiale Gradienten zu gehen.

Die Frage ist, ob ein Mesh-Gradient nur mit einfachen linearen und radialen Gradienten simuliert werden kann (welche die einzigen verfügbaren Werkzeuge sind).

Leider, wenn Sie mehrere Farbverläufe mit Opazität oder RGBA kombinieren, neigen die Farben der verschiedenen Farbverläufe dazu, auf eine Weise zu kombinieren, die nicht sinnvoll ist, was zu ausgewaschenen Farben führt. Um dies zu vermeiden, müssten Sie es im Browser als einen einzelnen komplexen Farbverlauf darstellen können.

Es gibt auch signifikante Einschränkungen für die Formen, die die Gradienten haben können - lineare Gradienten in einem beliebigen Winkel und elliptische Gradienten mit radialer Symmetrie. Keine erlaubt freie Form, unregelmäßige Formen.Die 2D-Transformationen, die auf das resultierende Bild angewendet werden können, sind ebenfalls ziemlich regelmäßig (Skalierung, Verzerrung usw.).

In Zukunft

Die vielversprechendste Option I für die nahe Zukunft bewusst bin, ist die mögliche Unterstützung für Mesh-Gradienten in SVG 2.0 (und vielleicht auch Diffusionskurven). Wenn dies der Fall ist und schließlich von Browsern unterstützt wird, sollte dies die Optionen erheblich erweitern. Und das HTML5-Canvas-Tag und CSS3 könnten bald folgen.

Und wie @vals im Kommentar unten hingewiesen, sollte WebGL einige sehr vielversprechende Optionen (für HTML5-Canvas-Tags mit einem 3D-Kontext) bieten.

Related Links

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html

Answer 2

Ich habe ein einfaches Layout gemacht, um dies zu demonstrieren.

Zuerst werde ich 4 Divs setzen, die erste, um die Teilergebnisse zu zeigen, und die letzte, um das Endergebnis zu sehen. Das Markup ist einfach:

<div class="box mesh1"></div> 
<div class="box mesh2"></div> 
<div class="box mesh3"></div> 
<div class="box mesh"></div> 

hier Box ist nur für Dimensionen, mesh1 bis 3 die Teilergebnisse halten, in Mesh wir es alle zusammen.

Die CSS ist:

.box { 
    width: 400px; 
    height: 150px; 
    position: relative; 
    display: inline-block; 
} 

.mesh1, .mesh { 
background: 
    -webkit-linear-gradient(5deg, rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5)) 
} 

.mesh:after, .mesh:before { 
    content: ""; 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
    top: 0px; 
    right: 0px; 
} 
.mesh2, .mesh:after { 
background: -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 100%);} 

.mesh3, .mesh:before { 
background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);} 

ich in der mesh1 Klasse gebe einen Hintergrund linear, inclinated 5 Grad und Farben in rgba Format Angabe für Transparenz zu ermöglichen.

Dann, um mehr Farbverläufe überlagern zu können, spezifiziere ich Pseudoelemente wie vorher und nachher, die dieselben Layouteigenschaften teilen.

Zu dem After-Element gebe ich einen kreisförmigen Gradienten, geteilt mit dem Mesh2 Zu dem vor Element gebe ich einen elliptischen Gradienten, außerhalb der Mitte. Alle von ihnen können rgba sein.

Am Ende finden Sie in dem Netz das Ergebnis von überlappenden alles div

(Ich habe überall die Webkit-Notation verwendet, um es kurz zu machen)

Ich würde nicht sagen, dass es viel künstlerisch ist, aber ich lasse diesen Teil zu Ihnen :-)

fiddle here

Answer 3

In meiner ersten Antwort, ich interpretierte dies in dem "künstlerischen" Weg zu gehen als in der "mathematischen" Art und Weise. Die Antwort von Matt Coughlin lässt mich über eine mathematischere Antwort nachdenken, in der wir den "Maschen" Teil der Anforderung strenger machen würden.

Das heißt, wir haben eine Matrix von Farben, und wir wollen dies in einem Raster zeigen. Wenn das Gitter einen Abstand von beispielsweise 100px aufweist, würde die Farbe [x] [y] der Matrix dem Pixel in 100x und 100y gegeben werden. Die Pixel dazwischen wären bilinear näherungsweise dargestellt.

Für einen solchen Ansatz würde die CSS sein:

.mesh { overflow: hidden; position: absolute; width: 300px; height: 300px; } 

.tile { width: 200px; height: 200px; position: absolute; display: block; } 

.tile11, .tile21, .tile31 { 
left: -50px; 
} 
.tile12, .tile22, .tile32 { 
left: 50px; 
} 
.tile13, .tile23, .tile33 { 
left: 150px; 
} 
.tile11, .tile12, .tile13 { 
top: -50px; 
} 
.tile21, .tile22, .tile23 { 
    top: 50px; 
} 
.tile31, .tile32, .tile33 { 
top: 150px; 
} 

.tile11 { 
background: -webkit-radial-gradient(center center, 100px 100px, 
     rgba(255, 0, 0, 1) 0%, 
     rgba(255, 0, 0, 0.5) 50%, 
     rgba(255, 0, 0, 0) 100%);} 

.tile12 { 
background: -webkit-radial-gradient(center center, 100px 100px, 
     rgba(255, 0, 0, 1) 0%, 
     rgba(255, 0, 0, 0.5) 50%, 
     rgba(255, 0, 0, 0) 100%);} 

ich jedes div als lokaler Beitrag des Netzes verwende, nur zu „berühren“ die inmediate Nachbarn bekommen, und gehen auf eine volle Transparenz darüber hinaus.

Das Ergebnis ist dieses:

fiddle

Die zwei ersten Farben sind als Test beide rot. In einem perfekten System sollte die Linie, die die 2 Punkte verbindet, immer rot sein.

Es stimmt, dass es kein perfektes Ergebnis ist, aber die „Verschlammung“ oder „washyness“ des Ergebnisses ist mehr oder weniger