И снова продолжение темы «Бесплатный набор 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; }
Продолжение следует... [ BlogGood.ru ]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222535 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187746 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Добавить комментарий
Метки: css, эффекты для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐