Icon Deposit CSS3 UI Kit (Source Code)

Rating: 15
Comments: 2

Icon Deposit CSS3 UI Kit (Source Code)

by Matt Gentile

11 Jun 2012 20:36

Icon-deposit-ui-kit.jpg

- Preview the UI Kit Here

- Download the fully coded UI KIt Here

Here is the long awaited Icon Deposit CSS3 UI Kit. This includes everything from GUI switches and buttons, to radio buttons and checkboxes. I also included the Photoshop PSD file for those who want to edit the design or make the images bigger.

Keep in mind that this preview image is only for google chrome, so if you would like to see it in other browsers, you will need to manually edit the CSS file.

Here is the CSS:

/* CSS Style Reset (Alternate mini version of jquery.mobile-1.0.1.min.css for Icondeposit CSS3 UI Kit by Matt Gentile - IconDeposit.com) */
 
.ui-disabled{opacity:.46;}
.ui-disabled,.ui-disabled a{pointer-events:none;cursor:default;}
.ui-li-divider{cursor:default;}
.ui-li-has-alt .ui-btn-inner a.ui-link-inherit,.ui-li-static.ui-li-has-alt{padding-right:96px;}
.ui-li-has-count .ui-li-count{position:absolute;font-size:11px;font-weight:bold;padding:.2em .5em;top:50%;margin-top:-.9em;right:38px;}
.ui-li-divider .ui-li-count,.ui-li-static .ui-li-count{right:10px;}
.ui-li-has-alt .ui-li-count{right:55px;}
.ui-li-link-alt{position:absolute;width:40px;height:100%;border-width:0;border-left-width:1px;top:0;right:0;margin:0;padding:0;z-index:2;}
.ui-li-link-alt .ui-btn{overflow:hidden;position:absolute;right:8px;top:50%;margin:-11px 0 0 0;border-bottom-width:1px;z-index:-1;}
.ui-li-link-alt .ui-btn-inner{padding:0;height:100%;position:absolute;width:100%;top:0;left:0;}
.ui-li-link-alt .ui-btn .ui-icon{right:50%;margin-right:-9px;}
.ui-listview * .ui-btn-inner>.ui-btn>.ui-btn-inner{border-top:0;}
.ui-listview-filter{border-width:0;overflow:hidden;margin:-15px -15px 15px -15px;}
.ui-listview-filter .ui-input-search{margin:5px;width:auto;display:block;}
.ui-listview-filter-inset{margin:-15px -5px -15px -5px;background:transparent;}
.ui-li.ui-screen-hidden{display:none;}
label.ui-slider{font-size:16px;line-height:1.4;font-weight:normal;margin:0 0 .3em;display:block;}
input.ui-slider-input,.ui-field-contain input.ui-slider-input{display:inline-block;width:50px;}
select.ui-slider-switch{display: none;position: relative;top: 29px;left: 70px;-webkit-appearance: none;outline: none;border: none;background: none;color: #ee0000;}
div.ui-slider{position:relative;display:inline-block;overflow:visible;height:15px;padding:0;margin:0 2% 0 20px;top:4px;width:60%;}
div.ui-slider-switch{width:99.8%;}
a.ui-slider-handle{top: 0;}
a.ui-slider-handle .ui-btn-inner{padding-left:0;padding-right:0;}
.ui-field-contain label.ui-slider{vertical-align:top;display:inline-block;width:20%;margin:0 2% 0 0;}
.ui-field-contain div.ui-slider{width: 66px;outline: none;height: 11px;padding: 6px 1px 5px 1px;border-radius: 30px;background: url(sprite1.png) -3px -88px;border: none;overflow: visible;}
div.ui-slider-switch{height:32px;overflow: visible;margin-left:0;}
div.ui-slider-inneroffset{margin-left: 47%;position: absolute;height: 24px;width: 44px;top: 0;}
a.ui-slider-handle-snapping{-webkit-transition: left 200ms ease;-moz-transition: left 200ms ease;}
div.ui-slider-labelbg{position:absolute;top:0;margin:0;border-width:0;overflow: hidden;}
div.ui-slider-switch div.ui-slider-labelbg-a{background: none; height: 20px; width: 20px; position: absolute; left: 75px; top: 1px;cursor: pointer;overflow: visible;}
div.ui-slider-switch div.ui-slider-labelbg-b{width: 20px;height: 20px;outline: none;background: none;position: absolute;display: block;left: 75px;top: 1px;cursor: pointer;overflow: visible;}
.ui-slider-switch-a div.ui-slider-labelbg-a,.ui-slider-switch-b div.ui-slider-labelbg-b{z-index:-1;}
.ui-slider-switch-a div.ui-slider-labelbg-b,.ui-slider-switch-b div.ui-slider-labelbg-a{z-index:0;overflow: hidden;}
div.ui-slider-switch a.ui-slider-handle{width: 21px;height: 27px;top: -1px;margin-left: -31px;outline: none !important;z-index: 10;border-top: none !important;display: block;position: absolute;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;text-indent: -9999px;-webkit-appearance: none !important;overflow: visible;}
span.ui-slider-label{}span.ui-slider-label-a{left:-100%;margin-right:-1px;}
span.ui-slider-label-b{right:-100%;margin-left:-1px;}
.ui-loader.ui-body-a.ui-corner-all {display: none;}
.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {display: none;}
li {list-style: none;}
a {text-decoration: none;}
 
/* Start Base CSS */
html, body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; background: #bfbfbf;}
 
#search {width: 200px; position: relative; margin: 0 auto;display: block;}
.searchbox {width: 167px; float: left; display: block; position: relative; padding: 8px 7px 9px 29px; background: transparent url(sprite1.png) -142px -5px no-repeat; border: none;font-weight: bold;font-size: 11px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; color: #aaa !important;}
.searchbox:focus {background-position: -189px -49px;}
#search-button {display: block; position: absolute; float: right; width: 16px; height: 16px; text-indent: -9999px; left: 10px; background: transparent url(sb.png) 0 0 no-repeat; top: 9px;}
 
.checkboxes, .radios {position: relative; display: block; width: 145px; height: 40px; margin: 0;}
.checkbox, .radio {float: left; display: inline-block; position: relative; margin: 0px 7px; padding: 0px;}
.checkbox {background: transparent url(sprite1.png) -6px -4px no-repeat; -webkit-appearance: none; width: 22px; height: 24px;overflow: visible; cursor: pointer;}
.checkbox:hover {background-position: -42px -4px;}
.checkbox:active {background-position: -82px -4px;}
.checkbox:checked::before {-webkit-appearance: none; content: ':)'; text-indent: -9999px; background: url(ch-r-detail.png) top center no-repeat; width: 15px; height: 14px; top: 2px; left: 4px; position: absolute; display: block;}
.checkbox:checked:active::before {top: 3px;}
.radio {background: transparent url(sprite1.png) -5px -33px no-repeat; -webkit-appearance: none; width: 22px; height: 24px;overflow: visible; cursor: pointer;}
.radio:hover {background-position: -42px -33px;}
.radio:active {background-position: -82px -33px;}
.radio:checked::before {-webkit-appearance: none; content: ':)'; text-indent: -9999px; background: url(ch-r-detail.png) bottom center no-repeat; width: 15px; height: 14px; top: 4px; left: 4px; position: absolute; display: block;}
.radio:checked:active::before {top: 5px;}
 
div.ui-slider-switch div.ui-slider-labelbg-a::after {width: auto; height: auto; outline: none; position: absolute; display: block; left: 0; top: 4px; cursor: pointer; overflow: visible !important; content: 'On'; color: #4f901f;font-weight: bold;font-size: 11px;text-shadow: 0px 1px 1px rgba(255, 255, 255, .69);text-transform: uppercase;}
div.ui-slider-switch div.ui-slider-labelbg-b::after {width: auto; height: auto; outline: none; position: absolute; display: block; left: 0; top: 4px; cursor: pointer; overflow: visible !important; content: 'Off'; color: #c43939;font-weight: bold;font-size: 11px;text-shadow: 0px 1px 1px rgba(255, 255, 255, .69);text-transform: uppercase;}
 
div.ui-slider-switch a.ui-slider-handle::after {background: transparent url(sprite1.png) -7px 276px !important; z-index: 200;content: '0';width: 21px;height: 26px;display: block;position: absolute;top: 0;}
div.ui-slider-switch a.ui-slider-handle::before {content: ':)'; width: 21px; height: 29px; text-indent: -9999px; background: transparent url(sl-sh.png) 0 0 no-repeat; display: block; position: absolute; overflow: visible; top: 8px; left: 1px; z-index: -2 !important; cursor: default;}
 
#buttons {display: block; position: relative; width: 100px; height: auto; margin: 0;float: right;top: -148px;right: 0;}
#circ {display: block; position: relative; width: 100px; height: auto; margin: 0;}
.circ-btn {position: relative; display: block; margin: 0 0 26px; text-decoration: none; font-weight: bold; font-size: 12px; color: #666; padding: 7px 0px 12px 0px;width: 100px;height: auto;text-align: center;background: url(sprite1.png) -81px -68px; text-shadow: 0px 1px 0px rgba(255,255,255,0.69); z-index: 90;}
.circ-btn:hover {background-position: -81px -126px; text-shadow: 0px 1px 0px rgba(255,255,255,1);}
.circ-btn:active {background-position: -81px -186px; padding: 8px 0px 11px 0px; text-shadow: 0px 1px 0px rgba(255,255,255,0.46);}
.circ-btn-sh {position: absolute; display: block; width: 95px; height: 54px; margin: 0; z-index: 1; background: url(circ-sh.png) 0 0 no-repeat;margin-top: -47px;margin-left: 4px;}
#circ:active .circ-btn-sh {display: none;}
 
#ntpd {width: 280px; height: 352px; margin: 0 auto; position: relative; display: block; background: url(ntpd.png) top center no-repeat; margin-top: -120px;}
.ntpd-head {position: relative; display: block; width: 200px; height: 28px; margin: 0 auto;text-align: center;top: 17px;}
.ntpd-head .title {font-size: 13px; color: #ececec; font-weight: bolder; text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);}
.ntpd-head .add {position: absolute; display: block; left: 0; top: -4px; margin: 0; background: url(sprite2.png) 0 1px no-repeat; text-indent: -9999px; width: 26px; height: 26px;}
.ntpd-head .add:active {background-position: -26px 1px;}
.ntpd-head .delete {position: absolute; display: block; right: 0; top: -4px; margin: 0; background: url(sprite2.png) 0 -24px no-repeat; text-indent: -9999px; width: 26px; height: 26px;}
.ntpd-head .delete:active {background-position: -26px -24px;}
#ntpd #tasks {position: relative; display: block; width: 182px; height: 198px; overflow-y: scroll; margin: 0 auto; top: 24px; font-size: 11px; font-weight: bold;}
#tasks::-webkit-scrollbar {width:6px; height:6px; border: none; background: transparent;}
#tasks::-webkit-scrollbar-track-piece {border: none; position: absolute; padding: 0; box-shadow: none; background-color: rgba(0,0,0,0.07); border-radius: 30px;}
#tasks::-webkit-scrollbar-thumb:vertical {background-color: rgba(0,0,0,0.18); border-radius: 30px; border: none;}
#tasks::-webkit-scrollbar-thumb:horizontal {background-color: rgba(0,0,0,0.18); border-radius: 30px; border: none;}
.incomplete, .complete {padding: 0px 0px 11px 0px; display: block; position: relative; top: 10px; bottom: 2px; text-indent: -8px;}
.incomplete {color: #999;}
.incomplete::before {content: '✘'; display: block; position: absolute; text-indent: -9999px; width: 12px; height: 12px; left: -42px; top: -1px; background: url(tick-cross.png) -0px -8px;}
.complete {color: #666;}
.complete::before {content: '✔'; display: block; position: absolute; text-indent: -9999px; width: 14px; height: 14px; left: -44px; top: -1px; background: url(tick-cross.png) 3px -33px; overflow: visible;}
.ntpd-sh {position: relative; display: block; margin: 0; width: 185px; height: 83px; background: url(ntpd-sh.png) 0 0 no-repeat; margin-left: 149px; margin-top: -82px; opacity: 1;}
 
.gd-view {display: block; position: relative; width: 150px; height: 160px; margin: 0; background: url(gd-view.png) 0 0; margin-top: -208px; margin-left: -24px;}
.gd-sh {display: block; position: relative; width: 97px; height: 83px; margin: 0; background: url(gd-sh.png) 0 0; margin-top: -35px; margin-left: 4px;}
.gd-a {outline: none; position: relative; display: inline-block; width: 80px; height: 80px; top: 27px; left: 37px;}
.grid-image {outline: none; display: inline-block; position: relative; margin: 0; padding: 0; border-radius: 3px; width: 80px; height: 80px; text-indent: -9999px; z-index: 10; top: -80px;}
.gd-a .shdw {outline: none; width: 80px; height: 80px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0px 1px 0px #fff, 0px 1px 1px rgba(255,255,255,0.5); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0px 1px 0px #fff, 0px 1px 1px rgba(255,255,255,0.5); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0px 1px 0px #fff, 0px 1px 1px rgba(255,255,255,0.5); display: block; position: relative; background: transparent; border-radius: 3px; z-index: 101 !important; overflow: hidden; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease;}
.gd-a .shdw:hover {box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0px 1px 0px #fff, 0px 1px 1px rgba(255,255,255,0.5); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0px 1px 0px #fff, 0px 1px 1px rgba(255,255,255,0.5); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0px 1px 0px #fff, 0px 1px 1px rgba(255,255,255,0.5); background-color: rgba(255,255,255,.69);}

Here is the HTML:

<!DOCTYPE html>
<html style="margin: 0 !important;">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Icon Deposit CSS3 UI Kit - Designed by Matt Gentile - icondeposit.com</title>
    <link rel="stylesheet"  href="jquery.mobile-1.0.1.min.css" />
    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body style="margin: 0 !important;">
    <div data-role="page" style="margin: 0 auto; display: block; height: 336px !important; width: 482px; position: relative; background: transparent url(bg.jpg) 0 0 no-repeat; overflow: hidden; padding: 54px; outline: none !important; margin-top: 7%; min-height: 336px !important;">
    <div data-role="content">
        <div class="content-primary">
        <form action="#" method="get">
        <div id="search">
          <input type="search" class="searchbox" placeholder="Search..." style="outline: none;">
          <a href="#" id="search-button">Search</a>
        </div>
        <div data-role="fieldcontain" style="width: 112px; height: auto;  margin; 25px 0 0 13px !important;position: relative;margin: 0 0 10px 0;top: 0;display: block;overflow: hidden;left: -348px;">
          <div class="checkboxes">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
          </div>
          <div class="radios">
            <input type="radio" class="radio">
            <input type="radio" class="radio">
            <input type="radio" class="radio">
          </div>
        </div>
        <div data-role="fieldcontain" style="width: 105px; overflow-y: visible;">
            <select name="slider" id="flip-b" data-role="slider">
                <option class="no" value="Off">Off</option>
                <option class="yes" value="On">On</option>
            </select>
        </div>
        <div data-role="fieldcontain" style="width: 105px; overflow-y: visible; margin-top: 9px;">
            <select name="slider" id="flip-b" data-role="slider">
                <option class="no" value="Off">Off</option>
                <option class="yes" value="On" selected="selected">On</option>
            </select>
        </div>
        </form>
        <div id="buttons">
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
        </div>
        <div id="ntpd">
          <div class="ntpd-head">
          <h1 class="title">My Chores</h1>
          <a href="#" class="add">Add</a>
          <a href="#" class="delete">Delete</a>
          </div>
          <div id="tasks">
          <ul>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          <li>
          <a href="#" class="complete">Have a beer</a>
          </li>
          <li>
          <a href="#" class="incomplete">Eat something</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          <li>
          <a href="#" class="complete">Have a beer</a>
          </li>
          <li>
          <a href="#" class="incomplete">Eat something</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          </ul>
          </div>
        </div>
        <span class="ntpd-sh"></span>
        <div class="gd-view">
          <a href="#" class="gd-a">
            <span class="shdw"></span>
            <img src="grid-view-img.jpg" width="80" height="80" class="grid-image">
          </a>
        </div>
        <span class="gd-sh"></span>
        <div class="gd-view" style="margin-left: 352px;">
          <a href="#" class="gd-a">
            <span class="shdw"></span>
            <img src="grid-view-img.jpg" width="80" height="80" class="grid-image">
          </a>
        </div>
        <span class="gd-sh" style="margin-left: 380px;"></span>
    </div><!--/content-primary -->
</div><!-- /content -->    
</div><!-- /page -->
</body>
</html>

View the Demo: http://www.icondeposit.com/local--files/code:icon-deposit-css3-ui-kit/index.html
Original URL: http://www.icondeposit.com/design:100
License Info: Creative Commons Attribution 3.0

rating: +15+x

Add a New Comment

ads via BSA

lovely-template.png

Tags

button buttons code coded cross css3 design grid gui html image interface javascript jquery kit notepad off on radio searchbox switch task tasks tick ui user ux vector

Popular Posts

arrow.pngRounded Theme
arrow.pngSimple UI CSS
arrow.pngButton
arrow.pngPure CSS3 Buttons
arrow.pngPure CSS3 Message Button with Notification
arrow.pngChunky 3D CSS3 Buttons


_code_rescources_resourcesbuttonbuttonscodecodedcrosscss3designgridguihtmlimageinterfacejavascriptjquerykitnotepadoffonradiosearchboxswitchtasktaskstickuiuseruxvector
Copyright © 2011-2019 Icon Deposit - All rights Reserved