It’s easy to make CSS shapes with solid colors by using borders, but it’s more difficult to make them with gradient backgrounds. The main trick is to use pseudo elements and `overflow: hidden“ to cut out the desired shape. There are many more shapes that this technique could be applied to, include many listed here, but I didn’t include them for brevity. See them on CodePen.
Most any time we go to a new place, we are looking to find activities to do. It could be anything from hiking to finding a trendy coffee shop. When I first came to study at the University of Georgia, I found myself in this situation, particularly in respect to finding activities for groups of people to do and activities to do on dates. Over time I came to know a lot of local places and activities, but it took a lot of talking to people and didn’t always come when I wanted it to. It would have been great to have a way to find out about all of those activities quicker and more easily.
My sophomore year, I created a quick little prototype of an app to do just this. I called it Palm Date. It started as a project just so I could practice UI animations but turned into something I could actually use on dates to help us choose activities to do. A gif of how it worked is below.