BloGGood.ru

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

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

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

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

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

2014-06-14 / Вр:22:49 / просмотров: 4157

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

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

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

В HTML

<div class="home"></div>

В CSS

.home {
font-size: 9px;
height: 1em;
width: 0.5em;
margin-top: 1em;
margin-left: -1em;
border-bottom: none;
border-right: 1.5em solid #2C2C2C;
border-left: 1.5em solid #2C2C2C;
border-top: 1.4em solid #2C2C2C;
position: relative;
}

.home::before {
border-left: 2.4em solid transparent;
position: absolute;
content: "";
top: -2.8em;
right: -2.1em;
width: 0em;
height: 0em;
border-right: 2.4em solid transparent;
border-bottom: 1.5em solid #2C2C2C;
}

Иконка комментария в CSS

Иконка комментария в CSS

В HTML

<div class="comment"></div>

В CSS

.comment {
font-size: 20px;
width: 2em;
height: 1.5em;
background: #2C2C2C;
border-radius: 0.2em;
position: relative;
}

.comment::before {
	position:absolute;
	content: "";
	bottom: -0.3em;
	right: 0.4em;
	width:0em;
	height:0em;
	border-bottom:0.4em solid transparent;
	border-left:0.4em solid #2C2C2C;

}

Иконка смайлик в CSS

Иконка смайлик в CSS

В HTML

<div class="smiley"></div>

В CSS

.smiley {
	border-radius: 1em;
-webkit-box-shadow: 0 0 0 .4em #2C2C2C, inset 0 0 0 .1em #2C2C2C;
box-shadow: 0 0 0 .4em #2C2C2C, inset 0 0 0 .1em #2C2C2C;
height: 2em;
position: relative;
width: 2em;
margin-top: 0.3em;
}

.smiley::after, .smiley::before {
background-image: -ms-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -webkit-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -moz-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -o-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: radial-gradient(transparent 35%, #2C2C2C 35%);
content: '';
height: 1em;
position: absolute;
top: 0;
width: 1em;
}

.smiley:after {
	border-radius: 1em 0 0 0;
	left: 0;
}

.smiley:before {
	border-radius: 0 1em 0 0;
	right: 0;
}

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

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

В HTML

<div class="fir"></div>

В CSS

.fir {
	height: 0em;
	width: 0em;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-bottom: 1.7em solid #2C2C2C;
	font-size: 20px;
	position: relative;

	-webkit-box-shadow: 0em 0.9em 0 -0.8em #2C2C2C,0em 1em 0 -0.8em #2C2C2C,0em 1.1em 0 -0.8em #2C2C2C,0em 1.2em 0 -0.8em #2C2C2C;
	box-shadow: 0em 0.9em 0 -0.8em #2C2C2C,0em 1em 0 -0.8em #2C2C2C,0em 1.1em 0 -0.8em #2C2C2C,0em 1.2em 0 -0.8em #2C2C2C;
}

.fir:before {
	left: -0.7em;
	top: -0.2em;
	height: 0em;
	width: 0em;
	content: '';
	display: block;
	position: absolute;
	border-left: 0.7em solid transparent;
	border-right: 0.7em solid transparent;
	border-bottom: 1em solid #2C2C2C;
}

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

Иконка фотоаппарата в CSS

Иконка фотоапарата в CSS

В HTML

<div class="camera"></div>

В CSS

.camera {
background-image: -webkit-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -moz-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -o-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -ms-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);

border-radius: .25em;
height: 2em;
position: relative;
width: 3em;
}
.camera::after {
border: .25em solid #2C2C2C;
border-bottom: none;
border-radius: .25em .25em 0 0;
content: '';
height: .25em;
left: .875em;
position: absolute;
top: -.5em;
width: .75em;
}
.camera::before {
background-color: #2C2C2C;
content: '';
height: .25em;
left: .25em;
position: absolute;
top: -.25em;
width: .5em;
}

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

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

В HTML

<div class="iphone"></div>

В CSS

.iphone {
font-size: 20px;
border-left: .2em solid #2C2C2C;
border-right: .2em solid #2C2C2C;
height: 1.75em;
position: relative;
width: 1.4em;
margin-top: -0.3em;
}

.iphone:after,.iphone:before {
content: '';
left: -.2em;
position: absolute;
width: 1.8em;
}

.iphone:after {
	background-color: #2C2C2C;
	border-radius: .25em .25em 0 0;
	height: .4em;
	top: -.4em;
}

.iphone:before {
	background-image: -webkit-radial-gradient(circle, transparent 12%, #2C2C2C 12%);
	background-image: -moz-radial-gradient(circle, transparent 12%, #2C2C2C 12%);
	background-image: -o-radial-gradient(circle, transparent 12%, #2C2C2C 12%);
	background-image: -ms-radial-gradient(circle, transparent 12%, #2C2C2C 12%);
	background-image: radial-gradient(circle, transparent 12%, #2C2C2C 12%);
	border-radius: 0 0 .25em .25em;
	bottom: -.7em;
	height: .7em;
}

Иконка включения в CSS

Иконка включения в CSS

В HTML

<div class="power"></div>

В CSS

.power {
	font-size: 13px;
	margin-top: -1.5em;
	border-radius: 1em;
	background: #2C2C2C;
	width: 0.4em;
	height: 1.2em;
	position: relative;
}

.power::before {
	right: -1.2em;

	-webkit-transform: rotate(-25deg);
	-moz-transform: rotate(-25deg);
	-o-transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	transform: rotate(-25deg);
	border-top: 0.4em solid rgba(44, 44, 44, 0);
	top: 0.2em;
	position: absolute;
	content: '';
	height: 2em;
	width: 2em;
	border-radius: 100%;
	border-right: 0.4em solid #2C2C2C;
	border-bottom: 0.4em solid rgba(44, 44, 44, 0);
	border-left: 0.4em solid rgba(44, 44, 44, 0);
}

.power::after {
	right: -1.2em;

	-webkit-transform: rotate(25deg);
	-moz-transform: rotate(25deg);
	-o-transform: rotate(25deg);
	-ms-transform: rotate(25deg);
	transform: rotate(25deg);
	border-top: 0.4em solid rgba(44, 44, 44, 0);
	top: 0.2em;
	position: absolute;
	content: '';
	height: 2em;
	width: 2em;
	border-radius: 100%;
	border-right: 0.4em solid #2C2C2C;
	border-bottom: 0.4em solid #2C2C2C;
	border-left: 0.4em solid #2C2C2C;
}

Иконка самолета в CSS

Иконка самолета в CSS

В HTML

<div class="airplane"></div>

В CSS

.airplane {
	-webkit-transform: rotate(33deg);
	-moz-transform: rotate(33deg);
	-o-transform: rotate(33deg);
	-ms-transform: rotate(33deg);
	transform: rotate(33deg);
	border-bottom: 0.7em solid #2C2C2C;
	border-top: 1em solid #2C2C2C;
	height: 0.2em;
	width: 0.2em;
	background: #2C2C2C;
	border-radius: 75% 75% 75% 75% / 30% 30% 70% 70%;
	font-size: 20px;
	position: relative;
}

.airplane::before {
	left: -0.89em;
	bottom: 0.15em;
	width: 0;
	content: '';
	display: block;
	position: absolute;
	border-left: 1em solid rgba(44, 44, 44, 0);
	border-right: 1em solid rgba(44, 44, 44, 0);
	border-bottom: 0.4em solid #2C2C2C;
}

.airplane::after {
	left: -0.3em;
	bottom: -0.6em;
	width: 0;
	content: '';
	display: block;
	position: absolute;
	border-left: 0.4em solid rgba(44, 44, 44, 0);
	border-right: 0.4em solid rgba(44, 44, 44, 0);
	border-bottom: 0.2em solid #2C2C2C;
}

Иконка карандаш в CSS

Иконка карандаш в CSS

В HTML

<div class="pencil"></div>

В CSS

.pencil{
    position: relative;
    width: 0.35em;
    height: 0.8em;
    background: #2C2C2C;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 1.4em;
}

.pencil:before{
    content: "";
    position: absolute;
    top: -0.35em;
    left: 0;
    width: 0.35em;
    height: 0.3em;
    background: #2C2C2C;
    border-radius: 0.1em;
}

.pencil:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0.85em;
  	left: 0;
    border: solid 0.2em #2C2C2C;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top: solid 0.45em #2C2C2C;
}

Вот и все! Чудные красивые иконки, созданные на чистом CSS без использовании графики, у меня закончились.

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

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

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

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

;-) :| :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

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

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