html5 css3 banner

UPDATE: 7/10/15 – The HTML5 Rocks website has changed. The code generator has been replaced with web development tutorials. This blog post has become obsolete, but do visit HTML5 Rocks for all your web dev needs.

Posted on December 11, 2012:
If you are a beginner web design coder (like me), you might be interested in HTML5 Rocks – Playground, which offers free demos and an HTML5/CSS3 code generator. Here are 4 easy steps to generate custom HTML5 or CSS3 code, using HTML5 Rocks – Playground:

  1. Choose a function
  2. Edit the code on screen
  3. Hit “run code” to Preview code
  4. Copy and paste the desired code into your CSS Style Sheet or HTML document

Here are some screenshots of different HTML5 and CSS3 functions:

html5rocks rounded corners

CSS3 Rounded Corners

html5 shadow

CSS3 Drop Shadow

html5 text effects

HTML5 Text Effects

HTML5 Playground generates code for:

  • Webkit (Safari & Chrome)
  • Moz (Firefox)
  • IE8 or higher

Inspire your website or blog with HTML5 and CSS3 code. Play. Learn. Rock!

Related – Community driven web resource center – W3C, Apple, Google, Mozilla
Being A Web Developer – HTML5, CSS3, JavaScript eBook
The Code Player – HTML5, CSS3, JavaScript Video walkthroughs
Making 10,000 Stars – HTML5 Rocks Tutorial

Share →