Text Shadows in Canvas Using HTML 5

Manish Singh
Feb 04, 2012
5.4k
0
0
Article

Introduction

This is a simple application for beginners that shows how to create Text shadows in a canvas using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a Text shadows title in a canvas. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is a important tag of a HTML 5 that is used to show the image and text in a HTML 5 application.

Step 1 : First Open a HTML editor such as Notepad.

Open start->Notepad.
The name of editor is "Text".

Step 2 : Create a Folder on a desktop.

Right-click on desktop->new->Folder.
Name of folder is "Shadows".

Step 3 : Open Visual Studio.

Go to file -> New->Projects.
Crete an ASP. NET Web Application.
Name of "animation.aspx".

Step 4 : Add a HTML file to your web application.

Right-click on Solution Explorer.
Add->add new item->HTML form.
The Name of the HTML form is "zoom.html".

Step 5 : Add a css file to the application; name it style1.css. In the css we set all the properties of a title spam, hover, focus and selection.

Code

#Title {

font-family: Helvetica, Geneva, sans-serif;
}

#Title:focus
{

outline: none;

}

#Title span
{

vertical-align: middle;

line-height: 1.5em;

-webkit-transition: font-size 2s cubic-bezier(0, 1, 0, 1);

}

#Title span:hover
{

font-size: 4em; line-height: 1em;

-webkit-transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);

}

#Title span:active
{

font-size: 1em;

text-shadow: none;

}

#Title span::selection
{

background-color:Blue;
}

Step 6 : Set the body part of a text shadows application.

Code

☺ ☺☺
☺☺

Cshorp<span

style="background-color: #66FF99">Corner.<span

style="background-color: #00FFCC">Com

Tom application Zoom Text.
</div>

</body>

Step 7 : We see that in a <div> tag we pass an id with the name wrapper. In the wrapper class we define all properties of a <div> tag; that is text alignment, color and font size.

Code
#wrapper {
       text-align: center;
       color: #000;
       font-weight:normal;
       font-size: 50px;
       padding: 50px 0;
}

Step 8 : The complete code of text shadows application is define below.

Code

<html>
<head>
<title>Tom application</title>
 <link rel="stylesheet" type="text/css" href="Style2.css"/>
 </head>
 <body bgcolor="#00cc99">
 <div id="wrapper">
 ☺☺
 ☺☺☺
 CshorpCorner.Com
 Tom application Zoom Text.
 </div>
</body>
</html>