Today I registered nextjs conf and received a digital ticket. It is visually appealing.Visual design is my weak point and I am starting to learn and use CSS more often. As I am getting confident and confortable to use CSS for building any kind of UI conponents. I’ve got a pulse to make a replica of this ticket using tailwind CSS. Unfortunately, I failed to do so eventually. However, this is still a fun journey to figure something out.
At first glance, all content inside the color frame is not that important, just stack of texts. The whole point of this replica is building a frame with the same colorful gradient outline with curves at the top and bottom.
Apparently it is not perfect. I came to more problems than I thought:
I used two divs stacked togther and their rounded corner cannot match.
I couldn’t create gradient with 3 different colors.
I can use two hald circle svg to intersect with top and bottom line to create curves, but their intersection points will be sharp and I cannot apply rounded corners to them.
Problem number 2 may be solved by adding another border-like div with different color, but that will be too much work for a simple color outline.
The beauty of front end development is that you can always check existing webpage source code to see how others' work is done. By checking the source code of this digital ticket, their solution is pretty straighforward: using svg for almost all content.
Lesson learned: CSS is powerful and almost all visual styles can be done by it. There might be alternative and easy way to achieve same result than using pure CSS, especially for my level of CSS skills. But it is fun to build something even I didn’t get what I expected in the end.
