Post
Ask Question

Create a Transparent Color Text Using HTML 5

Introduction

 
This is a simple application for beginners that shows how to create a transparent color text 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 transparent color text 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 transparent color text using HTML 5 and CSS tools.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Demo.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 "textcolor.html".
css.gif
 
html.gif
 
css2 
 
Step 3: In this step, we add a CSS file named demo.css. In the CSS we set font-family, font-size, the color of a transparent color text page. 
  • Right-click on the Solution Explorer.
  • Add-> Add New Item.
  • Add the style sheet.
  • Set the name of the style sheet is a "Demo.css".  
css.gif
 
Code
  1. body, p, td, textarea  
  2.   {  
  3.    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
  4.    font-size: 12px;  
  5.    line-height: 20px;  
  6.    color: #3c4e57;  
  7.      }  
  8.  body  
  9.   {  
  10.     padding: 10px;  
  11.    }  
  12. h1  
  13.  {  
  14.    margin-bottom: 10px;  
  15. } 
Step 4:  In this section, we set some CSS properties; they area the foreground and background of the transparent text.
 
Code
  1. <style type="text/css">  
  2.    body, p, td { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; color:Yellow; }  
  3.   .Plt { position: relative; height: 400px; }  
  4.   .Plt > div { width: 300px; height: 250px; position: absolute; padding: 40px; }  
  5.   .background { background: #5a4b53; }  
  6.   .foreground { left: 100px; top: 50px; color:Red; font-size: 25px; font-weight: bold; }  
  7.   #opacity .foreground { background: #5bdedb; opacity: 0.3; }  
  8.   #rgba .foreground { background: rgba(91,222,219, 6); }  
  9. </style> 
Step 5:  In this section, we set the text of the transparent color text application.
 
Code
  1. <body bgcolor="#ccccff">  
  2.     <h1>Tom Developed a Transparency Color Text Model</h1>  
  3.     <section id="content-area">  
  4.     <h1>Transparency using Opacity</h1>  
  5.     <div id="opacity" class="Plt">  
  6.     <div class="background"></div>  
  7.     <div class="foreground">HTML5 will be the new standard for HTML.  
  8.     <br />  
  9.     <br />  
  10.     <br/>  
  11.     HTML5 will be the new standard for HTML.</div>  
  12.    </div>  
  13.    <div style="clear: both"></div>  
  14.    <h1>Transparency using RGBA</h1>  
  15.    <div id="rgba" class="Plt">  
  16.    <div class="background"></div>  
  17.    <div class="foreground">HTML5 will be the new standard for HTML.  
  18.    <br />  
  19.    <br />  
  20.    <br   />  
  21.    HTML5 will be the new standard for HTML.</div>  
  22.   </div>  
  23.  </section>  
  24. </body> 
body.gif
 
Step 6:  The demo of a transparent color text code is given below.
 
Code
  1. <html>  
  2.     <head>  
  3.         <meta charset="utf-8" />  
  4.         <title>Tom Application</title>  
  5.         <link href="demo.css" rel="stylesheet" type="text/css" />  
  6.         <style type="text/css">  
  7.   
  8.    body, p, td { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; color:Yellow; }  
  9.   
  10.   .Plt { position: relative; height: 400px; }  
  11.   
  12.   .Plt > div { width: 300px; height: 250px; position: absolute; padding: 40px; }  
  13.   
  14.   .background { background: #5a4b53; }  
  15.   
  16.   .foreground { left: 100px; top: 50px; color:Red; font-size: 25px; font-weight: bold; }  
  17.   
  18.   #opacity .foreground { background: #5bdedb; opacity: 0.3; }  
  19.   
  20.   #rgba .foreground { background: rgba(91,222,219, 6); }  
  21.   
  22. </style>  
  23.         <body bgcolor="#ccccff">  
  24.             <h1>Tom Developed a Transparency Color Text Model</h1>  
  25.             <section id="content-area">  
  26.                 <h1>Transparency using Opacity</h1>  
  27.                 <div id="opacity" class="Plt">  
  28.                     <div class="background"></div>  
  29.                     <div class="foreground">HTML5 will be the new standard for HTML.  
  30.   
  31.       
  32.                         <br />  
  33.                         <br />  
  34.                         <br/>  
  35.   
  36.     HTML5 will be the new standard for HTML.  
  37.                     </div>  
  38.                 </div>  
  39.                 <div style="clear: both"></div>  
  40.                 <h1>Transparency using RGBA</h1>  
  41.                 <div id="rgba" class="Plt">  
  42.                     <div class="background"></div>  
  43.                     <div class="foreground">HTML5 will be the new standard for HTML.  
  44.   
  45.      
  46.                         <br />  
  47.                         <br />  
  48.                         <br   />  
  49.   
  50.    HTML5 will be the new standard for HTML.  
  51.                     </div>  
  52.                 </div>  
  53.             </section>  
  54.         </body>  
  55.     </html> 
Step 7:  Press Ctrl + F5 to run the application in the browser.
 
Output
 
out.gif
 
out2.gif
 
Resources
 
Here are some useful resources


Similar Articles