Blog

Twitter Style(glow) Textbox Using Css3 new features box-shadow

Posted by Vikas Ahlawat Blogs | JavaScript, CSS May 13, 2012
Here in this article we will create twitter style textbox (glow) by using CSS3.
Intro:-
Here in this article we will create twitter style textbox (glow) by using CSS3. Here we put the prient screens of every step from starting to end if you want to make it then you can take help of these images.
If facing any problem then put comment

1. This is twitter Textbox. Our goal is to give same look to our textbox.


2. First open VS2010 and add a new asp.net webapp. , Now go inside style folder and open stylesheet and enable CSS 3.0


 3. Now edit the styleSeet with the following code.


If you want to copy css code then this is the code:-

input.twitterStyleTextbox {
    border: 1px solid #c4c4c4;
    width: 180px;
    height: 18px;
    font-size: 13px;
    padding: 4px 4px 4px 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input.twitterStyleTextbox:focus {
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}?


4. Now user this styleseet in your Source code.

5. Implement cssclass on textboxes

6. Now your textbox will look like 

post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter