Web Development

8 Conceptual Javascript and CSS3 Solutions for Mobile Platforms

Written by Kevin Liew on 25 Sep 2013
12,598 Views • Shares
0 comments

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.

iOS7 Blurred Header

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.

 

Next post animation

See the Pen Flat iPhone with Next Post Animation by Marius Balaj (@mariusbalaj) on CodePen

A really smooth and nice page transition animation.

 

Fold-Up Mobile Menu

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.

 

iOS7 style switches with CSS

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

 

Social App Menu

See the Pen Social App Menu by Matt Hoiland (@matthoiland) on CodePen

This mobile nav has became quite popular lately. A new concept.

 

Responsive List to Table

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!

 

Join the discussion

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.