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

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.belabsHTML5RocksText-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.comroundcorner.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
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
25,100 -30 0,1 50,-25 l 50,-25″
fill=”none” stroke=”red” stroke-width=”5″


Other great examples: