CoderZone.org
Pages: 1 « previous     next »
  Print  
Author Topic: Pure CSS GUI Icons  (Read 6193 times) Bookmark and Share
Max
Jr. Member
*****
Posts: 75



View Profile WWW
« on: Mar 29, 2011, 08:07:26 am »

This is so slick:

http://nicolasgallagher.com/pure-css-gui-icons/demo/

Pseudo-elements used to create simple GUI icons using CSS and semantic HTML- no image files at all.

The HTML is a basic unordered list of links:
Code:  
Highlight Mode: (HTML)
  1.   <li class="power"><a href="#non">Power</a></li>
  2.   <li class="play"><a href="#non">Play</a></li>
  3.   <li class="stop"><a href="#non">Stop</a></li>
  4.   <li class="pause"><a href="#non">Pause</a></li>
 

Each icon uses its own set of styles. For example, the key parts of the CSS responsible for the “expand” icon are as follows:
Code:  
Highlight Mode: (CSS)
  1. .expand a:before {
  2.   content:"";
  3.   position:absolute;
  4.   top:50%;
  5.   left:1px;
  6.   width:5px;
  7.   height:0;
  8.   border-width:7px 7px 0;
  9.   border-style:solid;
  10.   border-color:transparent #c55500;
  11.   margin-top:-4px;
  12.   /* css3 */
  13.   -webkit-transform:rotate(-45deg);
  14.   -moz-transform:rotate(-45deg);
  15.   -o-transform:rotate(-45deg);
  16.   transform:rotate(-45deg);
  17. }
  18.  
  19. .expand a:after {
  20.   content:"";
  21.   position:absolute;
  22.   top:50%;
  23.   left:5px;
  24.   width:8px;
  25.   height:8px;
  26.   border-width:3px 0 0 3px;
  27.   border-style:solid;
  28.   border-color:#c55500;
  29.   margin-top:-6px;
  30. }
  31.  
  32. .expand a:hover:before,
  33. .expand a:focus:before,
  34. .expand a:active:before {
  35.   border-color:transparent #730800;
  36. }
  37.  
  38. .expand a:hover:after,
  39. .expand a:focus:after,
  40. .expand a:active:after {
  41.   border-color:#730800;
  42. }
 
Logged
cuberat
Newbie
*
Posts: 40


View Profile
« Reply #1 on: Mar 29, 2011, 09:45:35 am »

Awesome!  Thanks!
Logged
Tags:
Pages: 1
  Print  
 
Jump to: