• Dark Login Form


            <label for="username">Username</label>
            <input type="text" placeholder="User name">
            <label for="password">Password</label>
            <input type="password" placeholder="Password">
                <label for="test">Test</label>
            <input type="test" placeholder="Test">
        <div class="buttons">
            <input type="submit" value="Log in">
  • clear kendo autocomplete #18 is the latest revision

    jQuery 1.7.1, HTML, CSS, JavaScript

    $(document).ready(function () {    
        var ds = new kendo.data.DataSource({data: createRandomData(50)})
        //create AutoComplete UI component
        var autoComplete = $("#input").kendoAutoComplete ...
  • grid popup template with autoComplete #81 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

    var data = createRandomData(50);
    var autoCompleteDS = new kendo.data.DataSource({
        data: [
            {firstName: "Alex"},
            {firstName: "Alice"},
            {firstName: "Antony"},
            {firstName: "Anne"},
            {firstName ...
  • Kendo UI

    jQuery + Kendo UI + MockJax

    (function() {
        $("#create").on("click", function() {
            // add them item to the table        
            $("#expenses").append("<tr><td>" + $("#type option:selected").text() + 
                                  "</td><td>" + $("#merchant").val() + 
                                  "</td><td>" + $("#amount ...</td></tr>
  • Shelves

    1Password inspired shelves with HTML and CSS More fun at: http://gplus.to/allusis

    <div class="shelf"><!-- shelf wrapper begin -->
      <div class="row" style="border-top:8px solid #444;"><!-- row begin -->
        <div class="border">
          <div class="inner">Content</div><!-- content here -->
      </div><!-- row end -->
      <div class="row">
        <div class="border">
          <div class="inner">&nbsp;</div>
      <div class="row">
        <div class="border">
          <div class="inner">&nbsp;</div>
      <div class="row">
        <div class="border">
          <div class="inner">&nbsp;</div>
    </div><!-- shelf wrapper end -->
  • The Lifty Div

    A simple chunk of code for a CSS ribbon effect, and a little something to lift your div off the background.

    <div class="section">
      <div class="ribbon-wrapper">
        <div class="ribbon-front">
          <h1>The lifty div</h1>
          <h2>A story about a div that refused to be two-dimensional</h2>
        <div class="ribbon-edge-topleft"></div> 
        <div class="ribbon-edge-topright"></div> 
        <div class="ribbon-edge-bottomleft"></div> 
        <div class="ribbon-edge-bottomright"></div> 
        <div class="ribbon-back-left"></div> 
        <div class="ribbon-back-right"></div> 
      <div class="info">
          <div class="authored">
          <div class="date">November 21, 2011 - 14:14 EST</div>
          <div class="person"><a href="#">Tony ...</a></div></div></div></div>
  • Drop Caps

    Styling the first letter of a paragraph with CSS 2.1 and CSS 3

      <h1>First Letter with CSS3 and CSS 2.1</h1>
      <h2>The CSS3 way</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ...</p></div>
  • Comment Form

    CSS3 comment form.

    <!DOCTYPE html> 
    <title>CSS3 Form Demo</title> 
    <form class="form">
      <p class="name">
        <input type="text" name="name" id="name" />
        <label for="name">Name</label>
      <p class="email">
        <input type="text" name="email" id="email" />
        <label for="email">E-mail</label>
      <p class="web">
        <input type="text" name="web" id="web" />
        <label for="web">Website</label>
      <p class="text">
        <textarea name="text"></textarea>
      <a href="#" class="button black">Submit</a>
  • Horizontal Nav

    A simple nav with CSS

    <div class="top">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Preferences</a></li>
        <li><a href="#">Administration</a></li>
        <li><a href="#">Storage</a></li>
        <li><a href="#">Reports</a></li>
  • Star Rating v2 - CSS

    Star rating without images.

    //initialize clicked to false and initializes selected and arrays
    var clicked = false;
    var selected;
    var idArray = [one, two, three, four ...