Streaming live at 10am (PST)

Creating DYNAMIC gradients with new Dynamic Embeds


#1

Hello everybody! :relaxed:

Just want to share with you the method of creating Dynamic gradients for your items inside the collection.


For the base, we will use the CSS syntax for creating gradient:
background: linear-gradient(direction, color-stop1, color-stop2, ...);

As example, will use code snippets:

<style>
   #grad {
      background: red; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
      background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
    }
</style>

OR

<style>
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
</style>

Note: parameters background: red and -90deg - here is just examples, you can use different values;


As we can see, colors for gradient can be set in 2 different types, but both has number and letters in it.
Also, best practice to set the gradient to elements by ID.

STEP1

Add TEXT fields into collection item structure:
1) "color1" - for color-stop1
2) "color2" - for color-stop2
3) "ID for gradient element"

STEP2

Add embed element inside the dynamic item design.

1) drag and drop Dynamic collection to the page design and connect it to collection with data for gradients
2) drag and drop Embed code element inside the dynamic item
3) paste one of the code snippets from above
4) change element ID and color values on dynamic fields values:

5) create the element inside dynamic item, which will have gradient background in it (I used simple div with class "gradient") and give it class, using standart Wbflow elements.

6) add more details in the code snippet:

7) remove element, created in point #5

8) save, publish and get results:


AT THE ITEM TEMPLATE PAGE you don't have to add HTML code for the gradient element. It will be enough to use snippet with static ID and give this ID name to some element on the template page


Live results you can see here: http://sapdesign-sandbox.webflow.io/dynamic-gradients

Best regards,
Anna