Codepen is like dribbble but it's designed for web developers! Instead of just visual design, you can see real working implementation. Though not all examples are good, but there quite many experimental and pretty cool concepts in codepen.
This time, to make this post a little bit more interesting, I embedded each example so you can play with it straight away! I chose these examples because I believe they have a great potential to be implemented and used it now. Some examples are using pretty advanced technique and latest technology, so you might want to make sure it degrades gracefully.
See the Pen iOS 7 Blurred Header by Rik Schennink (@rikschennink) on CodePen
iOS7 definitely not the first platform that uses blurring effect. With CSS3, you can achieve that on website too.
Â
See the Pen Flat iPhone with Next Post Animation by Marius Balaj (@mariusbalaj) on CodePen
A really smooth and nice page transition animation.
Â
See the Pen Fold-Up Mobile Menu Concept by Sara Soueidan (@SaraSoueidan) on CodePen
If you have a small nav, you can consider this fold-up mobile menu.
Â
See the Pen iOS7 style switch with CSS by Bandar Raffah (@BandarRaffah) on CodePen
Of course, iOS7 style toggle switches. If you need more switches, check out this post - Toggle switches in web development
Â
See the Pen Social App Menu by Matt Hoiland (@matthoiland) on CodePen
This mobile nav has became quite popular lately. A new concept.
Â
See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen
Usually, we hide columns, or resize the font in table to make it fit within mobile viewport. Here we have a new way to do it.
Â
Off canvas partial touch template
See the Pen Off Canvas Partial Touch Template by Oliver Knoblich (@oknoblich) on CodePen
As oppose to fold-up menu, this one you fit your large nav menu.
Â
CreativeDash iPad Mini Nav Test
See the Pen CreativeDash iPad Mini Nav Test by Daniel Reid (@dan_reid) on CodePen
This one is for ipad, but I pretty sure you can use it on mobile too!
Â
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.