Новости
Статьи
CSS иконки для сайта
Опубликовано: 01.09.2018
Здравствуйте, сегодня поговорим о создании иконок (логотипов, лого) только с помощью CSS.
Скачать исходники для статьи можно ниже1. Рыбка:
CSS код рыбки:
.fish{ width: 2.1em; height: 2.1em; margin: 2em auto; position: relative; border-radius: 1.5em 0em 1.5em 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #2C2C2C; } .fish::before { position: absolute; content: ""; top: 1.8em; right: 1.4em; width: 0.3em; height: 0em; border-bottom: 0.5em solid #2C2C2C; border-left: 0.5em solid transparent; border-right: 0.5em solid transparent; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .fish::after { left: 0.92em; top: 0.18em; position: absolute; content: ""; background-color: white; font-weight: bold; font-size: 1.5em; height: 0.2em; width: 0.2em; border-radius: 0.1em; -webkit-box-shadow: 0.15em -0.7em 0.05em 0.02em #2C2C2C, -0.1em -1.2em 0.05em 0.06em #2C2C2C; box-shadow: 0.15em -0.7em 0.05em 0.02em #2C2C2C, -0.1em -1.2em 0.05em 0.06em #2C2C2C; }
Как сделать социальную панель (фиксированный блок) с HTML и CSS3
Код блока с отображение рыбки:
<div class="fish"></div>
Демо-пример можете посмотреть здесь — CSS иконка рыбки!
Пример вставки рыбки в сайдбар сайта на wordpress:
— Открываем виджет «Текст» и вставляем в него код блока с классом «fish», а именно: заходим в панель управления wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Виджеты», находим виджет с названием «Текст» и перетаскиваем его в сайдбар, внутри него пишем следующий код:
Шрифтовые иконки Font Awesome, 100% информации
<div class="fish"></div>
— Далее прописываем CSS код в файле стилей — style.css для того, чтобы блок «fish» принял образ рыбки, а именно: заходим в панель управления wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», слева в списке шаблонов ищем файл стилей — style.css и вставляем в него (можно в самый низ) CSS код рыбки, который указан выше.
.fish{ ... }
2. Батарейка
CSS код батарейки:
.battery { display: block; position: relative; width: 2em; margin: 2em auto; 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.03em; width: 1.3em; height: 0.7em; background: #2c2c2c; }
Код блока с отображение батарейки:
<div class="battery"></div>
Демо-пример можете посмотреть здесь — CSS иконка батарейки!
3. Аптечка
CSS код аптечки:
.heal { width: 2em; margin: 2em auto; height:1.5em; border-radius:0.2em; position:relative; border: 0.2em solid #2c2c2c; } .heal::before { position: absolute; content: ""; top: -0.4em; right: 0.4em; width: 0.4em; height: 0em; border-bottom: 0.4em solid #2C2C2C; border-left: 0.4em solid transparent; border-right: 0.4em solid transparent; } .heal::after { box-shadow: 0.3em 0 0 #FF0016,-0.3em 0 0 #FF0016,0 0.3em 0 #FF0016,0 -0.3em 0 #FF0016; left: 0.85em; top: 0.6em; position: absolute; background: #FF0016; height: 0.3em; width: 0.3em; content: ""; }
Код блока с отображение аптечки:
<div class="heal"></div>
Демо-пример можете посмотреть здесь — CSS иконка аптечки!
4. Тучка
CSS код тучки:
.cloud { background-color: #2C2C2C; margin: 2em auto; background-image: -webkit-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1)); background-image: -moz-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1)); background-image: -o-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1)); background-image: -ms-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1)); background-image: linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1)); border-radius: 1em; height: 1em; margin-top: 0.5em; position: relative; width: 3em; } .cloud:after,.cloud:before { background-color: #2C2C2C; content: ''; border-radius: 100%; position: absolute; } .cloud:after { background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025)); background-image: -moz-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025)); background-image: -o-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025)); background-image: -ms-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025)); background-image: linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025)); height: 1em; right: .4em; top: -.5em; width: 1em; } .cloud:before { background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075)); background-image: -moz-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075)); background-image: -o-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075)); background-image: -ms-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075)); background-image: linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075)); height: 1.6em; left: .4em; top: -.75em; width: 1.6em; }Код блока с отображение тучки:
<div class="cloud"></div>
Демо-пример можете посмотреть здесь — CSS иконка тучки!
Продолжение статьи читайте тут — CSS иконки для сайта: лупа, замок, мишень, домик
