Webdesign mit Liquid Canvas

Erweiterte Farbcodierung bei Liquid-Canvas

Die Farbegestaltung auf dieser Seite dient nur Demonstrationszwecken, ansonsten ist sie, das gebe ich zu, ein rechter Augenbeißer.

Allgemein bekannt die die Angabe von Farbwerten mit #rrggbb in Form von Hexadezimalwerten oder die Angabe mit der Funktion rgb(Rot, Blau, Grün), wobei die Farbwerte in einem Bereich von 0-255 liegen können.

Moderne Browser unterstützten aber inzwischen auch Farbangaben mit rgba((Rot, Blau, Grün,Alpha). Dabei gibt der Alpha-Wert die Deckkraft an. Dieser Alphawert kann zwischen 0 und 1 liegen.

Ein Alphawert von 0 bedeutet keine Deckung, der Alphawert von 1 steht für vollständige Deckung.

Beispiel

Auf dieser Seite wurde zusätzlich zu den Angaben des Designs dem HTML-Element p die Plug-In-Einstellung

<script type="text/javascript">
$(window).load(function() {
$("p").liquidCanvas(
"gradient{from:rgba(0, 0, 255, 0.5); to:rgba(255, 0, 0, 1);} => roundedRect{radius:5}");
});
</script>

zugewiesen. Dadurch wird jeder Standardabsatz mit einem abgerundeten Hintergrund hinterlegt, der oben zu 50% deckend blau ist und unten zu 100% deckend rot. Da die blaue Farbe im Anfangsbereich nur zu 50% deckend ist, variiert die tatsächlich angezeigte Farbe je nach der Farbe des dahinterliegenden Elementes. Die rote Farbe unten ist hingegen immer gleich. Das Ganze funktioniert, das ist das Tolle, eben auch im Internet Explorer.