Two Color Stylish Text Field – CSS Tuts

Two Color Stylish Text Field – CSS Tuts

 
VIEW DEMO   DOWNLOAD SOURCE

Hey! wassup guys… today we are here with the new CSS Tutorial “CSS Tuts” in which we’re going to design a very good looking, awesome Text Field featuring only two colors. So with not much talking, we’ll going to start this Two Color Stylish Text Field Tutorial.

Its strictly recommended to see the “DEMO” before reading or going further to this tutorial

<input class="textbox" type="text" name="StyledTextField" placeholder="start writing here..."/>

I think that its a waste of time explaining the <input> tags. So now we’ll go further with the CSS part…

input {
  background: #9933CC;
  text-align: center;
  display: block;
  margin: auto;
  font-size: 50px;
  color: #AA66CC;
  width: 50%;
  padding: 10px;
  border: 5px solid #AA66CC;
  border-radius: 10px;
  transition: all 0.3s linear;
}

input:focus{
  background: #FFF;
  box-shadow: inset 0 0 20px #AA66CC; 
  transition: all 0.3s linear;
}

Here, you can see clearly that the css is applied on the <input> tag and input:focus (:focus defines the CSS when the particular item is focused. In our case when the text field is clicked and we’re ready to start typing). The major properties and there working are explained in the below table.

Property Working
padding Cell-Spacing inside the text field
border-radius The curves around the text field
border The thickness of the curved border
box-shadow: inset shadow inside (inset) the text field
transition The fading in and fading out linearly

Author Description

humanz

Our mission is to bring the affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world. - Follow @program_guide

There are 1 comments. Add yours

  1. 15th November 2013 | Godin says: Reply
    Really Loved this..

Leave a Reply to Godin Cancel Reply