Монохромные CSS иконки

Монохромные CSS иконки

02016-12-118461Денис Абдуллин

Сегодня помимо обычных иконок стали пачками делать векторные значки на CSS. Пока не все браузеры отображают значки одинаково, но когда везде все будет работать, тогда значков будет еще больше. Этот набор включает в себя несколько десятков качественных монохромных CSS иконок. Да зачем говорить о качестве, если это векторные значки. Вот, например, если Вы делаете сайт о музыки, то для более четкого проигрывателя будет целесообразно использовать CSS, именно эти иконки.

HTML код



Code
<h1>Монохромные CSS иконки</h1>
<div class="container">
   
  <!-- ### Down Arrow ### -->
  <div class="icon">
  <div class="downArrow"></div>
  </div>
   
  <!-- ### Up Arrow ### -->
  <div class="icon">
  <div class="upArrow"></div>
  </div>
   
  <!-- ### Left Arrow ### -->
  <div class="icon">
  <div class="leftArrow"></div>
  </div>
   
  <!-- ### Right Arrow ### -->
  <div class="icon">
  <div class="rightArrow"></div>
  </div>
   
  <!-- ### Home ### -->
  <div class="icon">
  <div class="home"></div>
  <div class="chimney"></div>
  </div>
   
  <!-- ### Disc ### -->
  <div class="icon">
  <div class="disc"></div>
  </div>
   
  <!-- ### Heart ### -->
  <div class="icon">
  <div class="heart"></div>
  </div>
   
  <!-- ### Pencil ### -->
  <div class="icon">
  <div class="pencil"></div>
  </div>
   
  <!-- ### Chat Box ### -->
  <div class="icon">
  <div class="chat"></div>
  <div class="lines"></div>
  </div>
   
  <!-- ### Tick ### -->
  <div class="icon">
  <div class="tick"></div>
  </div>
   
  <!-- ### Cross ### -->
  <div class="icon">
  <div class="cross"></div>
  </div>
   
  <!-- ### User ### -->
  <div class="icon">
  <div class="user"></div>
  <div class="shoulder"></div>
  </div>
   
  <!-- ### Search ### -->
  <div class="icon">
  <div class="search"></div>
  </div>
   
  <!-- ### Search with base ### -->
  <div class="icon">
  <div class="searchB"></div>
  </div>
   
  <!-- ### Phone ### -->
  <div class="icon">
  <div class="phone"></div>
  </div>
   
  <!-- ### iPod ### -->
  <div class="icon">
  <div class="ipod"></div>
  </div>
   
  <!-- ### Tab ### -->
  <div class="icon">
  <div class="tab"></div>
  </div>
   
  <!-- ### Graph1 ### -->
  <div class="icon">
  <div class="graph1"></div>
  <div class="bars"></div>
  </div>
   
  <!-- ### Screen ### -->
  <div class="icon">
  <div class="screen"></div>
  </div>
   
  <!-- ### Cloud ### -->
  <div class="icon">
  <div class="cloud"></div>
  </div>
   
  <!-- ### Cloud-Up ### -->
  <div class="icon">
  <div class="cloudUp"></div>
  <div class="cloudUpArrow"></div>
  </div>
   
  <!-- ### Cloud-Down ### -->
  <div class="icon">
  <div class="cloudDown"></div>
  <div class="cloudDownArrow"></div>
  </div>
   
  <!-- ### Page ### -->
  <div class="icon">
  <div class="page"></div>
  <div class="pageLines"></div>
  </div>
   
  <!-- ### RSS ### -->
  <div class="icon">
  <div class="rss"></div>
  </div>
   
  <!-- ### Battery Full ### -->
  <div class="icon">
  <div class="batFull"></div>
  </div>
   
  <!-- ### Battery Medium ### -->
  <div class="icon">
  <div class="batMed"></div>
  </div>
   
  <!-- ### Battery Low ### -->
  <div class="icon">
  <div class="batLow"></div>
  </div>
   
  <!-- ### Battery Empty ### -->
  <div class="icon">
  <div class="batEmpty"></div>
  </div>
   
  <!-- ### Speaker Volume Full ### -->
  <div class="icon">
  <div class="speakerVolF"></div>
  </div>
   
  <!-- ### Speaker Volume Half ### -->
  <div class="icon">
  <div class="speakerVolH"></div>
  </div>
   
  <!-- ### Speaker Volume Mute ### -->
  <div class="icon">
  <div class="speakerVolM"></div>
  </div>
   
  <!-- ### Play ### -->
  <div class="icon">
  <div class="play"></div>
  </div>
   
  <!-- ### Pause ### -->
  <div class="icon">
  <div class="pause"></div>
  </div>
   
  <!-- ### Forward ### -->
  <div class="icon">
  <div class="forward"></div>
  </div>
   
  <!-- ### Next ### -->
  <div class="icon">
  <div class="next"></div>
  </div>
   
  <!-- ### Rewind ### -->
  <div class="icon">
  <div class="rewind"></div>
  </div>
   
  <!-- ### Previous ### -->
  <div class="icon">
  <div class="previous"></div>
  </div>
   
  <!-- ### Stop ### -->
  <div class="icon">
  <div class="stop"></div>
  </div>
   
  <!-- ### Location ### -->
  <div class="icon">
  <div class="location"></div>
  </div>
   
  <!-- ### Clock ### -->
  <div class="icon">
  <div class="clock"></div>
  </div>
   
  <!-- ### Clock Alt ### -->
  <div class="icon">
  <div class="clockAlt"></div>
  </div>
   
  <!-- ### Pointer Right ### -->
  <div class="icon">
  <div class="pointerRight"></div>
  </div>
   
  <!-- ### Pointer Top ### -->
  <div class="icon">
  <div class="pointerTop"></div>
  </div>
   
  <!-- ### Pointer Left ### -->
  <div class="icon">
  <div class="pointerLeft"></div>
  </div>
   
  <!-- ### Pointer Down ### -->
  <div class="icon">
  <div class="pointerDown"></div>
  </div>
   
  <!-- ### Signals ### -->
  <div class="icon">
  <div class="signal1"></div>
  <div class="signal2"></div>
  </div>
   
  <!-- ### Graph2 ### -->
  <div class="icon">
  <div class="base"></div>
  <div class="bars2"></div>
  </div>
   
  <!-- ### Ribbon ### -->
  <div class="icon">
  <div class="ribbon"></div>
  </div>
   
  <!-- ### Video Cam ### -->
  <div class="icon">
  <div class="videoCam"></div>
  </div>
   
  <!-- ### Star ### -->
  <div class="icon">
  <div class="star"></div>
  </div>
   
  <!-- ### HeadPhones ### -->
  <div class="icon">
  <div class="headphones"></div>
  </div>
   
  <!-- ### Capsule ### -->
  <div class="icon">
  <div class="capsule"></div>
  </div>
   
  <!-- ### Microphone ### -->
  <div class="icon">
  <div class="mic"></div>
  <div class="holder"></div>
  </div>
   
  <!-- ### Tower ### -->
  <div class="icon">
  <div class="tower"></div>
  <div class="waves"></div>
  </div>
   
  <!-- ### IceCream ### -->
  <div class="icon">
  <div class="icecream"></div>
  </div>
   
  <!-- ### Golf ### -->
  <div class="icon">
  <div class="golf_stick"></div>
  <div class="golf_ball"></div>
  </div>
   
  <!-- ### PolyBag ### -->
  <div class="icon">
  <div class="polybag"></div>
  </div>
   
  <!-- ### BriefCase ### -->
  <div class="icon">
  <div class="briefcase_handle"></div>
  <div class="briefcase"></div>
  </div>
   
  <!-- ### Roller ### -->
  <div class="icon">
  <div class="roller_brush"></div>
  <div class="roller_handle"></div>
  </div>
   
  <!-- ### Magnet ### -->
  <div class="icon">
  <div class="magnet"></div>
  </div>
   
  <!-- ### Bomb ### -->
  <div class="icon">
  <div class="bomb"></div>
  </div>
   
  <!-- ### BirdHouse ### -->
  <div class="icon">
  <div class="birdhouse"></div>
  <div class="birdhouse_holes"></div>
  </div>
   
  <!-- ### Woofer ### -->
  <div class="icon">
  <div class="woofer"></div>
  </div>  
   
  <!-- ### HandBag ### -->
  <div class="icon">
  <div class="handbag"></div>
  </div>
   
  <!-- ### Bell ### -->
  <div class="icon">
  <div class="belltop"></div>
  <div class="bellbottom"></div>
  </div>
   
  <!-- ### SignBoard ### -->
  <div class="icon">
  <div class="signboard"></div>
  <div class="signboard_arrow"></div>
  </div>
   
  <!-- ### Music Note ### -->
  <div class="icon">
  <div class="musicnote_base"></div>
  <div class="musicnote_left"></div>
  <div class="musicnote_right"></div>
  <div class="musicnote_ovals"></div>
  </div>
   
  <!-- ### Key ### -->
  <div class="icon">
  <div class="key_base"></div>
  <div class="key_squares"></div>
  </div>
   
  <!-- ### Download ### -->
  <div class="icon">
  <div class="download"></div>
  </div>
   
  <!-- ### Upload ### -->
  <div class="icon">
  <div class="upload"></div>
  </div>
   
  <!-- ### Reload ### -->
  <div class="icon">
  <div class="reload"></div>
  </div>
   
  <!-- ### Redo ### -->
  <div class="icon">
  <div class="redo_l"></div>
  <div class="redo_r"></div>
  </div>
   
   
  <!-- ### LoopBack ### -->
  <div class="icon">
  <div class="loopback_l"></div>
  <div class="loopback_r"></div>
  </div>
   
  <!-- ### Target ### -->
  <div class="icon">
  <div class="target"></div>
  </div>
   
  <!-- ### Lock Closed ### -->
  <div class="icon">
  <div class="lockClosed_base"></div>
  <div class="lockClosed_handle"></div>
  </div>
   
  <!-- ### Lock Open ### -->
  <div class="icon">
  <div class="lockOpen_base"></div>
  <div class="lockOpen_handle"></div>
  </div>
   
  <hr />
  <h3 style="border: none; color: #333; margin: 0;">Новые!</h3>
  <hr />
   
  <!-- ### Weight ### -->
  <div class="icon">
  <div class="weight"></div>
  </div>
   
  <!-- ### Light Bulb ### -->
  <div class="icon">
  <div class="bulb_glass"></div>
  <div class="bulb_holder"></div>
  </div>
   
  <!-- ### Camera ### -->
  <div class="icon">
  <div class="camera_body"></div>
  <div class="camera_lens"></div>
  </div>
   
  <!-- ### EarBuds ### -->
  <div class="icon">
  <div class="earbud_left"></div>
  <div class="earbud_right"></div>
  </div>
   
  <!-- ### Restricted ### -->
  <div class="icon">
  <div class="restricted"></div>
  </div>
   
  <!-- ### Pin ### -->
  <div class="icon">
  <div class="pin_middle"></div>
  <div class="pin_bottom"></div>
  </div>
   
  <!-- ### Plus ### -->
  <div class="icon">
  <div class="plus"></div>
  </div>
   
  <!-- ### Minus ### -->
  <div class="icon">
  <div class="minus"></div>
  </div>
   
  <!-- ### Flask ### -->
  <div class="icon">
  <div class="flask_body"></div>
  <div class="flask_liquid"></div>
  </div>
   
  <!-- ### Test Tube ### -->
  <div class="icon">
  <div class="testtube_body"></div>
  <div class="testtube_bubbles"></div>
  </div>
   
  <!-- ### DustBin ### -->
  <div class="icon">
  <div class="dustbin"></div>
  </div>
   
  <!-- END -->
</div>

CSS код



Code
<style type="text/css">
body {
  padding: 0;
  margin: 0;
  background: #ECECEC
}

h1 {
  font: 700 40px / 25px "Calibri";
  text-align: center;
  color: #333;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
  margin: 50px 0 100px;
}

div.container {
  position: relative;
  width: 590px;
  margin: 0 auto;
}

div.container_d {
  position: relative;
  width: 592px;
  margin: 0 auto;
}

p {
  font-size: 13px;
  line-height: 18px;
  font-family: Arial, Helvetica, sans-serif;
}

hr {
  width: 592px;
  height: 1px;
  background: #888;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
}

h3 {
  font-size: 16px;
  line-height: 20px;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #aaa;
  padding: 8px 0;
  margin: 25px 0 10px;
}

code {
  margin: 0;
  padding: 20px;
  background: #ddd;
  border: 1px solid #fff;
  display: block;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
}

/*##### ICONS #####*/
div.icon {
  height: 32px;
  width: 32px;
  position: relative;
  margin: 15px;
  overflow: hidden;
  display: inline-block;
}

/* Down Arrow */
div.icon div.downArrow {
  height: 0px;
  width: 0px;
  border-width: 16px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  top: 16px;
  left: 0;
}

div.icon div.downArrow:after {
  content: '';
  width: 12px;
  height: 16px;
  background-color: #333;
  position: absolute;
  bottom: 16px;
  right: -6px;
}

/* Up Arrow */
div.icon div.upArrow {
  height: 0px;
  width: 0px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  position: absolute;
  bottom: 16px;
  left: 0;
}

div.icon div.upArrow:after {
  content: '';
  width: 12px;
  height: 16px;
  background-color: #333;
  position: absolute;
  top: 16px;
  right: -6px;
}

/* Left Arrow */
div.icon div.leftArrow {
  height: 0px;
  width: 0px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent #333 transparent transparent;
  position: absolute;
  right: 16px;
  top: 0;
}

div.icon div.leftArrow:after {
  content: '';
  width: 16px;
  height: 12px;
  background-color: #333;
  position: absolute;
  top: -6px;
  left: 16px;
}

/* Right Arrow */
div.icon div.rightArrow {
  height: 0px;
  width: 0px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent transparent #333;
  position: absolute;
  left: 16px;
  top: 0;
}

div.icon div.rightArrow:after {
  content: '';
  width: 16px;
  height: 12px;
  background-color: #333;
  position: absolute;
  top: -6px;
  right: 16px;
}

/* Home */
div.icon div.home {
  height: 0px;
  width: 0px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  position: absolute;
  bottom: 16px;
  left: 0;
}

div.icon div.home:after {
  content: '';
  width: 5px;
  height: 16px;
  background-color: transparent;
  position: absolute;
  top: 16px;
  right: -11px;
  border-left: 8px solid #333;
  border-right: 8px solid #333;
}

div.icon div.home:before {
  content: '';
  width: 9px;
  height: 6px;
  background-color: #333;
  position: absolute;
  top: 16px;
  right: -5px;
}

div.icon div.chimney {
  width: 4px;
  height: 10px;
  background: #333;
  position: absolute;
  right: 6px;
  top: 3px;
}

/* Disc */
div.icon div.disc:after {
  content: '';
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border: 3px solid #333;
  position: absolute;
  left: -3px;
  top: -3px;
}

div.icon div.disc:before {
  content: '';
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border: 13px solid #333;
  position: absolute;
  left: -13px;
  top: -13px;
  z-index: -1
}

div.icon div.disc {
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 10px solid #eee;
  position: absolute;
  left: 3px;
  top: 3px;
}

/* Heart */
div.icon div.heart {
  height: 26px;
  width: 16px;
  background: #333;
  -webkit-border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  border-radius: 100px 100px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  left: 5px;
  top: 2px;
}

div.icon div.heart:after {
  content: '';
  height: 26px;
  width: 16px;
  background: #333;
  -webkit-border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  border-radius: 100px 100px 0 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  position: absolute;
  right: -5px;
  bottom: -5px;
}

/* Pencil */
div.icon div.pencil {
  height: 23px;
  width: 6px;
  background: #333;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 12px;
  top: 6px;
}

div.icon div.pencil:after {
  content: '';
  height: 4px;
  width: 6px;
  background: #333;
  -webkit-border-radius: 2px 2px 0 0;
  -moz-border-radius: 2px 2px 0 0;
  border-radius: 2px 2px 0 0;
  position: absolute;
  top: -5px;
  left: 0px;
}

div.icon div.pencil:before {
  content: '';
  width: 0px;
  height: 0px;
  border-width: 5px 3px 0 3px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  bottom: -6px;
}

/* Chat Box */
div.icon div.chat {
  width: 32px;
  height: 22px;
  background: #333;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

div.icon div.chat:after {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  top: 16px;
  left: 2px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

div.icon div.lines {
  background-color: #eee;
  height: 2px;
  width: 17px;
  left: 5px;
  position: absolute;
  top: 5px;
}

div.icon div.lines:after {
  content: '';
  background-color: #eee;
  height: 2px;
  width: 10px;
  position: absolute;
  top: 5px;
}

div.icon div.lines:before {
  content: '';
  background-color: #eee;
  height: 2px;
  width: 22px;
  position: absolute;
  top: 10px;
}

/* Tick */
div.icon div.tick {
  width: 25px;
  height: 4px;
  background: #333;
  margin: 13px 0 0 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

div.icon div.tick:after {
  content: '';
  width: 12px;
  height: 4px;
  background: #333;
  position: absolute;
  top: -4px;
  left: -4px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* Cross */
div.icon div.cross {
  width: 25px;
  height: 4px;
  background: #333;
  margin: 15px 0 0 4px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

div.icon div.cross:after {
  content: '';
  width: 25px;
  height: 4px;
  background: #333;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* User */
div.icon div.user {
  width: 12px;
  height: 13px;
  background: #333;
  border-radius: 5px 5px 0 0;
  margin-left: 10px;
  margin-top: 2px;
}

div.icon div.user:after {
  content: '';
  width: 8px;
  height: 5px;
  background: #333;
  position: absolute;
  margin-top: 13px;
  margin-left: 2px;
}

div.icon div.user:before {
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  top: 17px;
  left: 0px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  border-width: 0 16px 6px 16px;
}

div.icon div.shoulder {
  width: 32px;
  height: 5px;
  background: #333;
  position: absolute;
  bottom: 4px;
}

/* Search */
div.icon div.search {
  height: 13px;
  width: 13px;
  background: transparent;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 4px solid #333;
}

div.icon div.search:after {
  content: '';
  width: 4px;
  height: 15px;
  background: #333;
  position: absolute;
  bottom: 2px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

/* Search */
div.icon div.searchB {
  width: 32px;
  height: 32px;
  background-color: #333;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

div.icon div.searchB:before {
  position: absolute;
  content: '';
  height: 6px;
  width: 6px;
  background: transparent;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 3px solid #eee;
  margin: 7px
}

div.icon div.searchB:after {
  content: '';
  width: 3px;
  height: 11px;
  background: #eee;
  position: absolute;
  bottom: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 10px;
}

/* Phone */
div.icon div.phone {
  position: absolute;
  width: 20px;
  height: 32px;
  background-color: #333;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-left: 6px;
}

div.icon div.phone:before {
  position: absolute;
  content: '';
  width: 16px;
  height: 20px;
  background: #eee;
  left: 2px;
  top: 5px;
}

div.icon div.phone:after {
  position: absolute;
  content: '';
  background: #eee;
  width: 3px;
  height: 3px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  bottom: 2px;
  left: 8px;
}

/* iPod */
div.icon div.ipod {
  width: 18px;
  height: 32px;
  background: #333;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  position: absolute;
  left: 7px;
}

div.icon div.ipod:after {
  content: '';
  position: absolute;
  width: 14px;
  height: 12px;
  background: #ddd;
  left: 2px;
  top: 2px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

div.icon div.ipod:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 3px solid #ddd;
  left: 3px;
  bottom: 3px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}

/* Tab */
div.icon div.tab {
  position: absolute;
  width: 28px;
  height: 32px;
  background-color: #333;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  left: 2px;
}

div.icon div.tab:before {
  position: absolute;
  content: '';
  width: 24px;
  height: 23px;
  background: #eee;
  left: 2px;
  top: 2px;
}

div.icon div.tab:after {
  position: absolute;
  content: '';
  background: #eee;
  width: 3px;
  height: 3px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  bottom: 2px;
  left: 12px;
}

/* Graph 1 */
div.icon div.graph1 {
  width: 28px;
  height: 28px;
  border-radius: 0 0 0 5px;
  -moz-border-radius: 0 0 0 5px;
  -webkit-border-radius: 0 0 0 5px;
  border: solid #333;
  border-width: 0 0 3px 3px;
}

div.icon div.bars {
  width: 5px;
  height: 10px;
  background: #333;
  position: absolute;
  bottom: 5px;
  right: 3px;
}

div.icon div.bars:before {
  position: absolute;
  content: '';
  width: 5px;
  height: 25px;
  background: #333;
  position: absolute;
  right: 6px;
  bottom: 0px;
}

div.icon div.bars:after {
  position: absolute;
  content: '';
  width: 5px;
  height: 18px;
  background: #333;
  position: absolute;
  bottom: 0px;
  right: 12px;
}

/* Screen */
div.icon div.screen {
  width: 28px;
  height: 24px;
  border: 2px solid #333;
  background: #eee;
}

div.icon div.screen:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 3px;
  background: #333;
  bottom: 2px;
  left: 11px
}

div.icon div.screen:after {
  position: absolute;
  content: '';
  width: 22px;
  height: 2px;
  background: #333;
  bottom: 0;
  left: 5px;
}

/* Cloud */
div.icon div.cloud {
  width: 32px;
  height: 12px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #333;
  margin-top: 14px;
}

div.icon div.cloud:before {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #333;
  top: 7px;
  right: 5px;
}

div.icon div.cloud:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #333;
  top: 9px;
  left: 4px;
}

// Полный код смотрите в демо
</style>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Гость 2012-11-11 в 11:19 / МатериалСпам
Вау, круто)
1
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.