Step 1 : First Open a HTML editor such as Notepad.
- Open start->Notepad.
- The name of editor is "Text".
Step 2 : Create a Folder on a desktop.
- Right-click on desktop->new->Folder.
- Name of folder is "Shadows".
Step 3 : Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name of "animation.aspx".
Step 4 : Add a 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".
Step 5 : Add a css file to the application; name it style1.css. In the css we set all the properties of a title spam, hover, focus and selection.
Code
#Title {
font-family: Helvetica, Geneva, sans-serif;
}
#Title:focus
{
outline: none;
}
#Title span
{
vertical-align: middle;
line-height: 1.5em;
-webkit-transition: font-size 2s cubic-bezier(0, 1, 0, 1);
}
#Title span:hover
{
font-size: 4em; line-height: 1em;
-webkit-transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);
}
#Title span:active
{
font-size: 1em;
text-shadow: none;
}
#Title span::selection
{
background-color:Blue;
}
Step 6 : Set the body part of a text shadows application.
Code
<body bgcolor="#00cc99">
<div id="wrapper">
<p id="stars" style="background-color:#FF8080"><span>☺</span> <span>☺</span><span>☺</span>
<span>☺</span><span>☺</span></p>
<p id="title" contenteditable="true"><span style="background-color: #FF99FF">Cshorp</span><span
style="background-color: #66FF99">Corner</span><span>.</span><span
style="background-color: #00FFCC">Com</span></p>
<p id="slogan" style="background-color: #CC0066"><span>Tom application </span> Zoom <span>Text</span>.</p>
</div>
</body>
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
#wrapper {
text-align: center;
color: #000;
font-weight:normal;
font-size: 50px;
padding: 50px 0;
}
Step 8 : The complete code of text shadows application is define below.
Code
<html>
<head>
<title>Tom application</title>
<link rel="stylesheet" type="text/css" href="Style2.css"/>
</head>
<body bgcolor="#00cc99">
<div id="wrapper">
<p id="stars" style="background-color:
#FF8080"><span>☺</span><span>☺</span>
<span>☺</span><span>☺</span><span>☺</span></p>
<p id="title" contenteditable="true"><span style="background-color: #FF99FF">Cshorp</span><span
style="background-color: #66FF99">Corner</span><span>.</span><span
style="background-color: #00FFCC">Com</span></p>
<p id="slogan" style="background-color: #CC0066"><span>Tom application </span> Zoom <span>Text</span>.</p>
</div>
</body>
</html>
Step 9 : Press Ctrl + F5 to run code in a browser.
Resources
Here is some useful resources :