BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Бесплатный набор CSS-иконок для сайта/блога. Коллекция №3

Бесплатный набор CSS-иконок для сайта/блога. Коллекция №3

2014-06-13 / Вр:00:30 / просмотров: 3911

Бесплатный набор CSS-иконок для сайта/блога. Коллекция №3

И снова продолжение темы «Бесплатный набор CSS-иконок для сайта/блога» с новыми красивыми иконками!

Иконка наушники

Иконка наушники

В HTML

<div class="headphones"> </div>

В CSS

.headphones{
font-size:20px;
width: 1.625em;
border: 0.2em solid #333;
height: 1.438em;
border-radius: 3em 3em 0 0;
border-bottom: none;
margin-left:-0.2em;
position: relative;
}

.headphones:before{
position: absolute;
content: '';
top: 1.1em;
left: 0.05em;
width: 0.313em;
height: 0.625em;
background: #2c2c2c;
border-radius: 0 0.125em 0.125em 0;
}
.headphones:after{
position: absolute;
content: '';
top: 1.1em;
left: 1.26em;
width: 0.313em;
height: 0.625em;
background: #2c2c2c;
border-radius: 0.125em 0 0 0.125em;
}

Иконка галочка

Иконка галочка

В HTML

<div class="checked"></div>

В CSS

.checked {
font-size: 10px;
   position: relative;
   width: 0.5em;
   height: 2.0em;
   margin: 30% auto;
   background: #2c2c2c;
   border-radius: 0.5em;
   -webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   transform: rotate(-30deg);
margin-left: -0.7em;
}

.checked:before {
   content: "";
   position: absolute;
   left:1em;
   top:-0.5em;
   width: 0.5em;
   height: 3.0em;
   background: #2c2c2c;
   border-radius: 0.5em;
   -webkit-transform: rotate(50deg);
   -moz-transform: rotate(50deg);
   -o-transform: rotate(50deg);
   -ms-transform: rotate(50deg);
   transform: rotate(50deg);
   }

Иконка внимание

Иконка внимание

В HTML

<div class="attention"></div>

В CSS

.attention{
	position:relative;
	width:0;
	height:0;
	margin:30% auto;
	border:solid 0.9em black;
	border-top-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
	border-bottom:solid 2em;
}

.attention:after{
	display:block;
	content:"";
	position:absolute;
	left:-0.1em;
	top:0.6em;
	width:0.2em;
	height:0.8em;
	background:white;
	border-radius:0.05em;
}

.attention:before{
	display:block;
	content:"";
	position:absolute;
	left:-0.1em;
	top:1.55em;
	width:0.2em;
	height:0.2em;
	background:white;
	border-radius:0.05em;
}

Иконка закрытого замка

Иконка закрытого замка

В HTML

<div class="lock"></div>

В CSS

.lock {
margin-top: 0.8em;
border-radius: 0.3em;
box-shadow: inset 0.9em 0.8em 0 0 #2C2C2C,inset -0.9em 0.8em 0 0 #2C2C2C,inset 0em -0.4em 0 0 #2C2C2C;
font-size: 18px;
width: 2em;
height: 1.8em;
position: relative;

}

.lock::before {
left: 0.32em;
border-radius: 1em 1em 0 0;
top: -0.8em;
position: absolute;
width: 0.8em;
content: "";
height: 1.8em;
border: 0.3em solid #2C2C2C;
border-bottom: none;
}

Иконка открытого замка

Иконка открытого замка

В HTML

<div class="lock"></div>

В CSS

.lock {
margin-top: 0.8em;
border-radius: 0.3em;
box-shadow: inset 0.9em 0.8em 0 0 #2C2C2C,inset -0.9em 0.8em 0 0 #2C2C2C,inset 0em -0.4em 0 0 #2C2C2C;
font-size: 18px;
width: 2em;
height: 1.8em;
position: relative;
}
.lock::before {
left: 1.4em;
border-radius: 1em 1em 0 0;
top: -0.8em;
position: absolute;
width: 0.8em;
content: "";
height: 0.8em;
border: 0.3em solid #2C2C2C;
border-bottom: none;
}

Иконка динамика

Иконка динамика

В HTML

<div class="speaker"> </div>

В CSS

.speaker{
width: 0.625em;
height: 0.625em;
background: #2c2c2c;
margin-left:-1em;
position:relative;
font-size:20px;
}

.speaker:before{
content: '';
position: absolute;
width: 0.313em;
height: 0.313em;
border-style: double;
border-color: #2C2C2C;
border-width: 0.500em 0.500em 0 0;
-webkit-border-radius: 0 3.125em 0 0;
-moz-border-radius: 0 3.125em 0 0;
border-radius: 0 3.125em 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
left: 1.188em;
top: -0.1em;

}

.speaker:after{
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent #2c2c2c transparent transparent;
border-width: 0.750em 1em 0.750em 0.938em;
left: -0.813em;
margin-top: -0.45em;
}

Иконка скачать

Иконка скачать

В HTML

<div class="download"> </div>

В CSS

.download{
width: 1.500em;
height: 0.500em;
border: 0.250em solid #2c2c2c;
border-top: none;
position: absolute;
bottom: 0.188em;
position: relative;
  margin-top:1em;
}

.download:before{
content: '';
position: absolute;
width: 0.438em;
height: 0.625em;
background: #2c2c2c;
top: -0.875em;
left: 0.563em;
}

.download:after{
width: 0em;
height: 0em;
content: '';
position: absolute;
border-style: solid;
border-color: #2c2c2c transparent transparent transparent;
border-width: 0.500em;
left: 0.250em;
top: -0.250em;

}

Иконка закачивать

Иконка закачивать

В HTML

<div class="upload"> </div>

В CSS

.upload{
width: 1.500em;
height: 0.500em;
border: 0.250em solid #2c2c2c;
border-top: none;
position: absolute;
bottom: 0.188em;
position: relative;
margin-top:1em;
}

.upload:before{
content: '';
position: absolute;
width: 0.438em;
height: 0.625em;
background: #2c2c2c;
top: -0.4em;
left: 0.563em;
}

.upload:after{
width: 0em;
height: 0em;
content: '';
position: absolute;
border-style: solid;
border-color: transparent transparent #2c2c2c transparent;
border-width: 0.500em;
left: 0.250em;
top: -1.4em;

}

Иконка ссылка

Иконка ссылка

В HTML

<div class="link"> </div>

В CSS

.link {
	font-size: 14px;
  margin-left:-1.1em;
  margin-top:1.3em;
	width: 0.5em;
	height: 1em;
	border: 0.250em solid #2c2c2c;
	border-bottom-left-radius: 1em 1em;
	border-bottom-right-radius: 1em 1em;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	bottom: 0.188em;
	border-top: solid 0em transparent;
	position: relative;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.link:before {
	content: '';
	display: block;
	width: 0.5em;
	top: -1.4em;
	left: -0.23em;
	height: 1em;
	border: 0.250em solid #2c2c2c;
	border-bottom-left-radius: 1em 1em;
	border-bottom-right-radius: 1em 1em;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	bottom: 0.188em;
	border-top: solid 0em transparent;
	position: absolute;

	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.link:after {
	content: '';
	position: absolute;
	display: block;
	width: 0.2em;
	top: -0.6em;
	left: 0.13em;
	height: 1em;
	border-radius: 1em;
	background: #2C2C2C;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

Иконка человечек

Иконка человечек

В HTML

<div class="man"> </div>

В CSS

.man {
	font-size: 10px;
	position: relative;
	background: #2C2C2C;
	width: 1.5em;
	height: 2.5em;
	margin-left: 0em;
	margin-top: -0.5em;
	border-radius: 0.4em;
}

.man:before {
	content: '';
	position: absolute;
	background: #2C2C2C;
	height: 2em;
	width: 0.5em;
	display: block;
	margin-left: -0.6em;

	-webkit-box-shadow: 2.2em 0em 0 0em #2C2C2C,0.70em 2.5em 0 0.1em #2C2C2C, 1.5em 2.5em 0em 0.1em #2C2C2C, 1.5em 2em 0em 0.1em #2C2C2C, 0.7em 2em 0em 0.1em #2C2C2C;
	box-shadow: 2.2em 0em 0 0em #2C2C2C,0.70em 2.5em 0 0.1em #2C2C2C, 1.5em 2.5em 0em 0.1em #2C2C2C, 1.5em 2em 0em 0.1em #2C2C2C, 0.7em 2em 0em 0.1em #2C2C2C;
	border-radius: 1em;
}

.man:after {
	content: '';
	position: absolute;
	background: #2C2C2C;
	height: 1.2em;
	width: 1.2em;
	display: block;
	border-radius: 50%;
	margin-top: -1.4em;
	margin-left: 0.15em;
}

Иконка закрыть

Иконка закрыть

В HTML

<div class="close"></div>

В CSS

.close{
  position:relative;
  width:0.3em;
  height:1.5em;
  background: #2C2C2C;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
font-size: 22px;
}
.close:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:0.3em;
  height:1.5em;
  background: #2C2C2C;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

Иконка отметка

Иконка отметка

В HTML

<div class="marker"></div>

В CSS

.close{
.marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
	width: 1.5em;
	height: 0.5em;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom-right-radius: 0.3em;
	border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.marker:before{
 border: 0.5em solid #2C2C2C;
	content: "";
	position: absolute;
	top: -0.8em;
	left: -1.28em;
	display: block;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
}

Иконка конверт

Иконка конверт

В HTML

<div class="mail"></div>

В CSS

.mail{
	font-size:12px;
	display:block;
	position:relative;
	border-top:1em solid transparent;
	border-left:1.5em solid #2c2c2c;
	border-right:1.5em solid #2c2c2c;
	border-bottom:1em solid #2c2c2c;
height:0;
width:0;
}
.mail:before{
    content: '';
    top: -1.23em;
    left: -1.5em;
    display: block;
    position: absolute;
    border-top: 1em solid #2c2c2c;
    border-left: 1.5em solid transparent;
    border-right: 1.5em solid transparent;
    border-bottom: 1em solid transparent;
    font-size: 0.8em;
}

Продолжение следует... :idea:  [ BlogGood.ru ]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573