This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
A lively and colourful form experience, enhancing the given markup just with CSS and JS, without touching a line of HTML 💅✨
Demo
Journey
Just for reference here's the provided markup:
So I got started:
- Style the form (yay, easy)
- Spent too much time styling a select box (argh, again…)
- Realised that the dropdown was boring…
- Realised that the whole form was boring…
- At this point I didn't want to go to the camp anymore…
Then I thought:
- Is there a nice piece of content in this form?
- Maybe we should give more importance to the activities?
- How can we make them more visible?
- What if they were radio buttons?
And then I did this:
- Add custom UI to fill the original form.
- Use css variables for easy customisation.
- Add generative landscape background by @qub3r-001🏆🙏
- Add icons from The Noun Project by Estudio Poncho, Katie Watson, Michael Finney, Thanga Vignesh & Grégory Montigny. 🏆🙏
- Change global color based on selected activity.
Oh, btw:
I couldn't use the mask-image approach for the SVG icons in the textarea fields. Doing so would also mask the background and the border of the input box… Thoughts?
Top comments (6)
Wow
Looks great!! I really like the idea for the tiles instead of the original dropdown and also love that the background changes to reflect the selected option. Great work
😍😍😍
How did you embed your images directly into the css
Using data URIs, check this article :)
Nice, those buttons are really original!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.