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
  1. #Title {  
  2.   font-family: Helvetica, Geneva, sans-serif;  
  3. }  
  4. #Title:focus {  
  5.   outline: none;  
  6. }  
  7. #Title span {  
  8.   vertical-align: middle;  
  9.   line-height: 1.5em;  
  10.   -webkit-transition: font-size 2s cubic-bezier(0, 1, 0, 1);  
  11. }  
  12. #Title span:hover {  
  13.   font-size: 4em;  
  14.   line-height: 1em;  
  15.   -webkit-transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);  
  16. }  
  17. #Title span:active {  
  18.   font-size: 1em;  
  19.   text-shadow: none;  
  20. }  
  21. #Title span::selection {  
  22.   background-color: Blue;  
  23. }  
Step 6: Set the body part of a text shadows application.
 
Code
  1. <body bgcolor="#00cc99">  
  2.     <div id="wrapper">  
  3.         <p id="stars" style="background-color:#FF8080">  
  4.             <span>☺</span>  
  5.             <span>☺</span>  
  6.             <span>☺</span>  
  7.             <span>☺</span>  
  8.             <span>☺</span>  
  9.         </p>  
  10.         <p id="title" contenteditable="true">  
  11.             <span style="background-color: #FF99FF">Cshorp</span>  
  12.             <span  
  13.                   style="background-color: #66FF99">Corner</span>  
  14.             <span>.</span>  
  15.             <span  
  16.                 style="background-color: #00FFCC">Com</span>  
  17.         </p>  
  18.         <p id="slogan" style="background-color: #CC0066">  
  19.             <span>Tom application </span> Zoom   
  20.             <span>Text</span>.  
  21.         </p>  
  22.     </div>  
  23. </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
  1. #wrapper {  
  2.   text-align: center;  
  3.   color: #000;  
  4.   font-weight: normal;  
  5.   font-size: 50px;  
  6.   padding: 50px 0;  
  7. }  
Step 8: The complete code of text shadows application is defined below.
 
Code
  1. <html>  
  2.     <head>  
  3.         <title>Tom application</title>  
  4.         <link rel="stylesheet" type="text/css" href="Style2.css"/>  
  5.     </head>  
  6.     <body bgcolor="#00cc99">  
  7.         <div id="wrapper">  
  8.             <p id="stars" style="background-color:  
  9.                 #FF8080">  
  10.                 <span>☺</span>  
  11.                 <span>☺</span>  
  12.                 <span>☺</span>  
  13.                 <span>☺</span>  
  14.                 <span>☺</span>  
  15.             </p>  
  16.             <p id="title" contenteditable="true">  
  17.                 <span style="background-color: #FF99FF">Cshorp</span>  
  18.                 <span   
  19.         style="background-color: #66FF99">Corner</span>  
  20.                 <span>.</span>  
  21.                 <span   
  22.       style="background-color: #00FFCC">Com</span>  
  23.             </p>  
  24.             <p id="slogan" style="background-color: #CC0066">  
  25.                 <span>Tom application </span> Zoom   
  26.                 <span>Text</span>.  
  27.             </p>  
  28.         </div>  
  29.     </body>  
  30. </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