Created
December 20, 2011 16:27
-
-
Save werm/1502165 to your computer and use it in GitHub Desktop.
Web UI Kit in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Web UI Kit in CSS */ | |
body { | |
background: url('http://f.cl.ly/items/2y0S3r1h3B2h2c3K351y/Tile.png'); | |
} | |
#container { | |
width: 300px; | |
position: relative; | |
margin: 0 auto; | |
} | |
#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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- content to be placed inside <body>…</body> --> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
<div id="container"> | |
<!--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="http://f.cl.ly/items/3R3Z1e3a1w3d1O1c0y23/TickGlyph.png" id="tick" /></div> | |
<br /> | |
<div class="button roundbutton" id="buttonhover"><img src="http://f.cl.ly/items/3R3Z1e3a1w3d1O1c0y23/TickGlyph.png" id="tick" /></div> | |
<br /> | |
<div class="button roundbutton" id="buttonpressed"><img src="http://f.cl.ly/items/3R3Z1e3a1w3d1O1c0y23/TickGlyph.png" id="tick" /></div> | |
</div> | |
<!--Square Buttons--> | |
<div id="squarebuttons"> | |
<div class="button squarebutton"><img src="http://f.cl.ly/items/3R3Z1e3a1w3d1O1c0y23/TickGlyph.png" id="tick" /></div> | |
<br /> | |
<div class="button squarebutton" id="buttonhover"><img src="http://f.cl.ly/items/3R3Z1e3a1w3d1O1c0y23/TickGlyph.png" id="tick" /></div> | |
<br /> | |
<div class="button squarebutton" id="buttonpressed"><img src="http://f.cl.ly/items/3R3Z1e3a1w3d1O1c0y23/TickGlyph.png" id="tick" /></div> | |
</div> | |
<br /> | |
<!--Search--> | |
<div class="field" contentEditable="true"> | |
Simple UI Kit</div> | |
<div class="button" id="searchbutton"><img src="http://f.cl.ly/items/3F2L1u0j0p1q1t1T0R2a/SearchGlyph.png" style="margin-top:10px;"/></div> | |
<br /> | |
<div class="field inactivesearch" contentEditable="true">Search...</div> | |
<div class="button" id="searchbutton"><img src="http://f.cl.ly/items/3F2L1u0j0p1q1t1T0R2a/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> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment