Иконка домика в 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
В 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
В 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
В 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
В 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
В 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
В 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
В 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
В 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 без использовании графики, у меня закончились.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Новогоднее украшение для сайта
Оформление ссылок с плавным эффектом для CSS
Бесплатный набор CSS-иконок для сайта/блога. Коллекция №1
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222520 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187696 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Добавить комментарий
Метки: css, эффекты для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐