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
To understand further the limitation of certain browser, you may refer to
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:
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:
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:
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=”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 :
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:
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:
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:
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:
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 :
Tutorial on creating the HTML5 chart using jQuery plugin, go to:
Can’t get enough of HTML 5?
So do we! Here’s more on the topic, go check them out.
Also, check out
Page 25 – Web Hosting Secret Revealed
