Light UI Kit

by voodoomonkey

HTML

<body>
    	<h1 style=" font-size: 2em; text-align: center; line-height: 1.2em;">Light UI Kit PSD / HTML CSS</h1>

    <button>I am Button</button>
    <button class="threeD">Button 3D</button>
    <button class="small">I am Button</button>
    <button class="smallthreeD">Button 3D</button>
    <input type="text" placeholder="Input Text" />
    <textarea rows="4" cols="30">Text area</textarea>
    <input type="radio" name="foo" />
    <input type="radio" name="foo" checked/>
    <input type="radio" name="foo" />
    <input type="checkbox" checked/>
    <input type="checkbox" />
    <input type="checkbox" class="toggle" />
    <p>This is <a class="tooltip" href="#">tooltop<span>This is tooltip :-)</span></a>, you can hover link to see!</p>	<a class="tag" href="#">shopping</a>
	<a class="tag" href="#">pattern</a>
	<a class="tag" href="#">design</a>

    <input type="range" min="0" max="100" step="1" value="40" />
    <input type="range" class="range2" min="0" max="100" step="20" value="40" />
    <progress max="100" value="60">
        <p><strong>Progress: 60% done.</strong>
        </p>
    </progress>
    <!-- for Safari -->
    <br/>
    <p class="progress"></p>
    <br/>
    <p><strong>This is List Bullet style</strong>
    </p>
    <ul class="bullet1">
        <li>Line one</li>
    </ul>
    <ul class="bullet2">
        <li>Line one</li>
    </ul>
    <ul class="bullet3">
        <li>Line one</li>
    </ul>
    <ul class="bullet4">
        <li>Line one</li>
    </ul>

CSS

html {
    background: -webkit-radial-gradient(hsla(0, 0%, 0%, .25) 15%, transparent 15%) 0 0, -webkit-radial-gradient(hsla(0, 0%, 0%, .25) 15%, transparent 15%) 8px 8px, -webkit-radial-gradient(hsla(0, 0%, 100%, .5) 15%, transparent 20%) 0 1px, -webkit-radial-gradient(hsla(0, 0%, 100%, .5) 15%, transparent 20%) 8px 9px;
    background-color: #ccc;
    background-size: 16px 16px;
    display: block;
    margin: 0 auto;
    padding: 0 50px;
    width: 300px;
}
/*====================== Style Light UI ======================*/

/* Font */
 @font-face {
    font-family:"Open Sans", sans-serif;
    src: url('http://fonts.googleapis.com/css?family=Open+Sans');
}
h1, input, button, textarea, progress, p, a, ul, li {
    font-family:"Open Sans", sans-serif;
    font-size: 10pt;
    color: #666;
    letter-spacing: normal;
    text-indent: 0;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .75);
    margin: 10px 2px;
}
/* Button */
 button, .button, input[type="button"] {
    background-color: #f4f4f4;
    background-image: -webkit-linear-gradient(90deg, hsla(0, 0%, 0%, .05), hsla(0, 0%, 0%, .01));
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .25), 0 1px 2px hsla(0, 0%, 0%, 0.5);
    border-radius: 3px;
    border: none;
    cursor: pointer;
    height: 48px;
    padding: 0 30px 0 30px;
    -webkit-transition: .1s;
}
button:hover, .button:hover, input[type="button"]:hover {
    background-image: -webkit-linear-gradient(90deg, hsla(0, 0%, 0%, .08), hsla(0, 0%, 0%, .03));
}
button:active, .button:active, input[type="button"]:active {
    background-image: -webkit-linear-gradient(90deg, hsla(0, 0%, 0%, .15), hsla(0, 0%, 0%, .12));
    color: #333;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .25);
}
button.threeD, .button .threeD, input[type="button"].threeD {
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .25), inset 0 -4px 0 hsla(0, 0%, 0%, .15), 0 1px 2px hsla(0, 0%, 0%, 0.5);
    height: 52px;
    padding-bottom: 4px;
}
button.threeD:active, .button .threeD:active,...