Skip to content

Instantly share code, notes, and snippets.

@phongjalvn

phongjalvn/css.css

Created July 6, 2012 17:45
Show Gist options
  • Save phongjalvn/3061581 to your computer and use it in GitHub Desktop.
Save phongjalvn/3061581 to your computer and use it in GitHub Desktop.
Download ZIP
GUI CSS3
Raw
css.css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 1em;
list-style: none;
}
div.clear {
clear: both;
}
body {
background: rgb(180, 185, 190);
color: 80, 80, 80;
font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
font-size: 11px;
}
div#wrap {
margin: 100px auto;
width: 300px;
}
div#left {
float: left;
}
div#right {
float: right;
}
input, select {
margin-bottom: 10px;
}
#checkbox {
margin-left: 10px;
}
div.toolbar input.search {
width: 210px;
display: inline-block;
}
div.toolbar button {
margin-left: 10px;
}
/* ui kit */
select.select {
-webkit-appearance: none;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(150, 150, 150),
0 1px 2px rgba(0, 0, 0, 0.25);
background-position: right center, left top;
background-repeat: no-repeat, repeat-x;
background-image:
url('http://cssdeck.com/uploads/media/items/0/0U97HiE.png'),
-webkit-gradient(
linear,
left top,
left bottom,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
);
border-radius: 3px;
color: rgb(80, 80, 80);
font-size: 11px;
font-weight: bold;
height: 20px;
outline: 0;
padding-left: 6px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
/* for this page only */
width: 140px;
display: block;
}
input.radio {
-webkit-appearance: none;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 0 1px rgb(150, 150, 150),
0 1px 2px rgba(0, 0, 0, 0.25);
background:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
)
rgb(90, 90, 90);
border-radius: 20px;
height: 10px;
width: 10px;
}
input.radio:disabled {
background:
-webkit-gradient(
radial, 50% 50%, 2, 50% 50%, 3, from(rgb(180, 180, 180)), to(rgba(255, 255, 255, 0))
),
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
)
rgb(90, 90, 90);
}
input.radio:checked {
background:
-webkit-gradient(
radial, 50% 50%, 2, 50% 50%, 3, from(rgb(90, 90, 90)), to(rgba(255, 255, 255, 0))
),
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
)
rgb(90, 90, 90);
}
input.checkbox {
-webkit-appearance: none;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 0 1px rgb(150, 150, 150),
0 1px 2px rgba(0, 0, 0, 0.25);
background:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
)
rgb(90, 90, 90);
border-radius: 3px;
height: 10px;
width: 10px;
}
input.checkbox:checked {
background:
url('http://cssdeck.com/uploads/media/items/1/1S2Ow7G.png') center center no-repeat,
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
)
rgb(90, 90, 90);
}
input.search {
-webkit-appearance: none;
-webkit-box-shadow:
0 -1px 0 rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(140, 140, 140),
0 2px 0 rgba(255, 255, 255, 0.3);
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.4s;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0.1)),
to(rgba(0, 0, 0, 0))
)
rgb(245, 245, 245);
border-radius: 20px;
color: rgb(90, 90, 90);
font: 11px/1 'Lucida Grande', sans-serif;
display: block;
height: 20px;
/* for this page only */
width: 130px;
}
input.search::-webkit-search-results-decoration {
margin-right: 2px;
}
input.search::-webkit-search-cancel-button {
margin-left: 4px;
}
input.search:focus {
-webkit-box-shadow:
0 0 4px rgb(68, 160, 208),
0 -1px 0 rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(140, 140, 140),
0 2px 0 rgba(255, 255, 255, 0.3);
background-color: rgb(255, 255, 255);
color: rgb(60, 60, 60);
}
input.text {
-webkit-appearance: none;
-webkit-box-shadow:
0 -1px 0 rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(140, 140, 140),
0 2px 0 rgba(255, 255, 255, 0.3);
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.4s;
border-radius: 3px;
font: 11px/1 'Lucida Grande', sans-serif;
color: rgb(90, 90, 90);
height: 20px;
padding: 0 5px;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0.1)),
to(rgba(0, 0, 0, 0))
)
rgb(245, 245, 245);
/* for this page only */
width: 120px;
display: block;
}
input.text:focus {
-webkit-box-shadow:
0 0 4px rgb(68, 160, 208),
0 -1px 0 rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(140, 140, 140),
0 2px 0 rgba(255, 255, 255, 0.3);
background-color: rgb(255, 255, 255);
color: rgb(60, 60, 60);
}
input.range {
-webkit-appearance: none;
-webkit-box-shadow:
inset 0 0 0 1px rgb(140, 140, 140),
inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
height: 4px;
/* */
width: 100px;
display: block;
}
input.range::-webkit-slider-thumb {
-webkit-appearance: none;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgb(140, 140, 140),
0 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
background-image:
-webkit-gradient(
radial, 50% 50%, 2, 50% 50%, 3, from(rgb(200, 200, 200)), to(rgba(255, 255, 255, 0))
),
-webkit-gradient(
linear,
left top,
left bottom,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
);
width: 10px;
height: 10px;
}
.button {
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(150, 150, 150),
0 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.7);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
);
color: rgb(90, 90, 90);
font: 11px/20px 'Lucida Grande', sans-serif;
padding: 0 10px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button:active {
-webkit-box-shadow:
inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(140, 140, 140),
0 1px 1px rgba(0, 0, 0, 0.3);
}
ul.list {
-webkit-box-shadow:
0 1px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(150, 150, 150),
0 1px 2px rgba(0, 0, 0, 0.25);
background: rgba(255, 255, 255, 0.6);
color: rgb(90, 90, 90);
border-radius: 3px;
width: 140px;
}
ul.list li {
-webkit-box-shadow:
0 -1px 0 rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(rgb(240, 240, 240)),
to(rgb(210, 210, 210))
);
line-height: 1;
padding: 10px;
}
ul.list li:first-child {
border-radius: 3px 3px 0 0;
-webkit-box-shadow: none;
}
ul.list li:last-child {
border-radius: 0 0 3px 3px;
}
div.toolbar {
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 1px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px rgb(150, 150, 150),
0 1px 2px rgba(0, 0, 0, 0.25);
background-color: rgba(255, 255, 255, 0.4);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(rgb(220, 220, 220)),
to(rgb(180, 180, 180))
);
border-radius: 3px;
height: 20px;
padding: 10px;
/* for this page only */
margin-top: 10px;
}
Raw
html.html
<div id="wrap">
<div id="left">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="right">
<select class="select">
<option>Menu</option>
<option>Item</option>
</select>
<input type="radio" class="radio">
<input type="radio" class="radio" disabled>
<input type="radio" class="radio" checked>
<span id="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox" checked>
</span>
<input type="search" placeholder="Search" results="0" class="search">
<input type="text" class="text" placeholder="Text">
<input type="range" min="0" max="10" step="0.1" value="3" class="range">
</div>
<div class="clear"></div>
<div>
<div class="toolbar">
<input type="search" class="search">
<button class="button">Button</button>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment