BloGGood.ru

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

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

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

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

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

2014-06-11 / Вр:00:25 / просмотров: 4110

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

Всем привет! Продолжение темы «Бесплатный набор CSS-иконок для сайта/блога». Коллекция №2.
В предыдущей статье я говорил, что с помощью CSS любой веб-мастер или верстальщик сайтов сможет создать красивые иконки для сайта или блога, не используя графических элементов.
О том, какие преимущества имеют CSS-иконки вы можете узнать, заглянув в коллекцию №1.

Иконка facebook в CSS

Иконка facebook в CSS

В HTML

<div class="facebook"></div>

В CSS

.facebook {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #2C2C2C;
display: block;
border-radius: 0.3em;
}

.facebook::before {
left: 0.85em;
top: 0.7em;
position: absolute;
display: block;
content: "";
height: 0.3em;
width: 0.85em;
background: #EDEEE8;
}
.facebook::after {
left: 1.1em;
top: 0.1em;
position: absolute;
display: block;
content: "";
height: 1.5em;
width: 0.3em;
border-radius: 0.4em 0 0 0;
border: 0.3em solid #EDEEE8;
border-right: 0;
border-bottom: 0;
}

Иконка Googleplus в CSS

Иконка Googleplus в CSS

В HTML

<div class="googleplus"></div>

В CSS

.googleplus {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #2C2C2C;
display: block;
border-radius: 0.3em;
overflow: hidden;
}
.googleplus::before {
left: -0.1em;
font-size: 2.9em;
top: -0.36em;
position: absolute;
display: block;
content: "g";
color: #EDEEE8;
font-family: georgia;
}
.googleplus::after {
left: 0.9em;
top: -0.3em;
position: absolute;
display: block;
content: "+";
font-size: 1.25em;
font-weight: bold;
color: #EDEEE8;
font-family: georgia;
}

Иконка Twitter в CSS

Иконка Twitter в CSS

В HTML

<div class="twitter"></div>

В CSS

.twitter {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #2C2C2C;
display: block;
border-radius: 0.3em;
}
.twitter::before {
left: 0.55em;
top: 0.4em;
position: absolute;
display: block;
content: "";
height: 1.2em;
width: 0.32em;
background: #2C2C2C;
border-radius: 0.5em 0.5em 0 0.9em;
box-shadow: 0 0 0 0.15em #EDEEE8;
}
.twitter::after {
left: 0.87em;
top: 1.143333em;
position: absolute;
display: block;
content: "";
height: 0.32em;
width: 0.62em;
background: #2C2C2C;
border-radius: 0 0.4em 0.4em 0;
box-shadow: 0 -0.57em 0 -0.15em #2C2C2C,-0.2em -0.57em 0 -0.15em #2C2C2C,0 -0.57em 0 0em #EDEEE8;
border: 0.15em solid #EDEEE8;
border-left: 0;
}

Иконка уменьшить

Иконка уменьшить

В HTML

<div class="zoomout"></div>

В CSS

.zoomout {
	position: relative;
	width: 1.5em;
	height: 1.5em;
	margin: 30% auto;
	border: solid .35em #2c2c2c;
	border-radius: 50%;
font-size:13px;
}

.zoomout:before {
	content: "";
	position: absolute;
	top: .6em;
	left: .35em;
	width: .85em;
	height: .29em;
	background: #2c2c2c;
}

.zoomout:after {
	content: "";
	position: absolute;
	top: 1.2em;
	left: -.4em;
	width: .5em;
	height: 1.5em;
	background: #2c2c2c;
	border-radius: .2em;
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	transform: rotate(40deg);
}

Иконка увеличить

Иконка увеличить

В HTML

<div class="zoomin"></div>

В CSS

.zoomin {
	position: relative;
	width: 1.5em;
	height: 1.5em;
	margin: 30% auto;
	border: solid .35em #2c2c2c;
	border-radius: 50%;
font-size:13px
}

.zoomin:before {
	content: "";
	position: absolute;
	top: .6em;
	left: .385em;
	width: .25em;
	height: .25em;
	background: #2c2c2c;

	-webkit-box-shadow: .2em 0 0 #2c2c2c, .35em 0 0 #2c2c2c, .5em 0 0 #2c2c2c, .5em 0 0 black, .25em .2em 0 black, .25em .3em 0 black, .25em -.2em 0 black, .25em -.3em 0 black;
	box-shadow: .2em 0 0 black, .35em 0 0 black, .5em 0 0 black, .5em 0 0 black, .25em .2em 0 black, .25em .3em 0 black, .25em -.2em 0 black, .25em -.3em 0 black;
}

.zoomin:after {
	content: "";
	position: absolute;
	top: 1.2em;
	left: -.4em;
	width: .5em;
	height: 1.5em;
	background: #2c2c2c;
	border-radius: .2em;

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

Иконка видео в CSS

Иконка видео в CSS

В HTML

<div class="video"></div>

В CSS

.video{
	width:1.3em;
	height:1em;
	margin:30% auto;
	position:relative;
	background:#2c2c2c;
	border-radius:15%;
font-size:20px;
}

.video:after{
	display:block;
	position:absolute;
	left:0.7em;
	content:"";
	width:0;
	height:0;
	border-right:0.5em solid  #2c2c2c;
	border-left: 0.5em solid  transparent;
	border-top: 0.5em solid  transparent;
	border-bottom:0.5em solid  transparent;
}

Иконка будильник в CSS

Иконка будильник в CSS

В HTML

<div class="clock"></div>

В CSS

.clock {
	position: relative;
	width: 1.5em;
	height: 1.5em;
	margin: 30% auto;
	background: #EDEEE8;
	border: solid .28em #2c2c2c;
	border-radius: 50%;

	box-shadow: 0 -.125em 0 .08em #EDEEE8, inset 0 0 .2em #2c2c2c, -.6em -.7em 0 -.5em #2c2c2c, .6em -.7em 0 -.5em #2c2c2c;
}

.clock:after {
	position: absolute;
	left: .6em;
	top: .25em;
	content: "";
	width: .2em;
	height: .2em;
	background: #2c2c2c;
	box-shadow: 0 .2em 0 0 #2c2c2c, 0 .4em 0 0 #2c2c2c, 0 .5em 0 0 #2c2c2c, .2em .5em 0 0 #2c2c2c, .3em .5em 0 0 #2c2c2c;
}

.clock:before {
	position: absolute;
	left: .2em;
	top: 1.1em;
	content: "";
	width: 1em;
	height: .9em;
	border: solid .25em #2c2c2c;
	border-left: transparent;
	border-bottom: transparent;

	-webkit-transform: rotate(-44deg);
	-moz-transform: rotate(-44deg);
	-o-transform: rotate(-44deg);
	-ms-transform: rotate(-44deg);
	transform: rotate(-44deg);
	z-index: -1;
}

Иконка часы в CSS

Иконка часы в CSS

В HTML

<div class="clock"></div>

В CSS

.clock {
	width: 1em;
	height: 1em;
	display: block;
	position: relative;
	border: 0.2em solid #2c2c2c;
	border-radius: 1em;

	-webkit-box-shadow: inset 0 0 0 0.025em #FFF, inset -0.1em -0.1em 0.2em rgba(0,0,0,0.1), inset 0 0 0.2em 0.2em rgba(0,0,0,0.1);
	box-shadow: inset 0 0 0 0.025em #FFF, inset -0.1em -0.1em 0.2em rgba(0,0,0,0.1), inset 0 0 0.2em 0.2em rgba(0,0,0,0.1);

font-size:20px;
}

.clock:after {
	content: '';
	position: absolute;
	display: block;
	width: 0.3em;
	height: 0.4em;
	left: 0.45em;
	top: 0.075em;
	border-left: 0.1em solid #2c2c2c;
	border-bottom: 0.1em solid #2c2c2c;
}

Иконка профиль

Иконка профиль

В HTML

<div class="profil"></div>

В CSS

.profil {
	font-size: 24px;
	top: 0.5em;
	border-radius: 0.7em 0.7em 0 0;
	background: #2C2C2C;
	width: 1.5em;
	height: 0.8em;
	position: relative;
}

.profil::before {
	position: absolute;
	content: "";
	top: -0.9em;
	left: 0.38em;
	width: 0.8em;
	height: 0.85em;
	border-radius: 50%;
	background: #2C2C2C;
}

Иконка файл

Иконка файл

В HTML

<div class="file"></div>

В CSS

.file {
font-size: 16px;
border-top: 0.2em solid #2C2C2C;
position: relative;
width: 1em;
height: 2em;
border-right: 0.2em solid #2C2C2C;
border-bottom: 0.2em solid #2C2C2C;
}

.file::before {
bottom: -0.2em;
left: -0.5em;
position: absolute;
width: 0.5em;
height: 1.72em;
border-left: 0.2em solid #2C2C2C;
border-bottom: 0.2em solid #2C2C2C;
content: "";
}
.file::after {
top: -0.2em;
left: -0.50em;
position: absolute;
border-right: 0.5em solid #2C2C2C;
border-top: 0.5em solid transparent;
content: "";
}

Иконка батарейка

Иконка батарейка

В HTML

<div class="battery"></div>

В CSS

.battery {
	display: block;
	position: relative;
	width: 2em;
	height: 0.8em;
	border: 0.2em solid #2c2c2c;

	-webkit-box-shadow: inset 0 -0.2em 0.2em rgba(0,0,0,0.2);
	box-shadow: inset 0 -0.2em 0.2em rgba(0,0,0,0.2);
}

.battery:after {
	content: '';
	display: block;
	position: relative;
	top: 0.1em;
	left: 2em;
	background: #2c2c2c;
	width: 0.4em;
	height: 0.6em;
}

.battery:before {
	content: '';
	position: absolute;
	display: block;
	top: 0.05em;
	left: 0.05em;
	width: 1.3em;
	height: 0.7em;
	background: #2c2c2c;
}
}
.file::after {
top: -0.2em;
left: -0.50em;
position: absolute;
border-right: 0.5em solid #2C2C2C;
border-top: 0.5em solid transparent;
content: "";
}

Иконка телефон в CSS

Иконка телефон в CSS

В HTML

<div class="phone"></div>

В CSS

.phone {
	display: block;
	position: relative;
	width: 1em;
	height: 0;
	border-bottom: 1.5em solid #2c2c2c;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
	border-radius: 0.5em;
	margin-top: 0.5em;
}

.phone:before {
   content: '';
       position: absolute;
       width: 1.4em;
       height: 0em;
       border-top: 0.2em solid #2c2c2c;
       border-left: 0.4em solid #2c2c2c;
       border-right: 0.4em solid #2c2c2c;
       border-bottom: 0.5em solid transparent;
       display: block;
       top: 0;
       left: 0;
       margin: -0.4em 0 0 -0.6em;
       border-radius: 0.2em;
}

.phone:after {
	content: '';
	position: absolute;
	color: #2c2c2c;
	font: bold 0.64em/1.2em sans-serif;
	position: absolute;
	top: 0.3em;
	left: 0;
	background: #FFF;
	display: block;
	width: 1.2em;
	text-align: center;
	height: 1.2em;
	border-radius: 1.2em;
	border: 0.3em dotted #2c2c2c;
}

Иконка джойстик в CSS

Иконка джойстик в CSS

В HTML

<div class="controller"></div>

В CSS

.controller {
font-size: 8px;
background: #2C2C2C;
position: relative;
height: 0.4em;
width: 0.2em;
margin-top: -1.2em;
}

.controller::before {
box-shadow: 2.4em 0em 0 -0.2em #EDEEE8,1.3em 0em 0 -0.2em #EDEEE8,1.4em 0em 0 -0.2em #EDEEE8,1.5em 0em 0 -0.2em #EDEEE8,1.6em 0em 0 -0.2em #EDEEE8,2.3em 0em 0 -0.2em #EDEEE8,2.5em 0em 0 -0.2em #EDEEE8,2.6em 0em 0 -0.2em #EDEEE8,0.5em 0em 0 0 #EDEEE8,-0.5em 0em 0 0 #EDEEE8,0em -0.5em 0 0 #EDEEE8,0em 0.5em 0 0 #EDEEE8,1.1em -0.05em 0 0.95em #2C2C2C,1.759em -0.05em 0 0.95em #2C2C2C,3.2em -0.8em 0 0.2em #2C2C2C,3.2em 0.77em 0 0.2em #2C2C2C;
top: 1.3em;
left: -2.1em;
z-index: 99999;
height: 0.5em;
width: 0.5em;
background: #EDEEE8;
content: '';
display: block;
position: absolute;
}

.controller::after {
z-index: 1;
content: "";
display: block;
left: 1.9em;
top: 2em;
position: absolute;
background: #EDEEE8;
width: 0.6em;
height: 0.6em;
border-radius: 100%;
box-shadow: -0.8em -0.8em 0 0 #EDEEE8,0.8em -0.8em 0 0 #EDEEE8,0em -1.6em 0 0 #EDEEE8,0em -0.8em 0 1em #2C2C2C,-4em -0.8em 0 1em #2C2C2C;
}

Продолжение следует... :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