Post
Ask Question

Create Transformation Text Shape Using HTML5

Introduction

 
This is a simple application for beginners that shows how to create a Text Transformation Shape using HTML5 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 Text Transformation Shape applications. 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. I hope this article helps to develop a Text Transformation Shape using HTML 5 and CSS tools.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Text.aspx".
new.gif
 
webapplication.gif
 
Step 2: Add an HTML file to your web application.
  • Right-click on the Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "shape.html".
css.gif
 
html.gif
 
Step 3: In this step, we add a CSS file named color.css. In the CSS we set font-family, font-size, the color of Text Transformation Shape. 
  • Right-click on the Solution Explorer.
  • Add-> Add New Item.
  • Add the style sheet.
  • Set the name of the style sheet is a "color.css".  
css.gif
 
css2.gif
 
Code
  1. body, p, td, textarea  
  2. {  
  3.   font-family: "Helvetica Neue";  
  4.   font-size: 10px;  
  5.   line-height: 10px;  
  6.   color:Blue;  
  7.    }  
  8. body  
  9. {  
  10.  padding: 20px;  
  11. }  
  12.  h1  
  13. {  
  14.        margin-bottom: 20px;  
  15. } 
Step 4: In this section, we set a text style of a text transformation page. In <style> tag we define a height, width, font-size, border, margin of a text.
 
Code
  1.  .Rotate  
  2.  {  
  3.   width: 300px  
  4.     }  
  5.  .Rotate ul  
  6.  {  
  7.   list-style: none;  
  8.   }  
  9.  .Rotate a  
  10.  {  
  11.   width: 100px;  
  12.   height: 60px;  
  13.   font-size: 32px;  
  14.   border: 1px #900 solid;  
  15.   margin: 0 40px 40px 0;  
  16.   text-align: center;  
  17.   padding-top: 40px;  
  18.   float:right;  
  19.   z-index: 1;  
  20.   position: relative;  
  21.   text-decoration: none;  
  22.   color:Red;  
  23. }       
Step 5: In this section, we set a mouse hover event that performs user clicks on the text after that change the shape of text.
 
Code
  1. .Rotate a:hover  
  2. {  
  3.   border: 1px #000 solid;  
  4.   background:#00FFFF;  
  5.   z-index: 2;  
  6.  -webkit-transform:scale(3);  
  7.  -moz-transform:scale(3);  
  8.  -o-transform:scale(3);  
  9.  } 
Step 6: Now in this section we define a text body of a text transformation page.
 
Code
  1. <body bgcolor="#66ffcc">  
  2.   <h1>Button Rotation Developed by Tom</h1>  
  3.   <section class="Rotate">  
  4.   <ul>  
  5.   <li><a href="">C</a></li>  
  6.   <li><a href="">C#</a></li>  
  7.   <li><a href="">Java</a></li>  
  8.   <li><a href="">Php</a></li>  
  9.   <li><a href="">WCF</a></li>  
  10.   <li><a href="">WPF</a></li>  
  11.   <li><a href="">WFF</a></li>  
  12.   <li><a href="">LINQ</a></li>  
  13.   </ul>  
  14.   <div style="clear: both;"></div>  
  15.   </section>  
  16. </body> 
body.gif
 
Step 7: The demo of a text transformation code is given below.
 
Code
  1. <html>  
  2. <head>  
  3. <title>Tom application</title>  
  4. <link href="demo.css" rel="stylesheet" type="text/css" />  
  5. <style>  
  6. .Rotate  
  7.  {  
  8.   width: 300px  
  9.     }  
  10.  .Rotate ul  
  11.  {  
  12.   list-style: none;  
  13.   }  
  14.  .Rotate a  
  15.  {  
  16.   width: 100px;  
  17.   height: 60px;  
  18.   font-size: 32px;  
  19.   border: 1px #900 solid;  
  20.   margin: 0 40px 40px 0;  
  21.   text-align: center;  
  22.   padding-top: 40px;  
  23.   float:right;  
  24.   z-index: 1;  
  25.   position: relative;  
  26.   text-decoration: none;  
  27.   color:Red;  
  28. }       
  29. .Rotate a:hover  
  30. {  
  31.   border: 1px #000 solid;  
  32.   background:#00FFFF;  
  33.   z-index: 2;  
  34.  -webkit-transform:scale(3);  
  35.  -moz-transform:scale(3);  
  36.  -o-transform:scale(3);  
  37.  }  
  38.   </style>  
  39. </head>  
  40. </html> 
Step 8: Press Ctrl + F5 to run the application in a browser.
 
Output
 
out.gif
 
out1.gif
 
out2.gif
 
out3.gif
 
Resources
 
Here are some useful resources:


Similar Articles