Create a Transparent Color Text Using HTML 5

Manish Singh
12y
17.8k
0
0

Article

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 a HTML 5 that is used to show the image and text in a HTML 5 applications. 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".

Step 2: Add a 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".

Step 3: In this step we add a CSS file named demo.css. In the CSS we set font-family, font-size, color of a transparent color text page.

Right-click on the Solution Explorer.
Add-> Add New Item.
Add style sheet.
Set the name of the style sheet is a "Demo.css".

Code

body, p, td, textarea
{

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 12px;

line-height: 20px;

color: #3c4e57;

}

body
{

padding: 10px;

}

h1
{

margin-bottom: 10px;

}

Step 4: In this section we set some CSS properties; they area the foreground and background of the transparent text.

Code

body, p, td { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; color:Yellow; }

.Plt { position: relative; height: 400px; }

.Plt > div { width: 300px; height: 250px; position: absolute; padding: 40px; }

.background { background: rgb(90,75,83); }

.foreground { left: 100px; top: 50px; color:Red; font-size: 25px; font-weight: bold; }

#opacity .foreground { background: rgb(91,222,219); opacity: 0.3; }

#rgba .foreground { background: rgba(91,222,219, 6); }

</style>

Step 5: In this section we set the text of the transparent color text apllication.

Code

<h1>Tom Developed a Transparency Color Text Model</h1>

<h1>Transparency using Opacity</h1>

<div class="foreground">HTML5 will be the new standard for HTML.

<br />

<br/>

HTML5 will be the new standard for HTML.</div>

</div>

<h1>Transparency using RGBA</h1>

<div class="foreground">HTML5 will be the new standard for HTML.

<br />

HTML5 will be the new standard for HTML.</div>

</div>

</section>

</body>

Step 6: The demo of a transparent color text code is a given below.

Code

<html>

<head>

<title>Tom Application</title>

body, p, td { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; color:Yellow; }

.Plt { position: relative; height: 400px; }

.Plt > div { width: 300px; height: 250px; position: absolute; padding: 40px; }

.background { background: rgb(90,75,83); }

.foreground { left: 100px; top: 50px; color:Red; font-size: 25px; font-weight: bold; }

#opacity .foreground { background: rgb(91,222,219); opacity: 0.3; }

#rgba .foreground { background: rgba(91,222,219, 6); }

</style>

<h1>Tom Developed a Transparency Color Text Model</h1>

<h1>Transparency using Opacity</h1>

<div class="foreground">HTML5 will be the new standard for HTML.

<br />

<br/>

HTML5 will be the new standard for HTML.</div>

</div>

<h1>Transparency using RGBA</h1>

<div class="foreground">HTML5 will be the new standard for HTML.

<br />

HTML5 will be the new standard for HTML.</div>

</div>

</section>

</body>
</html>

Step 7: Press Ctrl + F5 to run the application in the browser.

Output

Resources

Here is some useful resources

Up Next

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all