Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 743 lines (687 sloc) 13.917 kb
abb7b5e @joshnh Initial commit
authored
1 <!DOCTYPE html>
2 <html lang='en'>
3 <head>
4 <meta charset='utf-8'>
5 <meta name='author' content='Joshua Hibbert'>
6 <title>Pure CSS Icons</title>
7 <!--[if IE]>
8 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
9 <![endif]-->
10 <style>
11 body {
12 background-color: #f6f6f6;
13 background-image: -webkit-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
14 background-image: -moz-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
15 background-image: radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
16 background-size: 4px 4px;
17 margin: 0 auto;
18 max-width: 720px;
19 padding: 100px 50px 50px;
20 text-align: center;
21 }
22 h1 {
23 color: #f66;
24 font: bold 48px/1 Quicksand, sans-serif;
25 margin-bottom: 32px;
26 text-shadow: 0 1px 0 #f6f6f6,
27 0 3px 0 #ccc;
28 }
29 h2 {
30 color: #555;
31 font: bold 24px/1.8 Quicksand, sans-serif;
32 margin-bottom: 36px;
33 text-shadow: 0 1px 0 #f6f6f6,
34 0 2px 0 #ccc;
35 }
36 p {
37 color: #777;
38 font: bold 16px/3 Quicksand, sans-serif;
39 margin-top: 30px;
40 }
41 p a {
42 border-bottom: 2px solid #fc6;
43 color: #777;
44 text-decoration: none;
45 }
46 p a:hover {
47 border-color: #f66;
48 }
49 a.icon {
50 margin: 12px;
51 }
52
53 /* Icon Base Styles */
54
55 a.icon {
56 background-color: #fed;
57 border: 2px solid #fc6;
58 display: inline-block;
59 position: relative;
60 vertical-align: top;
61 }
62 a.icon:after,
63 a.icon:before {
64 background: #fed;
65 border: 2px solid #fc6;
66 content: '';
67 position: absolute;
68 }
69 a.icon:hover,
70 a.icon:hover:after,
71 a.icon:hover:before {
72 background-color: #ffe;
73 }
74
75 /* New Document Icon */
76
77 a.newDoc {
78 border-top: 2px solid #fc6;
79 box-shadow: inset 0 0 0 2px #fed;
80 height: 15px;
81 top: 10px;
82 width: 20px;
83 }
84 a.newDoc:hover {
85 box-shadow: inset 0 0 0 2px #ffe;
86 }
87 a.newDoc:after {
88 height: 10px;
89 right: 1px;
90 top: -9px;
91 width: 10px;
92 z-index: -1;
93 -webkit-transform: rotate(45deg);
94 -moz-transform: rotate(45deg);
95 -ms-transform: rotate(45deg);
96 -o-transform: rotate(45deg);
97 transform: rotate(45deg);
98 }
99 a.newDoc:before {
100 border-bottom: none;
101 border-right: 2px solid #fc6;
102 height: 10px;
103 left: -2px;
104 top: -12px;
105 width: 11px;
106 }
107
108 /* Previous Icon */
109
110 a.prev {
111 border-radius: 100%;
112 height: 26px;
113 width: 26px;
114 }
115 a.prev:after,
116 a.prev:before {
117 border-radius: 2px;
118 height: 0;
119 left: 5px;
120 width: 9px;
121 }
122 a.prev:after {
123 bottom: 8px;
124 -webkit-transform: rotate(45deg);
125 -moz-transform: rotate(45deg);
126 -ms-transform: rotate(45deg);
127 -o-transform: rotate(45deg);
128 transform: rotate(45deg);
129 }
130 a.prev:before {
131 top: 8px;
132 -webkit-transform: rotate(-45deg);
133 -moz-transform: rotate(-45deg);
134 -ms-transform: rotate(-45deg);
135 -o-transform: rotate(-45deg);
136 transform: rotate(-45deg);
137 }
138
139 /* Next Icon */
140
141 a.next {
142 border-radius: 100%;
143 height: 26px;
144 width: 26px;
145 }
146 a.next:after,
147 a.next:before {
148 border-radius: 2px;
149 height: 0;
150 right: 5px;
151 width: 9px;
152 }
153 a.next:after {
154 top: 8px;
155 -webkit-transform: rotate(45deg);
156 -moz-transform: rotate(45deg);
157 -ms-transform: rotate(45deg);
158 -o-transform: rotate(45deg);
159 transform: rotate(45deg);
160 }
161 a.next:before {
162 bottom: 8px;
163 -webkit-transform: rotate(-45deg);
164 -moz-transform: rotate(-45deg);
165 -ms-transform: rotate(-45deg);
166 -o-transform: rotate(-45deg);
167 transform: rotate(-45deg);
168 }
169
170 /* Mail Icon */
171
172 a.mail {
173 height: 20px;
174 top: 4px;
175 width: 28px;
176 }
177 a.mail:after,
178 a.mail:before {
179 border-top: none;
180 top: 6px;
181 width: 13px;
182 }
183 a.mail:after {
184 left: -2px;
185 -webkit-transform: rotate(25deg);
186 -moz-transform: rotate(25deg);
187 -ms-transform: rotate(25deg);
188 -o-transform: rotate(25deg);
189 transform: rotate(25deg);
190 }
191 a.mail:before {
192 right: -2px;
193 -webkit-transform: rotate(-25deg);
194 -moz-transform: rotate(-25deg);
195 -ms-transform: rotate(-25deg);
196 -o-transform: rotate(-25deg);
197 transform: rotate(-25deg);
198 }
199
200 /* Contacts Icon */
201
202 a.contacts {
203 border-left-width: 6px;
204 color: #fc6;
205 font: bold 12px/1 sans-serif;
206 height: 25px;
207 text-decoration: none;
208 width: 18px;
209 }
210 a.contacts:after,
211 a.contacts:before {
212 border: none;
213 }
214 a.contacts:after {
215 content: '@';
216 right: 3px;
217 top: 5px;
218 }
219
220 /* Chart Icon */
221
222 a.chart {
223 height: 20px;
224 margin-right: 30px;
225 top:5px;
226 width: 4px;
227 }
228 a.chart:after,
229 a.chart:before {
230 bottom: -2px;
231 width: 4px;
232 }
233 a.chart:after {
234 height: 25px;
235 left: 8px;
236 }
237 a.chart:before {
238 height: 15px;
239 left: 18px;
240 }
241
242 /* Clock Icon */
243
244 a.clock {
245 border-radius: 100%;
246 height: 26px;
247 width: 26px;
248 }
249 a.clock:after,
250 a.clock:before {
251 border-left: none;
252 width: 0;
253 }
254 a.clock:after {
255 height: 9px;
256 left: 12px;
257 top: 3px;
258 }
259 a.clock:before {
260 height: 4px;
261 left: 15px;
262 top: 8px;
263 -webkit-transform: rotate(45deg);
264 -moz-transform: rotate(45deg);
265 -ms-transform: rotate(45deg);
266 -o-transform: rotate(45deg);
267 transform: rotate(45deg);
268 }
269
270 /* Calendar Icon */
271
272 a.calendar {
273 height: 23px;
274 top: 2px;
275 width: 27px;
276 }
277 a.calendar:after {
278 bottom: 19px;
279 left: -2px;
280 right: -2px;
281 top: -2px;
282 }
283 a.calendar:before {
284 background: none;
285 border-bottom: none;
286 border-top: none;
287 border-width: 4px;
288 bottom: 23px;
289 left: 2px;
290 right: 2px;
291 top: -4px;
292 }
293 a.calendar:hover:before {
294 background: none;
295 }
296
297 /* Folder Icon */
298
299 a.folder {
300 height: 18px;
301 top: 6px;
302 width: 27px;
303 }
304 a.folder:after {
305 border-bottom: none;
306 border-radius: 3px 3px 0 0;
307 height: 3px;
308 left: 1px;
309 top: -5px;
310 width: 10px;
311 }
312 a.folder:before {
313 border: none;
314 }
315
316 /* Add Icon */
317
318 a.add {
319 border-radius: 100%;
320 height: 26px;
321 width: 26px;
322 }
323 a.add:after {
324 height: 16px;
325 left: 11px;
326 top: 3px;
327 width: 0;
328 }
329 a.add:before {
330 height: 0;
331 left: 3px;
332 top: 11px;
333 width: 16px;
334 }
335
336 /* Subtract Icon */
337
338 a.subtract {
339 border-radius: 100%;
340 height: 26px;
341 width: 26px;
342 }
343 a.subtract:after {
344 height: 0;
345 left: 3px;
346 top: 11px;
347 width: 16px;
348 }
349 a.subtract:before {
350 border: none;
351 }
352
353 /* Full Battery Icon */
354
355 a.batFull {
356 height: 22px;
357 margin-left: 18px;
358 margin-right: 18px;
359 top: 3px;
360 width: 8px;
361 }
362 a.batFull:after {
363 bottom: 2px;
364 left: 2px;
365 right: 2px;
366 top: 2px;
367 }
368 a.batFull:before {
369 height: 0;
370 left: 1px;
371 right: 1px;
372 top: -4px;
373 }
374
375 /* Empty Battery Icon */
376
377 a.batEmpty {
378 height: 22px;
379 margin-left: 18px;
380 margin-right: 18px;
381 top: 3px;
382 width: 8px;
383 }
384 a.batEmpty:after {
385 bottom: 2px;
386 left: 2px;
387 right: 2px;
388 top: 16px;
389 }
390 a.batEmpty:before {
391 height: 0;
392 left: 1px;
393 right: 1px;
394 top: -4px;
395 }
396
397 /* Tick Icon */
398
399 a.tick {
400 border-radius: 100%;
401 height: 26px;
402 width: 26px;
403 }
404 a.tick:after {
405 height: 14px;
406 left: 13px;
407 top: 5px;
408 width: 0;
409 -webkit-transform: rotate(45deg);
410 -moz-transform: rotate(45deg);
411 -ms-transform: rotate(45deg);
412 -o-transform: rotate(45deg);
413 transform: rotate(45deg);
414
415 }
416 a.tick:before {
417 height: 0;
418 left: 4px;
419 top: 14px;
420 width: 2px;
421 -webkit-transform: rotate(45deg);
422 -moz-transform: rotate(45deg);
423 -ms-transform: rotate(45deg);
424 -o-transform: rotate(45deg);
425 transform: rotate(45deg);
426 }
427
428 /* Cross Icon */
429
430 a.cross {
431 border-radius: 100%;
432 height: 26px;
433 width: 26px;
434 }
435 a.cross:after {
436 height: 0;
437 left: 3px;
438 top: 11px;
439 width: 16px;
440 -webkit-transform: rotate(45deg);
441 -moz-transform: rotate(45deg);
442 -ms-transform: rotate(45deg);
443 -o-transform: rotate(45deg);
444 transform: rotate(45deg);
445 }
446 a.cross:before {
447 height: 0;
448 left: 3px;
449 top: 11px;
450 width: 16px;
451 -webkit-transform: rotate(-45deg);
452 -moz-transform: rotate(-45deg);
453 -ms-transform: rotate(-45deg);
454 -o-transform: rotate(-45deg);
455 transform: rotate(-45deg);
456 }
457
458 /* Eject Icon */
459
460 a.eject {
461 height: 4px;
462 top: 20px;
463 width: 26px;
464 }
465 a.eject:after,
466 a.eject:before,
467 a.eject:hover:after,
468 a.eject:hover:before {
469 background: none;
470 }
471 a.eject:after {
472 border-bottom: 15px solid #fc6;
473 border-left: 15px solid transparent;
474 border-right: 15px solid transparent;
475 border-top: 15px solid transparent;
476 height: 0;
477 left: -2px;
478 top: -35px;
479 width: 0;
480 }
481 a.eject:before {
482 border-bottom: 10px solid #fed;
483 border-left: 10px solid transparent;
484 border-right: 10px solid transparent;
485 border-top: 10px solid transparent;
486 height: 0;
487 left: 3px;
488 top: -27px;
489 width: 0;
490 z-index: 1;
491 }
492 a.eject:hover:before {
493 border-bottom-color: #ffe;
494 }
495
496 /* User Icon */
497
498 a.user {
499 border-radius: 10px 10px 0 0;
500 height: 6px;
501 top: 19px;
502 width: 26px;
503 }
504 a.user:after {
505 border-radius: 10px;
506 height: 17px;
507 left: 4px;
508 top: -20px;
509 width: 14px;
510 }
511 a.user:before {
512 border: none;
513 height: 10px;
514 left: 9px;
515 top: -9px;
516 width: 8px;
517 z-index: 1;
518 }
519
520 /* Heart Icon */
521
522 a.heart {
523 border-radius: 100%;
524 height: 15px;
525 margin-right: 24px;
526 width: 15px;
527 }
528 a.heart:after {
529 border-radius: 100%;
530 height: 15px;
531 left: 11px;
532 top: -2px;
533 width: 15px;
534 z-index: -1;
535 }
536 a.heart:before {
537 border-left: none;
538 border-top: none;
539 height: 16px;
540 left: 5px;
541 top: 6px;
542 width: 16px;
543 -webkit-transform: rotate(45deg);
544 -moz-transform: rotate(45deg);
545 -ms-transform: rotate(45deg);
546 -o-transform: rotate(45deg);
547 transform: rotate(45deg);
548 }
549
550
551 /* Play Icon */
552
553 a.play {
554 border-radius: 100%;
555 height: 26px;
556 width: 26px;
557 }
558 a.play:after,
559 a.play:before,
560 a.play:hover:after,
561 a.play:hover:before {
562 background: none;
563 }
564 a.play:after {
565 border-bottom: 8px solid transparent;
566 border-left: 13px solid #fc6;
567 border-right: 13px solid transparent;
568 border-top: 8px solid transparent;
569 height: 0;
570 left: 8px;
571 top: 5px;
572 width: 0;
573 }
574 a.play:before {
575 border: none;
576 }
577
578 /* Pause Icon */
579
580 a.pause {
581 border-radius: 100%;
582 height: 26px;
583 width: 26px;
584 }
585 a.pause:after,
586 a.pause:before {
587 height: 10px;
588 top: 6px;
589 width: 0;
590 }
591 a.pause:after {
592 left: 7px;
593 }
594 a.pause:before {
595 left: 15px;
596 }
597
598 /* Stop Icon */
599
600 a.stop {
601 border-radius: 100%;
602 height: 26px;
603 width: 26px;
604 }
605 a.stop:after {
606 background: #fc6;
607 height: 9px;
608 left: 7px;
609 top: 7px;
610 width: 8px;
611 }
612 a.stop:hover:after {
613 background: #fc6;
614 }
615 a.stop:before {
616 border: none;
617 }
618
619 /* Flag Icon */
620
621 a.flag {
622 height: 25px;
623 margin-right: 35px;
624 width: 0;
625 }
626 a.flag:after,
627 a.flag:before {
628 height: 8px;
629 left: 0;
630 top: -2px;
631 width: 10px;
632 }
633 a.flag:before {
634 left: 6px;
635 top: 2px;
636 }
637
638 /* Home Icon */
639
640 a.home {
641 height: 10px;
642 top: 14px;
643 width: 20px;
644 }
645 a.home:after,
646 a.home:before,
647 a.home:hover:after,
648 a.home:hover:before {
649 background: none;
650 }
651 a.home:after {
652 border-bottom: 15px solid #fc6;
653 border-left: 16px solid transparent;
654 border-right: 16px solid transparent;
655 border-top: 15px solid transparent;
656 height: 0;
657 left: -6px;
658 top: -29px;
659 width: 0;
660 }
661 a.home:before {
662 border-bottom: 10px solid #fed;
663 border-left: 11px solid transparent;
664 border-right: 11px solid transparent;
665 border-top: 10px solid transparent;
666 height: 0;
667 left: -1px;
668 top: -21px;
669 width: 0;
670 z-index: 1;
671 }
672 a.home:hover:before {
673 border-bottom-color: #ffe;
674 }
675
676 /* Comment Icon */
677
678 a.comment {
679 border-radius: 4px;
680 height: 18px;
681 width: 26px;
682 }
683 a.comment:after,
684 a.comment:before {
685 background: none;
686 border-bottom: 6px solid transparent;
687 border-left: 6px solid transparent;
688 border-right: 6px solid transparent;
689 border-top: 6px solid #fc6;
690 bottom: -14px;
691 height: 0;
692 left: 7px;
693 width: 0;
694 }
695 a.comment:before {
696 border-top-color: #fed;
697 bottom: -11px;
698 z-index: 1;
699 }
700 a.comment:hover:after {
701 background: none;
702 }
703 a.comment:hover:before {
704 background: none;
705 border-top-color: #ffe;
706 }​
707 </style>
708 <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
709 </head>
710 <body>
711
712 <h1>Pure CSS Icons</h1>
713 <h2>No extra markup &middot; No solid colour background required</h2>
714
715 <a class="folder icon" title="Folder" href="#"></a>
716 <a class="newDoc icon" title="New Document" href="#"></a>
717 <a class="mail icon" title="Mail" href="#"></a>
718 <a class="contacts icon" title="Contacts" href="#"></a>
719 <a class="calendar icon" title="Calendar" href="#"></a>
720 <a class="clock icon" title="Clock" href="#"></a>
721 <a class="chart icon" title="Chart" href="#"></a>
722 <a class="prev icon" title="Previous" href="#"></a>
723 <a class="next icon" title="Next" href="#"></a>
724 <a class="flag icon" title="Flag" href="#"></a>
725 <a class="add icon" title="Add" href="#"></a>
726 <a class="subtract icon" title="Subtract" href="#"></a>
727 <a class="tick icon" title="Tick" href="#"></a>
728 <a class="cross icon" title="Cross" href="#"></a>
729 <a class="user icon" title="User" href="#"></a>
730 <a class="comment icon" title="Comment" href="#"></a>
731 <a class="heart icon" title="Heart" href="#"></a>
732 <a class="home icon" title="Home" href="#"></a>
733 <a class="batFull icon" title="Full Battery" href="#"></a>
734 <a class="batEmpty icon" title="Empty Battery" href="#"></a>
735 <a class="play icon" title="Play" href="#"></a>
736 <a class="pause icon" title="Pause" href="#"></a>
737 <a class="stop icon" title="Stop" href="#"></a>
738 <a class="eject icon" title="Eject" href="#"></a>
739
740 <p>Created by <a href="http://joshnh.com/2012/02/pure-css-icons/">Joshua Hibbert</a>.</p>​
741
742 </body>
743 </html>
Something went wrong with that request. Please try again.