Remember when the biggest way to show off your quality as an applicant was to have a fancy resume? You’d have a heavy paper weight, fancy fonts and in some cases embossing. I decided it might be fun to duplicate that as an HTML/CSS resume.
I have a history of creating my resumes using HTML and CSS instead of desktop publishing projects. You can find examples of my past resumes in Github if you’re curious.
This time, I wanted to create a background that was textured and a gold flake ribbon type of effect.
For the background, I decided to use a cream color. Then, I generated some noise and converted that to a data url. Here’s what that ended up like:
background-color: #fffce9; background-image: url(data:image/png;base64,iVBORw0KGgd/9+u<SNIP>CYII=);
That ends up giving us a nice paper-like background.
Then, I had to make a ribbon that had a gradient. Doing a border gradient maybe is possible with some imagery, but I decided to do it differently. Instead, I created a whole background with a CSS gradient, then nested an element inside of it with the same background design, slightly inset. This made a nice ribbon.
To create the gradient, I used a couple gold-ish colors with a couple stops:
background: linear-gradient(153deg, #ae9e69 0%, #ffd64e 20%, #ae9e69 25%, #ffd64e 30%, #ae9e69 32%, #ae9e69 100%);
With the angle of 153 degrees and a few rapid stops/changes in the gradient, there will be a nice reflective style in the ribbon.
In the end, here’s how it ended up looking:
You can download the PDF here or see the demo here or on codepen to see how it was done.