[gtk+/wip/gbsneto/css-blend-modes: 2/3] css: add documentation for background-blend-mode



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? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈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]