Post
Ask Question

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 an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application.

Step 1. First Open an HTML editor such as Notepad.

  • Open start->Notepad.
  • The name of the editor is "Text."
    notepad.gif

Step 2. Create a Folder on a desktop.

  • Right-click on desktop->new->Folder.
  • The name of the folder is "Shadows".
    folder.gif

Step 3. Open Visual Studio.

  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "animation.aspx".
    new application.gif
    openapplication.gif

Step 4. Add an 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 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>☺</span>
      <span>☺</span>
      <span>☺</span>
      <span>☺</span>
      <span>☺</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 defined 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>☺</span>
        <span>☺</span>
        <span>☺</span>
        <span>☺</span>
        <span>☺</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 are some useful resources.


Similar Articles