Text Shadows in Canvas Using HTML 5


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".

notepad.gif

Step 2 : Create a Folder on a desktop.

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

folder.gif

Step 3 : Open Visual Studio.

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

new application.gif

openapplication.gif

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".

html.gif

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


<body bgcolor="#00cc99">
  <
div id="wrapper">

     <p id="stars" style="background-color:#FF8080"><span>&#9786;</span>   <span>&#9786;</span><span>&#9786;</span>
         <
span>&#9786;</span><span>&#9786;</span></p>

            <p id="title" contenteditable="true"><span style="background-color: #FF99FF">Cshorp</span><span

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

                style="background-color: #00FFCC">Com</span></p>

           <p id="slogan" style="background-color: #CC0066"><span>Tom application </span> Zoom <span>Text</span>.</p>
    </div>

</body>

5.gif


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">
          <p id="stars" style="background-color:
                #FF8080"><
span>&#9786;</span><span>&#9786;</span>
             <
span>&#9786;</span><span>&#9786;</span><span>&#9786;</span></p>
          <p id="title" contenteditable="true"><span style="background-color: #FF99FF">Cshorp</span><span
        style="background-color: #66FF99">Corner</span><span>.</span><span
      style="background-color: #00FFCC">Com</span></p>
    <p id="slogan" style="background-color: #CC0066"><span>Tom application </span> Zoom <span>Text</span>.</p>
  </div>
</body>
</
html>

Step 9 : Press Ctrl + F5 to run code in a browser.

 1.gif

 2.gif

 3.gif

 4.gif


Resources

Here is some useful resources :

Up Next
    Ebook Download
    View all
    Learn
    View all