CSS3 UI Kit

by voodoomonkey

HTML

<div id="search-box">
    <form id="search-form" action="#">
        <input type="text" id="search-input" name="search_text" placeholder="Search..." maxlength="140">
        <input id="search-button" type="submit" name="search_button" value="&Alpha;&Omega;" />
    </form>
</div>
<div id="file-upload">
    <form id="file-form">
        <input id="file-button" type="file" name="upload" />
    </form>
</div>
<div id="r-b">
    <button id="rectangular-button">Button</button>
</div>
<div id="c-b">
    <button id="circular-button">Button</button>
</div>
<div id="dropdown">
    <select name="select" id="dropdown-select">
        <option class="dropdown-option">-- Please select --</option>
        <option value="google" class="dropdown-option">Google</option>
        <option value="facebook" class="dropdown-option">Facebook</option>
        <option value="twitter" class="dropdown-option">Twitter</option>
    </select>
</div>
<div id="pagination">
    <table id="pagination-table">
        <tbody id="pagination-body">
            <tr id="pagination-text">
                <td id="pagination-numbers"> <a href="#" class="pagination-number previous">Previous</a>
 <a href="#" class="pagination-number">1</a>
 <a href="#" class="pagination-number current" title="You are here">2</a>
 <a href="#" class="pagination-number">3</a>
 <a href="#" class="pagination-number">4</a>
 <a href="#" class="pagination-number dots">...</a>
 <a href="#" class="pagination-number">10</a>
 <a href="#" class="pagination-number">11</a>
 <a href="#" class="pagination-number next">Next</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="radio">
    <label>
        <input type="radio" class="radio-button">
    </label>
    <label>
        <input type="radio" class="radio-button">
    </label>
    <label>
        <input type="radio" class="radio-button" checked>
    </label>
</div>
<div id="checkboxes">
    <label>
        <input type="checkbox" class="checkbox tick">
 ...

CSS

/*
Title: CSS3 UI Kit
Author: Matt Gentile
Author URL: http://icondeposit.com
Documentation URL: http://icondeposit.com
Download URL: http://icondeposit.com
*/

/* Start Reset CSS */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End Reset CSS */

/* Start Basic Elements */
 html {
    background: #f2f2f2 url(images/bg.png);
    width: 100%;
    height: 100%;
}
body {
    width: 400px;
    height: auto;
    position: relative;
    margin: 0 auto;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 17px;
    top: 150px;
}
a {
    cursor: pointer;
    outline: none;
    text-decoration: none;
}
::-moz-selection {
    color: #fff;
    background: rgba(191, 230, 251, .50);
    text-shadow: none;
}
::selection {
    color: #fff;
    background: rgba(191, 230, 251, .50);
    text-shadow: none;
}
/* End Basic Elements */

/* Start Search Box */
 #search-box {
    width: 200px;
    height: 28px;
    margin: 0;
    position: absolute;
    display: block;
    top: 20px;
    left: 0px;
}
#search-form {
   ...

JavaScript

$(function () {
    $("#slider").slider({
        range: "min",
        value: 5,
        min: 1,
        max: 50,
        slide: function (event, ui) {
            $("#amount").val("%" + ui.value);
        }
    });
    $("#amount").val("%" + $("#slider").slider("value"));
});
$(function () {
    $("#slider2").slider({
        range: "min",
        value: 46,
        min: 1,
        max: 50,
        slide: function (event, ui) {
            $("#amount").val("%" + ui.value);
        }
    });
    $("#amount").val("%" + $("#slider2").slider("value"));
});
$(function () {
    $("#slider3").slider({
        range: "min",
        value: 5,
        min: 1,
        max: 50,
        slide: function (event, ui) {
            $("#amount").val("%" + ui.value);
        }
    });
    $("#amount").val("%" + $("#slider3").slider("value"));
});
$(function () {
    $("#slider4").slider({
        range: "min",
        value: 46,
        min: 1,
        max: 50,
        slide: function (event, ui) {
            $("#amount").val("%" + ui.value);
        }
    });
    $("#amount").val("%" + $("#slider4").slider("value"));
});