Post
Ask Question

Create Glowing Text Using HTML 5

Introduction

 
This is a simple application for beginners that shows how to make a text glow on a mouseover event 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 glow on a mouseover event. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. I hope this article helps to understand how to make an application with text that glows on a mouseover event using a CSS3 and HTML 5 tools.
 
Step 1: First Open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Glory."
notepad.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Text".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "TextGlory.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 "Html.html".
addhtml.gif
 
html.gif
 
Step 5: In this step, we define the body part of a title.
 
Code
  1. <body>  
  2.     <div class="text-glow">  
  3.         <a href="#">  
  4.             <h1>MCN Solution</h1>  
  5.             <h1>MCN professional</h1>  
  6.             <h1>CsharpCorner</h1>  
  7.         </a>  
  8.     </div>  
  9. </body>  
1.gif
 
Step 6: In the CSS file we define the Text Glow class that sets all properties on the font; that is font family, font size and color of a font.
 
Code
  1. .text-glow {  
  2.   font-size: 4em;  
  3.   color: Green;  
  4.   font-family: Arial;  
  5. }  
Step 7: Now in this step we define a hover, focus and active attributes of a text glow class.
 
Code
  1. .text-glow:hover,.text-glow:focus.text-glow:active {  
  2.   ctx-stroke-width: 5.3px;  
  3.   ctx-stroke-color: Green;  
  4.   ctx-fill-color: Green;  
  5.   text-shadow: 1px 0px 20px Red;  
  6.   ctx-transition: width 0.3s;  
  7.   transition: width 0.3s;  
  8.   moz-transition: width 0.3s;  
  9.   o-transition: width 0.3s;  
  10. }  
Step 8: In the above step we define a hover, focus and active attributes of a text glow class. Now in the second phase, we define link attributes.
 
Code 
  1. .text-glow a {  
  2.   ctx-transition: all 0.3s ease-in;  
  3.   ctx-transition: all 0.3s ease-in;  
  4.   M-transition: all 0.3s ease-in;  
  5.   O-transition: all 0.3s ease-in;  
  6.   text-decoration: none;  
  7.   color: white;  
  8. }  
Step 9: This step we set the transition effect, which is very popular with CSS3 designers. To implement this effect on your page simply set the div class and add an href tag around the text that you want to link and glow.
 
Code
  1. <body>  
  2.     <div class="text-glow">  
  3.         <a href="#"></a>  
  4.     </div>  
  5. </body>  
Step 10: The complete code of a text glow application is given below.
 
Code
  1. <html>  
  2.     <header>  
  3.         <style>  
  4. .text-glow  
  5. {  
  6.     font-size:4em;  
  7.     color:Green;  
  8.     font-family:Arial;  
  9. }  
  10. .text-glow:hover,  
  11. .text-glow:focus  
  12. .text-glow:active  
  13. {  
  14. ctx-stroke-width: 5.3px;  
  15. ctx-stroke-color: Green;  
  16. ctx-fill-color: Green;  
  17. text-shadow: 1px 0px 20px Red;  
  18. ctx-transition: width 0.3s;   
  19. transition: width 0.3s;  
  20. moz-transition: width 0.3s;   
  21. o-transition: width 0.3s;   
  22. .text-glow a  
  23. {  
  24.  ctx-transition: all 0.3s ease-in;   
  25.  ctx-transition: all 0.3s ease-in;  
  26.  M-transition: all 0.3s ease-in;   
  27.  O-transition: all 0.3s ease-in;   
  28.  text-decoration:none;  
  29.  color:white;  
  30. }  
  31. body  
  32. {  
  33.     background-color: #000000;  
  34. }  
  35. </style>  
  36.     </head>  
  37.     <body>  
  38.         <div class="text-glow">  
  39.             <a href="#">  
  40.                 <h1>MCN Solution</h1>  
  41.                 <h1>MCN professional</h1>  
  42.                 <h1>CsharpCorner</h1>  
  43.             </a>  
  44.         </div>  
  45.     </body>  
Step 11: Press ctrl+f5 run application on a browser.
 
Output
 
 output.gif
 
 Clipboard06.gif
 
Resources
 
Here are some useful resources:


Similar Articles