Code

Rating: 14
Comments: 3

CSS3 UI Kit (Source Code)

css3_ui_kit_preview.png

Here is my first "CSS3 UI Kit". It's all CSS coding! This is just the Source Code preview for it.

- Preview the UI Kit Here

- Download the fully coded UI KIt Here

Here is the CSS:


Here is the HTML:
<!DOCTYPE html>
<!-- A Design by Matt Gentile - © Icondeposit.com -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 UI Kit</title>
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script>
      $(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" ) );
      });
    </script>
  </head>
  <body>
    <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">
      </label>
      <label>
        <input type="checkbox" class="checkbox tick" value="yes" checked>
      </label>
      <label>
        <input type="checkbox" class="checkbox cross" value="yes" checked>
      </label>
      <label>
        <input type="checkbox" class="checkbox add" value="yes" checked>
      </label>
    </div>
    <div id="slider-block">
      <div id="slider"></div>
      <div id="slider2"></div>
      <div id="slider3"></div>
      <div id="slider4"></div>
    </div>
    <div id="media-buttons">
      <button class="media-button previous"></button>
      <button class="media-button pause"></button>
      <button class="media-button play"></button>
      <button class="media-button stop"></button>
      <button class="media-button next"></button>
    </div>
    <div id="circle-buttons">
      <button class="circle-button previous"></button>
      <button class="circle-button next"></button>
      <button class="circle-button add"></button>
      <button class="circle-button tick"></button>
      <button class="circle-button cross"></button>
    </div>
    <div id="square-buttons">
      <button class="square-button previous"></button>
      <button class="square-button next"></button>
      <button class="square-button add"></button>
      <button class="square-button tick"></button>
      <button class="square-button cross"></button>
    </div>
    <div id="docs">
      <a id="download" href="http://www.icondeposit.com/design:58">Download It</a>
      <a id="documentation" href="http://www.icondeposit.com/code:3">View Source</a>
    </div>
  </body>
</html>

It works beautifully in Chrome and Safari, just expect some problems in IE, FF, and Opera.

License Info: Creative Commons Attribution 3.0

Rating: 3
Comments: 0

Simple UI CSS

CSS and HTML version of a 'Simple UI' I made in photoshop (http://www.icondeposit.com/design:30), not particularly neat but it was quite fun to try and recreate the effects. It isn't functional - just the image created using CSS, though it would be pretty easy to adapt.

This works perfectly in safari and chrome, almost perfectly (alignment issues) in mozilla and probably not at all in IE but I can't check.

License Info: Creative Commons Attribution 3.0

Rating: 11
Comments: 0

"Creative" a Free Wikidot CSS Theme

Click Here for a Live Preview of this Theme

CREATIVE_PREVIEW.png
CREATIVE_PREVIEW_2.png
CREATIVE_PREVIEW_3.png
CREATIVE_PREVIWE_4.png

This is the theme I've been meaning to release for the past two days. This is a theme that has been in development for over 2 or 3 weeks, started off putting things together piece by piece, then finally figured out the direction to go for this theme.

It includes custom CSS3 3D buttons, a custom message notification, custom photo gallery, custom file uploaders and tons more! It also is compatible in all major Browsers, Google Chrome, Apple Safari, Mozilla Firefox, Internet Explorer, and Opera!

In order to get this theme to work with your Wikidot site, just copy and past the entire code below into the stylesheet when you create a new theme. If you don't feel like copying the whold code, here is a smaller version of the code so you don't have to do anything:

Short CSS (use this if you do not want to copy the big code below):

@import url(https://icondeposit.wdfiles.com/local--theme/creative/style.css);

The CSS:

If you need help, please use the Page for support.

License Info: Creative Commons Attribution Share-Alike 3.0 License

Rating: 7
Comments: 0

Chunky 3D CSS3 Buttons

This is a set of Chunky 3D Pure CSS3 Animated Website Buttons. In the CSS file you will see I've already added some nice colors, this way you don't have to search for the right color for these buttons. This works best in Firefox and Google Chrome.

The CSS:

The HTML:

<div class="chunky"><a href="#">Chunky</a></div>

License Info: Creative Commons Attribution 3.0

Rating: 7
Comments: 1

Pure CSS3 Message Button with Notification

This is a Pure CSS3 message button with another CSS3 notification. This is wonderful for custom profiled websites that want to achieve a better user interface. This works in Most Browsers.

The CSS:

The HTML:

<div class="notifications">
<div class="new-message">
    <a href="#" target="_top">6</a>
</div>
<div class="messages">
    <a href="#" target="_top">Messages</a>
</div>
</div>

If used elsewhere, remember to link back to Icondeposit.com or this post.

License Info: Creative Commons Attribution 3.0

Rating: 5
Comments: 1

Pure CSS3 Buttons

These are some CSS3 Buttons, each button comes with a Regular state, Hover state, and Active state.

Just change the color scheme to change the colors of the buttons. I made it very simple for everyone.

License Info: Creative Commons Attribution Share-Alike 3.0

Copyright © 2011-2015 Icon Deposit - All rights Reserved