Icons mit CSS

Mit CSS kann man erstaunliche Effekte erzielen, allem möglichen Icons lassen sich durch reines CSS erzielen.

Expand-Icon

<div style="position: relative;">
<div style=
  "position: absolute;
  top: 50%;
  left: 1px;
  width: 5px;
  height: 0;
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -4px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);">
</div>
<div style=
  "position: absolute;
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  border-width: 3px 0 0 3px;
  border-style: solid;
  border-color: #c55500;
  margin-top: -6px;">
</div>
</div>

Home-Icon

Ich habe das Icon vergrößert und beide Bestandteile unterschiedlich eingefärbt. Für das Dach habe ich das Dreieck mit der Spitze nach oben verwendet.

<div style="position: relative;">
<div style=
"position: relative; width: 0;
height: 0;
border-bottom: 40px solid #f0f;
border-left: 30px solid transparent;
border-right: 30px solid transparent;">
</div>
<div style=
"position: relative; left: 5px; top: -2px;
width:10px;
height:20px;
border-style:solid;
border-color:#0ff #0ff transparent;
border-width:15px 20px 0;
margin-top:0;
background:transparent;">
</div>
</div>

Links

• Pure CSS GUI icons von Nicolas
• CSS Stylesheet von Nicolas
• Icono

---