Sharing a design inspiration hunt on designing a creative CSS3 resume template without any images or PhotoShop. This CSS3 resume is designed by the designer William Roach. The designer has focused on creating speech bubbles to display the details of the candidate. He has left one bubble to display your self shot image. The color of the font changes as you scroll down the resume. The intention of the designer was to create this design using lettering.js but unfortunately it didn’t generate the demo. Hence, he has used only CSS3 properties and Google fonts to generate them.
The mix of cool fonts, gradients, tooltips, bubble speeches, and the colors inspires us. This is definitely going to inspire you. This template can be used by UI designers, web designers, and graphic designers to showcase their resume. It is really a trendy design. Lots of appreciation to the designer.
We just love the below code to create the arrows:
|
1 2 3 4 5 6 7 8 9 10 11 |
.arrow(@top, @left, @color, @border-size:20px){ display:inline-block; width: 0; height: 0; border-left: @border-size solid transparent; border-right: 0px solid @color; border-bottom: @border-size solid @color; position:absolute; top: @top; left: @left; } |
Details of the creation:
Designer: William Roach
Inspired From: Pixeden’s Creative Resume Template Vol-1
Librarian Image: Dribble
Coding: HTML5 and CSS3
Fonts Used: BenchNine, Open-Sans Condensed Light
DEMO | DOWNLOAD SOURCE
Hope you enjoyed this design inspiration hunt. We will try to hunt for more such quality design inspirations to keep us inspired.
CSS3, Design Inspirations, How To, HTML & CSS
