[gtk+/wip/gbsneto/css-blend-modes: 2/3] css: add documentation for background-blend-mode
- From: Georges Basile Stavracas Neto <gbsneto src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+/wip/gbsneto/css-blend-modes: 2/3] css: add documentation for background-blend-mode
- Date: Fri, 1 Jul 2016 23:18:04 +0000 (UTC)
commit 65dcdc0698a10afcb77840badd9f95c7f2fc9d14
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date: Fri Jul 1 10:01:43 2016 -0300
css: add documentation for background-blend-mode
After introducing the new CSS property, it is natural to
add some documentation explaining the behavior of it and
our support coverage.
docs/reference/gtk/css-properties.xml | 17 +++++++++++++++++
1 files changed, 17 insertions(+), 0 deletions(-)
---
diff --git a/docs/reference/gtk/css-properties.xml b/docs/reference/gtk/css-properties.xml
index 6416dba..9b9c98e 100644
--- a/docs/reference/gtk/css-properties.xml
+++ b/docs/reference/gtk/css-properties.xml
@@ -1110,6 +1110,15 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
<entry>not supported: urls without quotes, CSS radial gradients, colors in crossfades</entry>
</row>
<row>
+ <entry>background-blend-mode</entry>
+ <entry><code>〈blend-mode〉 [ , 〈blend-mode〉 ]*</code></entry>
+ <entry><code>normal</code></entry>
+ <entry></entry>
+ <entry></entry>
+ <entry></entry>
+ <entry>only affects multiple backgrounds</entry>
+ </row>
+ <row>
<entry>box‑shadow</entry>
<entry><code>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></entry>
<entry><code>none</code></entry>
@@ -1144,6 +1153,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
<code>〈bg-image〉 = 〈image〉 | none</code>
<code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code>
<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉||
〈color〉</code>
+<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion || hard-light
|| hue || lighten || luminosity || multiply || normal || overlay || saturate || screen || soft-light</code>
<code>〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉?</code>
</literallayout>
@@ -1152,6 +1162,13 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
background images are absent or have transparency.
</para>
+ <para>
+ Alternatively, multiple backgrounds can be blended using the <code>background-blend-mode</code>
property. The first and
+ second backgrounds are blended with the first blend mode set. The resulting background is then
blended with the third one
+ using the second blend mode available - and so on. If the number of backgrounds does not match the
number of blend modes,
+ the blend modes are used until the last one, and then reiterated from the first one.
+ </para>
+
<table pgwide="1">
<title>Transition properties</title>
<tgroup cols="7">
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]