In this article, we are going to develop skype like textbox using CSS
Create
nice looking Web form using CSS and HTML
In this article, we are going to create
user interface like Skype interface using HTML and CSS. It's nice to know a bit of both and how to use them.
Here, at first we will create one sample form and
will beautify this form using CSS. If
you are totally unaware of CSS and HTML then please check line introductions
of those technologies below:
HTML:
It’s a markup language used to create web application. Open any website then
right click anywhere and go to view source option, most probably you will see lots
of codes. Those are nothing but HTML code.
CSS:
CSS stands for Cascading style sheet. It is not a programming language but a
scripting language and used to beautify document.
Here we will see how to use them to design beautiful
web form
Create
table using HTML
At first we will create one table using HTML like
below
<table width="100%" align="left">
<tr>
<td width="117" align="right">My name:</td>
<td width="165"><input name="name" type="text" class="inputbox" size="30" id="name" autocomplete="off"></td>
</tr>
<tr>
<td align="right">My pinclde:</td>
<td> <input name="pincode" id="pincode" type="text" class="inputbox"
size="30" autocomplete="off"></td>
</tr>
<tr>
<td align="right">My mobile number:</td>
<td> <input name="mobile" id="mobile" type="text" class="inputbox" size="30"
autocomplete="off"></td>
</tr>
<tr>
<td align="right">My e-mail ID:</td>
<td> <input name="email" id="email" type="text" class="inputbox" size="30"
autocomplete="off"></td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="submit" class="myButton" value="Submit">
<input type="reset" class="myButton" value="Reset">
</td>
</tr>
<tr>
<td></td>
<td>
<div id="ERROR" style="color:#055A5F">
</div>
</td>
</tr>
</table>
This is our table containing form element. Now we
will add few lines of CSS in <HEAD> section of HTML document to make it
beautiful
Add
CSS style in HEAD section of HTML Page
Add this style sheet to decorate all text boxes and two
buttons containing in form.
/* CSS Document */
.myButton
{
-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
box-shadow:inset 0px 1px 0px 0px #dcecfb;
background:-webkit-gradient(linear, left top, left bottom,
color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa',
endColorstr='#80b5ea',GradientType=0);
background-color:#bddbfa;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px
solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
padding:4px 19px;
text-decoration:none;
text-shadow:0px 0px 0px #528ecc;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom,
color-stop(0.05, #80b5ea), color-stop(1, #bddbfa));
background:-moz-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
background:-webkit-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
background:-o-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
background:-ms-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea',
endColorstr='#bddbfa',GradientType=0);
background-color:#80b5ea;
}
.myButton:active {
position:relative;
top:1px;
}
/* Text box Style */
.inputbox{
border-radius:5px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
border: 1px
solid #999;
}
.inputbox:focus{
background-color:#FFF;
border: 1px
solid #07c;
box-shadow: 0
0 10px #07c;
}
And you will get below result
Conclusion:
This is the example of sample form beautification using CSS. Hope this is helpful