Sunday, June 3, 2018

Stylish glowing Textbox design in ASP.Net easy tech tips

Stylish glowing Textbox design in ASP.net easy tech tips

This post describes some Textbox style process through CSS. Suppose we have TextBox control and want to glow this control during focus cursor on it. For it, we use CSS. Through it any control can easily modify with its stylish and professional look. So, SKOTechLearn describe the way to design Stylish glowing TextBox in ASP.Net.

Whenever we develop a web application and work on Textbox for input text, then we think about this control's looks designing with border style, color, font etc.
TextBox with Style Example:
Here, we will modify TextBox with 4 different ways.And there is also an output when modification process will complete.
TextBox Output with glowing design
TextBox Output
Add StyleSheet with CSS Code:
Suppose we drag 4 TextBox on webform. And add CSS file in your web project in ASP.Net like bellow.
Add StyleSheet in Webform for stylish process
Add StyleSheet in Webform
First, Right click on Project from "Solution Explorer" window, it will present a drop down menu.

Select “Add” option from it. Then select and click on “New Items..” option. This will show a Box for select any items for website development.

Here, we select “StyleSheet” and input Name as “TextboxStyle.css”, then press “Add” button.

Now, your created CSS file has been added to your project. Double click or press “Enter” Key to Open this code window, and write style code here.
Attach CSS File with WebForm:
But, if you want to perform your style code on that particular controls, you have to drag this CSS file in Webform's "Source" window.

You have to open you form in Source mode and drag this file just bellow on<Head> tag as mention in following image. 
CSS file Use in Form for stylish glowing design
CSS file Use in Form
You can copy this code:
<link href="TextboxStyle.css" rel="stylesheet" type="text/css" />

Text Style (1) :
Here, we will start from First TextBox1, suppose we assign its CSSClass as txtstyle and write code for it. Then write script for it as mention bellow.
 .txtstyle {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #FFFFFF no-repeat 2px 2px;
padding:1px 1px 1px 5px;
border:2px solid #9900FF;
}
 .txtstyle:focus {
width: 100px;
transition: all 0.30s ease-in-out;
border: 4px solid #9999FF;
}
When you write this script, it will show totally change style, when you focus on this control like bellow.
Text1 stylish design in ASP

Text Style (2) :
Now we modify second control for modifying through CSS. For TextBox2, assign its CssClass Name as Txtstyle2 and write code for it.
 .Txtstyle2[type=text], textarea {
transition: all 0.30s ease-in-out;
outline: none;
border: 1px solid #666666;
}
 .Txtstyle2[type=text]:focus, textarea:focus {
box-shadow: 0 0 12px #FF99CC;
border: 1px solid #FF6699;
}
When you write this script, it will show stylish look, when you focus on this control like bellow.
Text2 stylish Glowing design output
Text Style (3) :
After that, there is another CSS script to create control in its attractive look. Now, TextBox3 assign its CssClass Name as Txtstyle3 and write code for it.
 .Txtstyle3[type=text], textarea {
transition: all 0.30s ease-in-out;
outline: none;
border: 1px solid #666666;
}
 .Txtstyle3[type=text]:focus, textarea:focus {
box-shadow: 0px 0px 5px #66FF99;
padding: 2px 0px 2px 2px;
margin: 2px 1px 3px 1px;
border: 1px solid #009900;
}
This script will show another attractive look during focus on this control as mention bellow output.
Text3 stylish Glowing design output

Text Style (4) :
Now, come to last Text, suppose we drag TxtBox4 and assign its CssClass as Txtstyle4 and write script for it.
 .Txtstyle4 {
border: 1px solid #c4c4c4;
padding: 2px 2px 2px 2px;
border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
background-color: #F0F0FF;
}
 .Txtstyle4:focus {
outline: none;
border: 1px solid #7bc1f7;
box-shadow: 0px 0px 8px #7bc1f7;
background-color: #FFF2FF;
}
You can view the output of last box which is indicated bellow.
Text4 stylish Glowing design output
Try this yourself and give look to your control and proceed to design stylish glowing Textbox in ASP.Net easy tech tips with SKOTechLearn.

Also Learn about:

0 comments: