Get Started With HTML5/CSS3: 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

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

Text effects 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.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Rounded corner in HTML5

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.com/roundcorner.html

4. Scalable Vector Graphic (SVG) in HTML5

HTML 5 tutorials, guide, and samples

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:

5. Embedding movie file in HTML5

Video 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=”path/to/myvideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”path/to/myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

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

6. Slide Presentation in HTML5

HTML 5 tutorials, guide, and samples

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:

7. Editable Content in HTML5

HTML 5 tutorials, guide, and samples

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.com/contenteditable

8. Interactive Web Canvas in HTML5

HTML 5 tutorials, guide, and samples

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:

9. Drag and Drop in HTML5

HTML 5 tutorials, guide, and samples

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.com/en/tutorials/dnd/basics/

10. Pure CSS Data Chart in HTML5

HTML 5 tutorials, guide, and samples

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.com/post/1272/pure-css-data-chart

Tutorial on creating the HTML5 chart using jQuery plugin, go to: http://www.catswhocode.com/blog/how-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.

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.

  • http://www.guarant Jason

    This is awesome! Great examples, very helpful for budding developers like myself, love the shadowing affects on headings. Thanks for sharing this.

  • http://www.facebook.com/profile.php?id=100003405408991 Prad

    sehr toellr blog, aber jetzt gehe ich schlafen. Keinem sagen *hihi*. Weiter so!

  • babs

    Thanks..this is great!!!

  • http://www.flyuft.com Sarasota Flight School

    this is fantastic, thank for this great source

  • DAniel

    Muito interessante as novas funcionalidades do HTML5, vemos que em conjunto com o CSS3 conseguimos criar layout tão surpreendentes quanto ao uso de aplicativos gráficos.

  • Anon

    Uh.. All I see is a whole bunch of CSS3 with a little bit of HTML5 squeezed in somewhere. Please differentiate between CSS and HTML, this article is just misleading; “Hey, boss! Look at me, I’ve learned HTML5!” – proceeds to show a CSS3 document.

  • http://www.retroflash.net Alexander Chapman

    Very nice examples..helpful for me as a HTML5 Beginner :)

  • Pingback: Interview With Daniel, Creator Of Facebook Cover Maker