Branding & Web

CSS3 Profile Card

Posted by on Aug 4, 2012 in Blog, Freebies | 0 comments

profilecard CSS3 Profile Card

With the arrival of CSS3, transitions can be created quickly with minimal amounts of code and expertise. You don’t have to learn a new language like javascript, all you have to do is learn a few new attributes and how transitions work.

In the spirit of learning and exploration I designed this profile card in photoshop and being very curious I decided to see if I could create it with CSS3. The CSS3 did get a little tough when implementing the slideshow on the back page, but all in all it wasn’t too bad. All elements are made with CSS3 except for the flip button and the slideshow arrows (and of course the photography).

Note: This only works in Chrome and Safari!

Although this is not a tutorial, the PSD file and the source files are available for download below.



View Demo




Like or Tweet to download the PSD & Source Code