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
___
Смотрите видео Reproduce GUI Challenges COMPARE component in your Page Builder онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь OxyProps 04 Март 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 360 раз и оно понравилось 34 людям.