Simple UI CSS

Rating: 3
Comments: 0

Simple UI CSS

by Charlie Hewitt

11 Dec 2011 18:19

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple UI</title>
<style>
#track {
    text-align:center;
    height:10px;
    width:276px;
    -moz-box-shadow: inset 0 1px 9px 3px rgba(0,0,0,0.8), 0 1px 0 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: inset 0 1px 9px 3px rgba(0,0,0,0.8), 0 1px 0 0 rgba(255,255,255,0.3);
    box-shadow: inset 0 1px 9px 3px rgba(0,0,0,0.8), 0 1px 0 0 rgba(255,255,255,0.3);
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
 
#indicator {
    background: #e7e7e7; /* Old browsers */
    background: -moz-linear-gradient(top, #e7e7e7 0%, #b5b5b5 98%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(98%,#b5b5b5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* IE10+ */
    background: linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#b5b5b5',GradientType=0 ); /* IE6-9 */
    border:1px solid rgba(0,0,0,0.9);
    -moz-box-shadow: inset 0 1px 0 0 #fff;
    -webkit-box-shadow: inset 0 1px 0 0 #fff;
    box-shadow: inset 0 1px 0 0 #fff;
 
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    height:8px;
    width:35px;
    margin-top: -10px;
    margin-left:70px;
}
 
#fill {
    background: #b5b5b5; /* Old browsers */
    background: -moz-linear-gradient(top, #b5b5b5 0%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5b5b5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /*             Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* IE10+ */
    background: linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
 
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
 
    height:8px;
    width:175px;
    margin-top:-9px;
    margin-left:1px;
}
 
#sliderbutton {
    width:20px;
    height:20px;
    border-radius:12px;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    margin-top:-15px;
    margin-left:165px;
}
 
.button {
    background: #e7e7e7; /* Old browsers */
    background: -moz-linear-gradient(top, #e7e7e7 0%, #b5b5b5 98%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(98%,#b5b5b5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* IE10+ */
    background: linear-gradient(top, #e7e7e7 0%,#b5b5b5 98%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#b5b5b5',GradientType=0 ); /* IE6-9 */
    border:1px solid rgba(0,0,0,0.9);
    -moz-box-shadow: inset 0 1px 0 0 #fff, 0 3px 4px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 1px 0 0 #fff, 0 3px 4px 0 rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 0 0 #fff, 0 3px 4px 0 rgba(0,0,0,0.5);
    text-align:center;
    color:#333;
    text-shadow: #FFF 0 1px 0;
    line-height:36px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:500;
}
 
.rectbutton {
    width: 80px;
    height:35px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
 
.roundedbutton {
    width: 80px;
    height:35px;
    border-radius: 19px;
    -moz-border-radius:19px;
}
 
.roundbutton {
    width: 35px;
    height:35px;
    border-radius: 19px;
    -moz-border-radius:19px;
    -webkit-border-radius:19px;
}
 
.squarebutton {
    width: 35px;
    height:35px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
 
#buttonhover {
    background: #FFF; /* Old browsers */
    background: -moz-linear-gradient(top, #FFF 0%, #d4d4d4 98%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(98%,#d4d4d4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* IE10+ */
    background: linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#d4d4d4',GradientType=0 ); /* IE6-9 */
}
 
#buttonpressed {
    -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.3);
    background: #b5b5b5; /* Old browsers */
    background: -moz-linear-gradient(top, #b5b5b5 0%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5b5b5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* IE10+ */
    background: linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}
 
#roundedbuttons {
    margin-left:95px;
    margin-top: -165px;
}
 
#roundbuttons {
    margin-left:188px;
    margin-top: -147px;
}
 
#squarebuttons {
    margin-left:238px;
    margin-top: -147px;
}
 
.field {
    border:1px solid rgba(0,0,0,0.9);
    -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3),inset 0 1px 9px 0 #000;
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3),inset 0 1px 9px 0 #000;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.3),inset 0 1px 9px 0 #000;
    height:35px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#FFFFFF;
    width:170px;
    color:#7a7a7a;
    line-height:36px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:500;
    overflow:hidden;
    padding-left:5px;
}
 
.inactivesearch {
    background-color:#CCC;
}
 
#searchbutton {
    width:40px;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    margin-top:-36px;
    margin-left:135px;
    border:none;
    border-left:1px solid rgba(0,0,0,0.7);
    height:35px;
}
 
#switches {
    margin-left:188px;
    margin-top:-90px;
}
 
#activeswitch {
    width:74px;
    padding-left:11px;
}
 
#inactiveswitch {
    width:69px;
    padding-right:11px;
    text-align:right;
    background-color:#CCC;
    margin-top:-1px;
}
 
#switchbutton {
    width: 40px;
    height:35px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin-top:-37px;
}
 
#radiodefault {
    width:14px;
    height:14px;
    border-radius: 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
 
#radiohover {
    margin-left:30px;
    margin-top:-16px;
    width:14px;
    height:14px;
    border-radius: 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background: #FFF; /* Old browsers */
    background: -moz-linear-gradient(top, #FFF 0%, #d4d4d4 98%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(98%,#d4d4d4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* IE10+ */
    background: linear-gradient(top, #FFF 0%,#d4d4d4 98%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#d4d4d4',GradientType=0 ); /* IE6-9 */
}
 
#radiopressed {
    margin-left:60px;
    margin-top:-16px;
    width:14px;
    height:14px;
    border-radius: 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.3);
    background: #b5b5b5; /* Old browsers */
    background: -moz-linear-gradient(top, #b5b5b5 0%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5b5b5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* IE10+ */
    background: linear-gradient(top, #b5b5b5 0%,#e7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}
 
#selected {
    margin-top:-16px;
    margin-left:90px;
}
 
#selector {
    height:8px;
    width:8px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3),inset 0 1px 9px 0 #000;
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.3),inset 0 1px 9px 0 #000;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.3),inset 0 1px 9px 0 #000;
    margin-top:3px;
    margin-left:3px;
}
 
#simpleUI {
    margin-top:-22px;
    margin-left:175px;
    color:rgba(0,0,0,0.8);
    text-shadow: rgba(255,255,255,0.3) 0 1px 0;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size:24px;
}
 
#tick {
    margin-top:9px;
}
</style>
</head>
<body background="Tile.png" style="margin-top:15%;margin-left:auto;margin-right:auto;width:280px;">
 
    <!--Scroller-->
        <div id="track"></div>
        <div id="indicator"></div>
    <br />
 
    <!--Slider-->
        <div id="track"></div>
        <div id="fill"></div>
        <div class="button" id="sliderbutton"></div>
    <br />
 
    <!--Square Buttons-->
        <div class="button rectbutton">Button</div>
        <br />
        <div class="button rectbutton" id="buttonhover">Button</div>
        <br />
        <div class="button rectbutton" id="buttonpressed">Button</div>
     <br />
 
     <!--Rounded Buttons-->
     <div id="roundedbuttons">
         <div class="button roundedbutton">Button</div>
        <br />
        <div class="button roundedbutton" id="buttonhover">Button</div>
        <br />
        <div class="button roundedbutton" id="buttonpressed">Button</div> 
    </div>
 
    <!--Round Buttons-->
    <div id="roundbuttons">
        <div class="button roundbutton"><img src="TickGlyph.png" id="tick" /></div>
        <br />
        <div class="button roundbutton" id="buttonhover"><img src="TickGlyph.png" id="tick" /></div>
        <br />
        <div class="button roundbutton" id="buttonpressed"><img src="TickGlyph.png" id="tick" /></div>
    </div>
 
    <!--Square Buttons-->
    <div id="squarebuttons">
        <div class="button squarebutton"><img src="TickGlyph.png" id="tick" /></div>
        <br />
        <div class="button squarebutton" id="buttonhover"><img src="TickGlyph.png" id="tick" /></div>
        <br />
        <div class="button squarebutton" id="buttonpressed"><img src="TickGlyph.png" id="tick" /></div>
    </div>
    <br />
 
    <!--Search-->
    <div class="field" contentEditable="true">
    Simple UI Kit</div>
    <div class="button" id="searchbutton"><img src="SearchGlyph.png" style="margin-top:10px;"/></div>
    <br />    
    <div class="field inactivesearch" contentEditable="true">Search...</div>
    <div class="button" id="searchbutton"><img src="SearchGlyph.png" style="margin-top:10px;"/></div>
 
    <!--Switches-->
    <div id="switches">
        <div class="field" id="activeswitch">On</div>
        <div class="button" id="switchbutton" style="margin-left:45px;"></div>
        <br />
        <div class="field" id="inactiveswitch">Off</div>
        <div class="button" id="switchbutton"></div>
    </div>
    <br />
 
    <!--Radio Buttons-->
      <div class="button" id="radiodefault"></div>
    <div class="button" id="radiohover"></div>
    <div class="button" id="radiopressed"></div>
    <div id="selected">
    <div class="button" id="radiodefault"><div id="selector"></div></div>
    <div class="button" id="radiohover"><div id="selector"></div></div>
    <div class="button" id="radiopressed"><div id="selector"></div></div>
    </div>
 
    <div id="simpleUI">Simple UI</div>
 
</body>
</html>

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.

View the Demo: http://s349739607.websitehome.co.uk/Simple%20UI.html
Original URL: http://www.icondeposit.com/code:2
License Info: Creative Commons Attribution 3.0

rating: +3+x

Add a New Comment

ads via BSA

2015-09-10_1852.png

Tags

animated animation blue browser button buttons chrome chunky code coding creative css css2 css3 design explorer firefox glow google green html icondeposit ie interface internet message mozilla notification opera pure release rounded safari shadow theme ui user ux website wikidot

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_rescourcesanimatedanimationbluebrowserbuttonbuttonschromechunkycodecodingcreativecsscss2css3designexplorerfirefoxglowgooglegreenhtmlicondepositieinterfaceinternetmessagemozillanotificationoperapurereleaseroundedsafarishadowthemeuiuseruxwebsitewikidot
Copyright © 2011-2019 Icon Deposit - All rights Reserved