├── README.mdown
├── css
    └── style.css
├── img
    ├── arrow.png
    └── check.png
├── index.html
└── source.psd


/README.mdown:
--------------------------------------------------------------------------------
1 | ## Overview
2 | A set of CSS3 UI elements.
3 | 
4 | ## To do
5 | - Fix slider handle
6 | - Add disabled and hover states


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* CSS Reset */
  2 | *{
  3 | 	padding : 0;
  4 | 	margin: 0;
  5 | 	box-sizing: border-box;
  6 | }
  7 | html, body, div, span,
  8 | h1, h2, h3, h4, h5, h6,
  9 | p, blockquote, code, img,
 10 | ol, ul, li, form, select,
 11 | input, button, article,
 12 | aside, canvas, footer, header,
 13 | hgroup, menu, nav, section,
 14 | time, audio, video {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	border: 0;
 18 | 	font: inherit;
 19 | 	font-size: 100%;
 20 | 	vertical-align: baseline;
 21 | }
 22 | 
 23 | *:focus {
 24 | 	outline: 0;
 25 | }
 26 | 
 27 | article, aside, footer,
 28 | header, hgroup, menu,
 29 | nav, section {
 30 | 	display: block;
 31 | }
 32 | 
 33 | .clear {
 34 | 	clear: both;
 35 | }
 36 | 
 37 | body {
 38 | 	background: rgb(180, 185, 190);
 39 | 	color: 80, 80, 80;
 40 | 	font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
 41 | 	font-size: 11px;
 42 | 	text-rendering: optimizeLegibility;
 43 | }
 44 | 
 45 | #wrap {
 46 | 	margin: -90px 0 0 -150px;
 47 | 	position: absolute;
 48 | 	top: 50%;
 49 | 	left: 50%;
 50 | 	width: 300px;
 51 | 	height: 180px;
 52 | }
 53 | 
 54 | #left {
 55 | 	float: left;
 56 | }
 57 | 
 58 | #right {
 59 | 	float: right;
 60 | }
 61 | 
 62 | input, select {
 63 | 	margin-bottom: 10px;
 64 | }
 65 | 
 66 | #checkbox {
 67 | 	margin-left: 10px;
 68 | }
 69 | 
 70 | .toolbar input[type=search] {
 71 | 	width: 210px;
 72 | 	display: inline-block;
 73 | }
 74 | 
 75 | .toolbar button {
 76 | 	margin-left: 10px;
 77 | }
 78 | 
 79 | /* ui kit */
 80 | 
 81 | select {
 82 | 	-webkit-appearance: none;
 83 | 	-webkit-box-shadow: 
 84 | 		inset 0 1px 0 rgba(255, 255, 255, 0.6),
 85 | 		0 1px 0 rgba(0, 0, 0, 0.2),
 86 | 		0 0 0 1px rgb(150, 150, 150),
 87 | 		0 1px 2px rgba(0, 0, 0, 0.25);
 88 | 	background-position: right center, left top;
 89 | 	background-repeat: no-repeat, repeat-x;
 90 | 	background-image:
 91 | 		url('../img/arrow.png'),
 92 | 		-webkit-gradient(
 93 | 			linear,
 94 | 			left top,
 95 | 			left bottom,
 96 | 			from(rgb(240, 240, 240)),
 97 | 			to(rgb(210, 210, 210))
 98 | 		);
 99 | 	border-radius: 3px;
100 | 	color: rgb(80, 80, 80);
101 | 	font-size: 11px;
102 | 	font-weight: bold;
103 | 	height: 20px;
104 | 	outline: 0;
105 | 	padding-left: 6px;
106 | 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
107 | /* for this page only */
108 | 	width: 140px;
109 | 	display: block;
110 | }
111 | 
112 | input[type=radio] {
113 | 	-webkit-appearance: none;
114 | 	-webkit-box-shadow: 
115 | 		inset 0 1px 0 rgba(255, 255, 255, 0.6),
116 | 		0 0 0 1px rgb(150, 150, 150),
117 | 		0 1px 2px rgba(0, 0, 0, 0.25);
118 | 	background:
119 | 		-webkit-gradient(
120 | 			linear,
121 | 			0% 0%,
122 | 			0% 100%,
123 | 			from(rgb(240, 240, 240)),
124 | 			to(rgb(210, 210, 210))
125 | 		)
126 | 		rgb(90, 90, 90);
127 | 	border-radius: 20px;
128 | 	height: 10px;
129 | 	width: 10px;
130 | }
131 | 
132 | input[type=radio]:disabled {
133 | 	background:
134 | 		-webkit-gradient(
135 | 		  radial, 50% 50%, 2, 50% 50%, 3, from(rgb(180, 180, 180)), to(rgba(255, 255, 255, 0))
136 | 		),
137 | 		-webkit-gradient(
138 | 			linear,
139 | 			0% 0%,
140 | 			0% 100%,
141 | 			from(rgb(240, 240, 240)),
142 | 			to(rgb(210, 210, 210))
143 | 		)
144 | 		rgb(90, 90, 90);
145 | }
146 | 
147 | input[type=radio]:checked {
148 | 	background:
149 | 		-webkit-gradient(
150 | 		  radial, 50% 50%, 2, 50% 50%, 3, from(rgb(90, 90, 90)), to(rgba(255, 255, 255, 0))
151 | 		),
152 | 		-webkit-gradient(
153 | 			linear,
154 | 			0% 0%,
155 | 			0% 100%,
156 | 			from(rgb(240, 240, 240)),
157 | 			to(rgb(210, 210, 210))
158 | 		)
159 | 		rgb(90, 90, 90);
160 | }
161 | 
162 | input[type=checkbox] {
163 | 	-webkit-appearance: none;
164 | 	-webkit-box-shadow: 
165 | 		inset 0 1px 0 rgba(255, 255, 255, 0.6),
166 | 		0 0 0 1px rgb(150, 150, 150),
167 | 		0 1px 2px rgba(0, 0, 0, 0.25);
168 | 	background:
169 | 		-webkit-gradient(
170 | 			linear,
171 | 			0% 0%,
172 | 			0% 100%,
173 | 			from(rgb(240, 240, 240)),
174 | 			to(rgb(210, 210, 210))
175 | 		)
176 | 		rgb(90, 90, 90);
177 | 	border-radius: 3px;
178 | 	height: 10px;
179 | 	width: 10px;
180 | }
181 | 
182 | input[type=checkbox]:checked {
183 | 	background:
184 | 		url('../img/check.png') center center no-repeat,
185 | 		-webkit-gradient(
186 | 			linear,
187 | 			0% 0%,
188 | 			0% 100%,
189 | 			from(rgb(240, 240, 240)),
190 | 			to(rgb(210, 210, 210))
191 | 		)
192 | 		rgb(90, 90, 90);
193 | }
194 | 
195 | input[type=search] {
196 | 	-webkit-appearance: none;
197 | 	-webkit-box-shadow:
198 | 		0 -1px 0 rgba(0, 0, 0, 0.3),
199 | 		inset 0 1px 1px rgba(0, 0, 0, 0.2),
200 | 		0 0 0 1px rgb(140, 140, 140),
201 | 		0 2px 0 rgba(255, 255, 255, 0.3);
202 | 	-webkit-transition-property: background-color, color;
203 | 	-webkit-transition-duration: 0.4s;
204 | 	background:
205 | 		-webkit-gradient(
206 | 			linear,
207 | 			left top,
208 | 			left bottom,
209 | 			from(rgba(0, 0, 0, 0.1)),
210 | 			to(rgba(0, 0, 0, 0))
211 | 		)
212 | 		rgb(245, 245, 245);
213 | 	border-radius: 20px;
214 | 	color: rgb(90, 90, 90);
215 | 	font: 11px/1 'Lucida Grande', sans-serif;
216 | 	display: block;
217 | 	height: 20px;
218 | /* for this page only */
219 | 	width: 130px;
220 | }
221 | 
222 | input[type=search]::-webkit-search-results-decoration {
223 | 	margin-right: 2px;
224 | }
225 | 
226 | input[type=search]::-webkit-search-cancel-button {
227 | 	margin-left: 4px;
228 | }
229 | 
230 | input[type=search]:focus {
231 | 	-webkit-box-shadow:
232 | 		0 0 4px rgb(68, 160, 208),
233 | 		0 -1px 0 rgba(0, 0, 0, 0.3),
234 | 		inset 0 1px 1px rgba(0, 0, 0, 0.2),
235 | 		0 0 0 1px rgb(140, 140, 140),
236 | 		0 2px 0 rgba(255, 255, 255, 0.3);
237 | 	background-color: rgb(255, 255, 255);
238 | 	color: rgb(60, 60, 60);
239 | }
240 | 
241 | input[type=text] {
242 | 	-webkit-appearance: none;
243 | 	-webkit-box-shadow:
244 | 		0 -1px 0 rgba(0, 0, 0, 0.3),
245 | 		inset 0 1px 1px rgba(0, 0, 0, 0.2),
246 | 		0 0 0 1px rgb(140, 140, 140),
247 | 		0 2px 0 rgba(255, 255, 255, 0.3);
248 | 	-webkit-transition-property: background-color, color;
249 | 	-webkit-transition-duration: 0.4s;
250 | 	border-radius: 3px;
251 | 	font: 11px/1 'Lucida Grande', sans-serif;
252 | 	color: rgb(90, 90, 90);
253 | 	height: 20px;
254 | 	padding: 0 5px;
255 | 	background:
256 | 		-webkit-gradient(
257 | 			linear,
258 | 			left top,
259 | 			left bottom,
260 | 			from(rgba(0, 0, 0, 0.1)),
261 | 			to(rgba(0, 0, 0, 0))
262 | 		)
263 | 		rgb(245, 245, 245);
264 | /* for this page only */
265 | 	width: 120px;
266 | 	display: block;
267 | }
268 | 
269 | input[type=text]:focus {
270 | 	-webkit-box-shadow:
271 | 		0 0 4px rgb(68, 160, 208),
272 | 		0 -1px 0 rgba(0, 0, 0, 0.3),
273 | 		inset 0 1px 1px rgba(0, 0, 0, 0.2),
274 | 		0 0 0 1px rgb(140, 140, 140),
275 | 		0 2px 0 rgba(255, 255, 255, 0.3);
276 | 	background-color: rgb(255, 255, 255);
277 | 	color: rgb(60, 60, 60);
278 | }
279 | 
280 | input[type=range] {
281 | 	-webkit-appearance: none;
282 | 	-webkit-box-shadow:
283 | 		inset 0 0 0 1px rgb(140, 140, 140),
284 | 		inset 0 1px 2px rgba(0, 0, 0, 0.3),
285 | 		0 1px 0 rgba(255, 255, 255, 0.3);
286 | 	background: rgba(0, 0, 0, 0.1);
287 | 	border-radius: 10px;
288 | 	height: 4px;
289 | /*	*/
290 | 	width: 100px;
291 | 	display: block;
292 | }
293 | 
294 | input[type=range]::-webkit-slider-thumb {
295 | 	-webkit-appearance: none;
296 | 	-webkit-box-shadow:
297 | 		inset 0 1px 0 rgba(255, 255, 255, 0.2),
298 | 		0 0 0 1px rgb(140, 140, 140),
299 | 		0 1px 1px rgba(0, 0, 0, 0.3);
300 | 	border-radius: 10px;
301 | 	background-color: rgba(255, 255, 255, 0.7);
302 | 	background-image:
303 | 		-webkit-gradient(
304 | 		  radial, 50% 50%, 2, 50% 50%, 3, from(rgb(100, 100, 100)), to(rgba(255, 255, 255, 0))
305 | 		), 
306 | 		-webkit-gradient(
307 | 			linear,
308 | 			left top,
309 | 			left bottom,
310 | 			from(rgb(240, 240, 240)),
311 | 			to(rgb(210, 210, 210))
312 | 		);
313 | 	width: 10px;
314 | 	height: 10px;
315 | }
316 | 
317 | button {
318 | 	-webkit-box-shadow: 
319 | 		inset 0 1px 0 rgba(255, 255, 255, 0.6),
320 | 		0 1px 0 rgba(0, 0, 0, 0.2),
321 | 		0 0 0 1px rgb(150, 150, 150),
322 | 		0 1px 2px rgba(0, 0, 0, 0.25);
323 | 	border-radius: 3px;
324 | 	background-color: rgba(255, 255, 255, 0.7);
325 | 	background-image: 
326 | 		-webkit-gradient(
327 | 			linear,
328 | 			left top,
329 | 			left bottom,
330 | 			from(rgb(240, 240, 240)),
331 | 			to(rgb(210, 210, 210))
332 | 		);
333 | 	color: rgb(90, 90, 90);
334 | 	font: 11px/20px 'Lucida Grande', sans-serif;
335 | 	padding: 0 10px;
336 | 	text-decoration: none;
337 | 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
338 | }
339 | 
340 | button:active {
341 | 	-webkit-box-shadow:
342 | 		inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
343 | 		0 0 0 1px rgb(140, 140, 140),
344 | 		0 1px 1px rgba(0, 0, 0, 0.3);
345 | }
346 | 
347 | .list {
348 | 	-webkit-box-shadow: 
349 | 		0 1px 0 rgba(0, 0, 0, 0.2),
350 | 		0 0 0 1px rgb(150, 150, 150),
351 | 		0 1px 2px rgba(0, 0, 0, 0.25);
352 | 	background: rgba(255, 255, 255, 0.6);
353 | 	color: rgb(90, 90, 90);
354 | 	list-style: none;
355 | 	border-radius: 3px;
356 | 	width: 140px;
357 | }
358 | 
359 | .list li {
360 | 	-webkit-box-shadow:
361 | 		0 -1px 0 rgba(0, 0, 0, 0.2),
362 | 		inset 0 1px 0 rgba(255, 255, 255, 0.6);
363 | 	background-image: 
364 | 		-webkit-gradient(
365 | 			linear,
366 | 			left top,
367 | 			left bottom,
368 | 			from(rgb(240, 240, 240)),
369 | 			to(rgb(210, 210, 210))
370 | 		);
371 | 	line-height: 1;
372 | 	padding: 10px;
373 | }
374 | 
375 | .list li:first-child {
376 | 	border-radius: 3px 3px 0 0;
377 | 	-webkit-box-shadow: none;
378 | }
379 | 
380 | .list li:last-child {
381 | 	border-radius: 0 0 3px 3px;
382 | }
383 | 
384 | .toolbar {
385 | 	-webkit-box-shadow: 
386 | 		inset 0 1px 0 rgba(255, 255, 255, 0.4),
387 | 		0 1px 0 rgba(0, 0, 0, 0.2),
388 | 		0 0 0 1px rgb(150, 150, 150),
389 | 		0 1px 2px rgba(0, 0, 0, 0.25);
390 | 	background-color: rgba(255, 255, 255, 0.4);
391 | 	background-image: 
392 | 		-webkit-gradient(
393 | 			linear,
394 | 			left top,
395 | 			left bottom,
396 | 			from(rgb(220, 220, 220)),
397 | 			to(rgb(180, 180, 180))
398 | 		);
399 | 	border-radius: 3px;
400 | 	height: 20px;
401 | 	padding: 10px;
402 | /* for this page only */
403 | 	margin-top: 10px;
404 | }
405 | 


--------------------------------------------------------------------------------
/img/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mynameisraj/css-elements/fc5e4424d7d60ded5f1d517af310ed3941312c26/img/arrow.png


--------------------------------------------------------------------------------
/img/check.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mynameisraj/css-elements/fc5e4424d7d60ded5f1d517af310ed3941312c26/img/check.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<title>UI Kit</title>
 6 | 	
 7 | 	<meta charset="utf-8">
 8 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 | 	
10 | 	<meta name="author" content="Raj Ramamurthy">
11 | 	<meta name="description" content="CSS3 interface elements.">
12 | 	
13 | 	<script src="js/script.js"></script>
14 | 	
15 | 	<link rel="stylesheet" href="css/style.css">
16 | </head>
17 | 
18 | <body>
19 | 	<div id="wrap">
20 | 		<div id="left">
21 | 			<ul class="list">
22 | 				<li>Item 1</li>
23 | 				<li>Item 2</li>
24 | 				<li>Item 3</li>
25 | 				<li>Item 4</li>
26 | 			</ul>
27 | 		</div>
28 | 		
29 | 		<div id="right">
30 | 			<select>
31 | 				<option>Menu</option>
32 | 				<option>Item</option>
33 | 			</select>
34 | 			
35 | 			<input type="radio">		
36 | 			<input type="radio" disabled>
37 | 			<input type="radio" checked>
38 | 			
39 | 			<span id="checkbox">
40 | 				<input type="checkbox">
41 | 				<input type="checkbox" checked>
42 | 			</span>
43 | 			
44 | 			<input type="search" placeholder="Search" results="0">
45 | 			<input type="text" placeholder="Text">
46 | 			<input type="range" min="0" max="10" step="0.1" value="3">
47 | 		</div>
48 | 		
49 | 		<div class="clear"></div>
50 | 		
51 | 		<div>
52 | 			<div class="toolbar">
53 | 				<input type="search">
54 | 				<button id="button">Button</button>
55 | 				<div class="clear"></div>
56 | 			</div>
57 | 		</div>
58 | 	</div>
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/source.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mynameisraj/css-elements/fc5e4424d7d60ded5f1d517af310ed3941312c26/source.psd


--------------------------------------------------------------------------------