Reproduce GUI Challenges COMPARE component in your Page Builder
In his latest episode of GUI Challenges (link below), Adam Argyle created an awesome Compare component using html, css and javascript in a smart way.
In this episode, let's see how to recreate this component in our page builder. I will be using Bricks, but you could do the same in Oxygen, Breakdance, of another advanced page builder.
🔗 Links
GUI Challenges - Thinking on ways to solve COMPARE components:
• Thinking on ways to solve COMPARE com...
Transhumans Graphics:
https://www.transhumans.xyz/
Structure to copy/paste in Bricks:
https://gist.github.com/cbontems/92bf...
🎉 Get the plugins while they are on LTD !
OxyProps: https://oxyprops.com
Structeezy: https://structeezy.com
⌚ Timestamps
00:00 - The target result component in Bricks.
00:30 - Introduction.
01:00 - The basic layout.
01:35 - Understanding linear gradients.
02:50 - Hard stop gradients.
03:50 - Multi-position color stop syntax.
04:30 - Gradient Color hint
05:45 - Combine color hint and multi-position color stop.
06:25 - Make the gradient stops dynamic.
07:50 - Create a range element to control the gradient.
09:50 - Make the element usable in Bricks editor.
13:20 - Update a css variable based on the range element value.
18:20 - Make our javascript work in Bricks editor.
21:30 - Add the before after elements.
24:20 - Add the dynamic masks.
26:30 - Adding graphics from Transhumans.xyz
27:49 - Styling our range element for all browsers.
30:40 - Enjoy your component.
#CSSFramework #OxyProps #Structeezy
___
Come hang out with other users in our Facebook Community
💬 / oxyprops
___
My editor:
VS Code - https://code.visualstudio.com/
My Terminal:
Hyper: https://hyper.is/
My Terminal Enhancements:
OhMyZSH: https://ohmyz.sh/
Powerlevel10k: https://github.com/romkatv/powerlevel10k
___
Find me on the internet :
Github: https://github.com/cbontems
Bluesky: @cedric.bontems.me
twitter: @cedricbontems
___
Watch video Reproduce GUI Challenges COMPARE component in your Page Builder online without registration, duration hours minute second in high quality. This video was added by user OxyProps 04 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 360 once and liked it 34 people.