CSS Creatures was originally released in December 2012. Since the project started, over 10,000 people have seen their own creatures appear on the site. In October 2017, the site was completely rebuilt with brand new features.
This site uses the Twitter Search API, searching for tweets sent to the account @csscreatures. Tweets are parsed looking for colors and specific keywords, which are then used to build a creature.
Open Website
Clippy is the best tool online for generating values for shape functions for use with CSS clip-path property. With 24 preset polygonal shapes and support for circle and ellipse shapes, the site also includes a custom polygon shape builder.
Clippy was mentioned on CSS-Tricks in an article by Ana Tudor in May 2017 and another article by Chris Coyier in March of the same year.
The site was also mentioned in the book Web Developer's Reference Guide published in 2016. More shoutouts can be found in CSS-Tricks articles from October 2015, and in December 2014.
Open Website
What started as an experiment messing with CSS blend modes, these pure CSS Image Effects offer a lot of possiblities for image manipulation on the web.
To make the effects work, a single source image is overlayed on top of itself one or more times and new CSS blend mode and filter properties take care of the rest.
Because the properties used in this method are relatively new, care was taken to make sure the images gracefully degrade in unsupported browsers.
CSS Image Effects has been written about in an article on Noupe by Ioanni Mitsakis in November 2016.
Open website
The three-line menu icon, hamburger, navicon, whatever you want to call it, are used far too much on the web nowadays.
That didn't stop me from being perhaps the first to animate the icon to smoothly morph into other useful shapes. The demo I whipped up on CodePen reached over 150,000 views since it's creation in October 2013.
The design pattern has been adopted as part of Google's Material Design spec, and can be found on the websites of Apple, Starbucks, ESPN, and Spotify.
Open demoThe Love Notes Foundation is group of musicians offering music lessions at schools and Children's hospitals with the goal of share the gift of music to children with illnesses.
The website I made consisted of a custom WordPress theme and featured an interactive playable piano as part of the footer. Sadly the website is not currently live so you'll have to trust the screenshots for now.
Leading up to the inauguration of Donald Trump, this website generates a inaugural address by combining over a hundred random topics, places, and names. The result is a speech only the Donald could pull off.
Open Website
Saints of the Week is a custom WordPress site made for a client who draws the saints which also appearing in newspapers and Church bulletins across the United States.
The backend WordPress user interface was optimized for publishing these illustrations.
The site utilizes the CSS background-attachment property for a unique scrolling experience which is supported on laptop and desktop devices.
Open Website
