Get Started With HTML5CSS3: Tips, Showcases, And Coding Samples

HTML5 is gaining more popularity and starting to evolutionise the entire web interface. Even some web developers quoted that
HTM5 elements and visual effects are comparable to Flash. The new scripting style is easy to understand and capabilities
to enhance the web interface is limitless. So how interesting is this HTML5 anyway?

This article is intended to give readers an insight on what you should know about the HTML5 and most importantly some tips
& tricks on creating lightweight, attractive, and interactive HTML5 pages.

1. Basic in HTML5

Before we begin any further of this topic in HTML5, it will be good to check your current browser first. As many of the browsers
are still in the development mode (enhancement to accomodate the HTML5), some features mentioned here may not be supportable.

Here’s a quick tips to check your browser compatibility.

To understand further the limitation of certain browser, you may refer to here.

2. Text Effects – Adding shadow and advance text effect in HTML5

Basic shadow effect on text

This is the simplest one string code that transform your ordinary headline into a cool-looking text. Never underestimate
the shadow effect. To create this similar looking effect requires web designer to go through multiple steps of image
editing in Photoshop. And now all it takes is just one line of code. The shadow distance, color can be changed to your
heart content.

Coding sample

#shadow h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Text on advance fire-like effect

The next tip is to show you on how the HTML5 coding can be tweaked into a even cooler-looking text. If you experiment enough,
or find other examples, the possibilities of customizing the effects are endless. Note: this example is not created by
any image editing software. Just plain codes in HTML5.

Coding sample

#fire h1 {
text-align: center;
margin: 200px auto;
font-family: “League-Gothic”, Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px
30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716,
10px -90px 80px #451b0e;
}

Other great example: http:mudcu.belabsHTML5RocksText-Effects.html#spaceage

3. Rounded corner in HTML5

Styling the webpage layout in HTML5 has never been so easy since the introduction of css. And now you can even have a rounded
corners of your layout elements! Imagine this; no more slicing background image, no more messy picture fragments. This
will bring many cheers to the web designers out there.

Coding sample

div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}

Note: Moz means Mozilla, and webkit is for Safari and Chrome.

Other great example: http:fjd1.comroundcorner.html

4. Scalable Vector Graphic (SVG) in HTML5

Scalable Vector Graphic or commonly known as (SVG) is a 2-Dimension vector graphics which is defined in XML text files. In
another words, because their DNA is based on XML text file, they can be created or editable on the web platform. Which
also means, there can be scale easily, and search engines are able to read and understand the image.

Sample code

<svg id=”svg-area” width=”838″ height=”140″ viewBox=”0 0 2000 380″>
<rect x=”100″ y=”20″ rx=”25″ width=”100″ height=”335″
fill=”#FAEBD7″ stroke=”purple” stroke-width=”2″ >
<rect x=”-50″
y=”300″ width=”300″ height=”75″ fill=”none” stroke=”#4B0082″
stro ke-width=”4″ transform=”rotate(-30)” >

<path d=”M 950,200 h -150 a 150,150 0 1,0 150,-150 z” fill=”red” stroke=”blue”
stroke-width=”5″ >
<path d=”M 925,175 v -150 a 150,150 0 0,0 -150,150 z” fill=”yellow”
stroke=”blue” stroke-width=”5″ >
<path d=”M 1450,350 l 50,-25
a
25,25 -30 0,1 50,-25 l 50,-25
a 25,50 -30 0,1 50,-25 l 50,-25
a 25,75 -30 0,1 50,-25 l 50,-25
a
25,100 -30 0,1 50,-25 l 50,-25″
fill=”none” stroke=”red” stroke-width=”5″
>

<svg>

Other great examples:

• http:codinginparadise.orgprojectssvgwebsamplesdemo.html?name=photos&svg.render.forceflash=false
• http:playground.html5rocks.com#inline_svg

• 5. Embedding movie file in HTML5

  

  Here’s another interesting part to showcase the capabilities of HTML5. Many of the video online are usually presented
  to webuser in the form of Flash. Until recently, embedding video in HTML5 slowly gaining momentum (YouTube is good example)
  and Flash is slowly losing its attractiveness. Why is that so? Mobile users. If you want your video to be able to play
  in both iPhone and Android phones, HTML5 is the way to move forward.

  To embed the video, you’ll need to know there currently 3 formats supported by different browsers; .mp4 (H.264+AAC),
  .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

  Sample code

  <video width=”560″ height=”340″ controls>
  <source src=”pathtomyvideo.mp4″
  type=’videomp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
  <source src=”pathtomyvideo.ogv”
  type=’videoogg; codecs=”theora, vorbis”‘>
  <video>

  Other great example : http:studio.html5rocks.com#PiP

  6. Slide Presentation in HTML5

  

  Powerpoint has been a synonym name associate with slide presentation. But why confine yourself with a offline presentation
  where you can create slides meant for web audience? HTML5 has come to the rescue in creating much powerful presentation
  slides, complete with transition and navigation menu. The best part is, you can even apply 3D transform to your presentation.

  Sample code

  pre {
  transition: all 1s ease-inout;
  }

  pre:hover {
  background-color: #F2F5FE;
  border-color: black;
  }

  div {
  transform: rotate3d(1,1,0, 45deg);
  }

  Other great examples:

  • http:www.script-tutorials.comcreating-an-attractive-presentation-with-html5
  • http:www.html5rocks.comenfeaturespresentation

  • 7. Editable Content in HTML5

    

    Static text is so old-school in the age where flexibility and dynamic rule the world. In HTML5, you can define a text area
    made it editable by the web user without text editor.

    Sample code

    <p contenteditable=”true”>This content is editable!<p>

    Other great example: http:html5demos.comcontenteditable

    8. Interactive Web Canvas in HTML5

    

    Besides SVG in HTML5, canvas is the next best thing that ever happened to the web. Canvas allows rendering of 2 dimension
    shapes that bring interactivity to a whole level without the help from Flash.

    Nevertheless, the simple coding in HTML5 that creates amazing animation interaction is worth to mentioned in here.

    Other great examples:

    • http:www.bestfreewebresources.com20100910-best-html5-canvas-applications.html
    • http:addyosmani.comblog13-incredibly-fresh-new-canvas-demos

    • 9. Drag and Drop in HTML5

      

      Drag and drop (sometimes known as DnD) is another cool feature that available to HTML5. A great example would be implementation
      by Google in their Gmail. If you’re using any of the HTML5 supportable browsers, you can simply drag a file from
      your computer and drop onto the compose message window. It will be automatically add in as an attachment. How cool is
      that?

      Sample code (native DnD)

      document.addEventListener(‘dragstart’, function(event) {
      event.dataTransfer.setData(‘text’,
      ‘Customized text’);
      event.dataTransfer.effectAllowed = ‘copy’;
      }, false);

      Other great example: http:www.html5rocks.comentutorialsdndbasics

      10. Pure CSS Data Chart in HTML5

      

      Before HTML5, it is also impossible to create a presentable chart by just using coding in HTML. Furthermore, changing the
      data value and to reflect in the chart is no simple task. Again, HTML5 to the rescue. Together with CSS, you can create
      an absolutely beautiful chart which put Microsoft Excel to shame. The codes are simple, and all you need to do is spending
      time to customize the perfect color and effect for your chart.

      Other great example : http:cssglobe.compost1272pure-css-data-chart

      Tutorial on creating the HTML5 chart using jQuery plugin, go to: http:www.catswhocode.combloghow-to-easily-create-charts-using-jquery-and-html5

      Can’t get enough of HTML 5?

      So do we! Here’s more on the topic, go check them out.
      30 Very Cool Examples of HTML 5 Websites
      * Getting Started with HTML 5
      * Must Read HTML 5 Tutorials in 2012
      * Learn HTML 5: 10 Must Read Lessons
      

      Also, check out this HTML 5 crash course by Robin Nixon.
      Robin Nixon is the author of Learning PHP, MySQL, and JavaScript;
      the course covers pretty much everything a newbie need to know in HTML5 – including basic HTML coding, HTML5 canvas
      for drawing, geolocation, local storage, as well as HTML5 audio and video.