by Reece George
It just looks cool.
Resize the page in the browser and the large image will be replaced by the small image. This allows the interface to send a smaller image to mobile devices to reduce download time.
The original flatuicolors.com interface was developed using Flash, to enable an automated 'copy' function. The CSS version above is more cross-platform compatible and in my opinion, slightly more usable. However, the hex values need to be copied manually.
This element uses a custom icon font and CSS3 animation to achieve a very subtle heart beat, often used in the the footer of a website.
Further flat design elements. This is an example of using CSS3 to manipulate text and add a long shadow
Table collapses into a "list" on small screens. Headers are pulled from data attributes.
Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.
This script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size. The script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.