Posts Tagged: css3

Flash / Inspirations / Show & Tell — No Comments
11
Mar 11

Show & Tell #7: HTML5 Games & More

This is a continuation of Show & Tell #7′s round up. Check part one here.

HTML5 Games

So where are the HTML5 games? I thought the “Flash-killer” had arrived?

Actually, there have been some cool HTML5 based games knocking around recently. These are mostly proof of concept games though, and nowhere near the level of Zombie Tycoon etc. Come back in 10 years for that.

Here are a couple of nice ones though that are worth a look…

Pirates Love Daisies

Actionscript legend Grant Skinner was commissioned to create this one for Microsoft’s IE9 Beauty of the Web campaign. It’s a classic tower-defense game but some nice touches in there. Most interesting is Skinner’s EaselJS Javascript library that makes the HTML5 transition easier for people from a Flash background.

canvas-riderCanvas Rider

An update to the classic Line Rider for the HTML5 era. very nicely done.

008 Ball Agent 008 Ball

Really like this one. The game premise is bollocks but the attention to detail and the implementation of physics in a JS game is impressive.

One that’s been grabbing headlines this week is URL Hunter. This game is unique in that the whole game takes place in the address bar of the browser. Obviously, it has much more appropriate applications but this is a pretty inventive demo of how HTML5 exposes the browser history via an API. Access to this API should help as we see more complex sites and web-apps that require stateful behaviour without a new page request. 

Hadouken!

 

Wallaby

Another headline grabber from Adobe this week was the launch of codename ‘Wallaby‘. In a nutshell, Wallaby takes a Flash file (.fla) and converts it to a HTML5 version. It’s not quite a magic bullet yet as there are some pretty major features that aren’t supported yet but it shows some definite promise. I’ll hopefully do some experiments myself and report back.

 

Motion Graphics Design Lecture

We also had a chat about the Motion Graphics Design lecture that I’ve covered in detail already here, check it out.

Follow Shane on Twitter: @shane_casey
Like it? Shout it out!
Innovations — No Comments
19
Sep 10

IE and HTML5 together at last?

With Internet Explorer 9’s release fast approaching on the horizon, web developers have been anticipating the new technologies / languages (HTML5, CSS3) they can start to implement for everyday use. So the release of IE9 beta last week gave us all a sneak peek into the pros and cons of the new ‘Big blue E’. The big selling point for me was IE9’s increased compliance & compatibility with HTML5 and other more modern web standards.

This HTML5 selling point is illustrated by: Never Mind the Bullets an example of an interactive ‘comic strip’ style narrative (A HTML5 parallax powered story). The HTML features it includes are:

Where we're going... we don't need roads!

• Font face loading
• SVG background
• Header & Section layout
• JavaScript acceleration
• CSS3 Multi-background
• Editable content


Another example of Microsoft pushing the new functionality of IE9 can be seen here: http://www.beautyoftheweb.com/

IE9′s adoption of newer technologies such as HTML5  makes it look like it is trying to catch up and even overtake a lot of the other rival browsers such as Firefox and Safari. However, even though IE9 is finally embracing ‘aspects’ of HTML5 it still needs to include more features in order to keep up with rival browsers, as you can see here: http://html5readiness.com/

However, Microsoft’s approach to integrating HTML5 with IE is worth mentioning. Whereas established, approved, stable HTML5 features such as video, audio and canvas have been fully adopted by IE9, Microsoft are less keen to include newer features such as geolocation and animations.

But, the signs are good! More compliance than ever before, improved performance and a cleaner look makes IE9′s release in 2011 something to look forward to rather than fear.

Like it? Shout it out!
Inspirations / Thoughts — 2 Comments
22
Apr 10

CSS3 – What can we use now?

I recently found a nice little tutorial and demo on Web Designer Wall about gradient buttons created using CSS3. Why am I posting about this rather than all of the other cool stuff that CSS3 has to offer I hear you ask? Well I am choosing to bring this to your attention mainly because this is something we can start using NOW without worrying about how it looks in IE6!

These buttons are created without the use of any images. The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc. See a demo here.

Although CSS3 gradient buttons are not supported by all browsers (Firefox 3.6, Chrome, and Safari are all compatable). This technique does degrade gracefully:

Gradient Images

The discussion point for the increased use of CSS3 is that it is not compatible with older browsers. However, I am a firm believer that as a young aspiring web developer / designer you should be utilising the best and most up-to-date techniques available to you! The argument should not be that: ‘my site doesn’t look correct in IE6 whereas it does in Chrome’, it should be that it looks ‘amazing’ in Chrome and ‘degrades gracefully’ in IE6.

We can utilise the latest CSS3 techniques as well as ensuring the site looks good in older browsers. Here is a quick look at the CSS used for that specific to the Gradient buttons:

To view the full ‘how-to’ article on on to achieve CSS3 gradient buttons click here: http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

Like it? Shout it out!
Blog WebMastered by All in One Webmaster.