Sunday, November 20, 2011

input box css

Forms are an essential part of interaction on the Internet but they can look rather drab.modify the inputbox in my new module of css:



A simple input style property with css2:
CSS:
input .submit
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}



.button {
    border: none;
    background: url('buttnbg.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('buttnbg') no-repeat bottom left;
    padding: 2px 8px;
}

HTML:
  ‹ input type="submit" value="go!" class="submit" /›

CSS3 button style: It's a simple button we can create with transparent PNG  gradient background, border, border-radius, box-shadow, and text-shadow.

    .buttoncss3{
    background: #222 url(buttonbg.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    position: relative;
    cursor: pointer;
    }


The CSS3 property included 
  1. moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  2. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  3. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  4. border-bottom: 1px solid rgba(0,0,0,0.25); 



 We can also include gradient color with CSS3:

.button{
 color: #fef4e9;
 border: solid 1px #da7c0c;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:hover
 {
 background: #f47c20;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top,  #f88e11,  #f06015);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
 
CSS# Gradient: background: #0060df;
background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
 background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );
Example2:
.button2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: solid 1px #CCC;
    background: #ba4742;
    text-shadow: 0px 1px 0px #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 1px 3px #111;
    -moz-box-shadow: 3px 3px 1px #999;
    -webkit-box-shadow: 3px 3px 1px #999;
    cursor: pointer;
}
.button2:hover {
    background: #a33f3a;
}
Example3:
.button3 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #000;
    text-decoration: none;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    background: #0060df;
    background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );
    cursor: pointer;
}
.button3:hover {
    background: -moz-linear-gradient(90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
    background: -webkit-gradient(linear, left bottom, left top, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78e2ff', endColorstr='#3944a8', GradientType=0 );
}
Example4:
.button4 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #000;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #FFF;
    text-decoration: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #ffcc66;
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffbc47 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #ffbc47), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc66', endColorstr='#ffe6b6', GradientType=0 );
    cursor: pointer;
}
.button4:hover {
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffe6b6 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #fff), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b6', endColorstr='#ffe6b6', GradientType=0 );
}
 
Example5:
 
.button5 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 50px 5px 50px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #666;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px #111;
    -webkit-box-shadow: 0 1px 3px #111;
    box-shadow: 0 1px 3px #111;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #64a724;
    background: -moz-linear-gradient(top, #64a724 0%, #579727 50%, #58982a 51%, #498c25 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#64a724), to(#498c25), color-stop(0.4, #579727), color-stop(0.5, #58982a), color-stop(.9, #498c25), color-stop(0.9, #498c25));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a724', endColorstr='#498c25', GradientType=0 );
    cursor: pointer;
}
.button5:hover {
    border: 1px solid #FFF;
}
 
 
Example6:
 
.button6 {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 22px;
    color: #443333;
    padding: 5px 50px 5px 50px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #CCC;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px #111;
    -webkit-box-shadow: 0 1px 3px #111;
    box-shadow: 0 1px 3px #111;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #696969;
    background: -moz-linear-gradient(top, #d1d1d1 10%, #7b7b7b 60%, #696969 80%, #696969 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#7b7b7b), color-stop(0.4, #d1d1d1), color-stop(0.8, #7b7b7b), color-stop(.9, #696969), color-stop(0.9, #696969));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#7b7b7b', GradientType=0 );
    cursor: pointer;
}
.button6:hover {
    color: #000;
}
 
Example7 input field style:
 
input{  
        padding: 5px;  
        font-size: 15px;  
        text-shadow: 0px 1px 0px #fff;  
        outline: none;  
        background: -webkit-gradient(linear, left top, left bottombottom,
 from(#bcbcbe), to(#ffffff));  
        background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);  
    }   
input:focus {  
        -webkit-box-shadow: 0px 0px 5px #007eff;  
        -moz-box-shadow: 0px 0px 5px #007eff;  
        box-shadow: 0px 0px 5px #007eff;  
    }  
How to Use above example in your page? 
First, copy the .button style and paste css page (external on internal 
area-in header between style tag).
and in HTML element where you want the button to be 
(eg.  "submit" name="submit1" value="Submit" class="button" />). 
You can call CSS classes to any element such as link, p, span, div, 
input, button, etc.
 
Note: CSS3 button works  following browsers.
  1. Mozilla Firefox – 3.6.14 : Excellent
  2. Google Chrome – 9.0 : Excellent
  3. Safari – 5.0.3 : Excellent
  4. Opera 11.01 : Good
  5. Internet Explorer 8 : Poor
You can modify these examples to create unlimited text and box shadow, 
linear gradient and radius effects.

No comments: