Статьи

CSS иконки для сайта

Опубликовано: 01.09.2018

видео CSS иконки для сайта

HTML картинки и иконка сайта

Здравствуйте, сегодня поговорим о создании иконок (логотипов, лого) только с помощью 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 иконки для сайта: лупа, замок, мишень, домик

2011.11.19
Карта
rss