Glam Up My Markup Contest Submission | Special Effects with backdrop-filter() ✨
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-29 20:31:37

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built

<!-- Tell us what you built and what you were looking to achieve. -->

I built a simple camp activities page based on the template form. I wanted to make sure that the form had some style, was mobile responsive, consistent, and creative.

## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->

I hosted the demo for my project on my website, here:
https://the-best-codes.github.io/devto/contest/camp/
Check out how it looks below (the main link will look better):
{% codesandbox v4pllq %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
When I first saw the template form, I decided that I wanted to make sure it was centered both horizontally and vertically on the page. So I used the CSS `flex` display and its options to achieve my goal there.
Next, I wanted the form to have some kind of background image. I thought it would have a better camp vibe if I could find a camp related image. So I found a nice campfire image and set to work with my layout. 
A few minutes later, I had something like this:

![No padding, no border radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yjlfcqujn7x31e92dwx.png)

Of course, the form didn't look too awesome without some `padding` and `border-radius` effects. So I rounded the corners and increased the padding. Still, The plain white form on the background image didn't quite suit my taste.
So, I decided to make the form slightly transparent and see how that looked. It looked a lot better than before! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc5zi441hg2tq041r8sy.png)

I felt that I could improve on this, though. I experimented with some different CSS filters and found one that I liked: `backdrop-filter`. With it, I could blur the background, apply grayscale effects, and more! I decided on a ten pixel blur. I chose a combination of backdrop filters to accentuate the flame behind the form.
Next, I used Tom Select to modernize the select element a bit — browsers don't let you customize it much otherwise. I also whipped up (more of GPT whipped up) some JS code to make sure the form submission was handled correctly (instead of giving a 405 error).
Now, I made a few minor adjustments (to the fonts, minor style changes, etc.) and here we have our final result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n1hff0j29w48efc6pga.png)

Well, I know I've seen some pretty good submissions — some people are crazy good at CSS! I don't really expect to win, but it sure was fun!


## License
This project uses Tom Select, which is licensed under the Apache License, Version 2.0.
[Tom Select on GitHub](https://github.com/orchidjs/tom-select)
[Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0)

Background Image sourced from the public domain. Photo taken by Bobby Mikul. 
[See image page](https://www.publicdomainpictures.net/en/view-image.php?image=5819&picture=camp-fire)

Font: Varela Round by Joe Prince (licensed under SIL OFL).
[Google fonts](https://fonts.google.com/specimen/Varela+Round)

Some scripts in the project are AI generated using GPT-4 through the [Codeium AI](https://codeium.com?referral_id=YmVzdC1jb2Rlc0Bwcm90b24ubWU=) GitHub extension interface.

All CSS code was written by BestCodes.

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
_Article written by [BestCodes](https://the-best-codes.github.io/?dev.to=contest_submit_camp_1_post) with no AI assistance. Happy coding!_