zMastaa.com

A geek at home. A web and mobile Apps Developer at Bella Design in Cheshire. A man united fan all day long.

Html5 and CSS3 touch card / accordian demo

November 11th, 2011

 

So I’ve been writing little test scripts for this double barrelled combination. It’s clear that Html5 and CSS3 are pretty powerful duo, especially for responsive design. I think it’s only a matter of time before responsive web design becomes the norm, its best to get on it now huh.

I learned quite a lot from Andy Clarke’s Workshop last month, enough to consider concentrating the rest of my final year of uni on Html5, CSS3, javascript and of course php. Taking my knew found knowledge I wrote a quick RSS parser in PHP and displayed the output using HTML5 elements, I also targeted these elements with CSS3 the “hardboiled” way,  it is also responsive to what it is being displayed on so on your iPhone, Android or tablet device it will look slightly different depending on the resolution. Take a look zmastaa.com/html5demos/card.php (fails in IE10 and below for now) its currently using engadget.com‘s RSS feed.

The visual is 95% pure html5 and CSS3, and 5% jQuery to show/hide the description content (i’m not 100% sure if this could be done with CSS).

I’m still learning but right now, I can see the huge amount of potential in this.

 

View Demo – Warning, completely fails in IE10 and below for now

  • Anonymous

    I definitely love this.. Am gonna try coding it in raw Javascript and give you feedback

    • Anonymous

      sweet, its definitely doable in pure JavaScript, waiting for your results bro