Exore LTD » CSS3 » Как создать красивую иконку на CSS3
Лого SiteHere.ru

Июль 3, 2014 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Как создать красивую иконку на CSS3

Красивая иконка на CSS3

Сегодня я хочу рассказать о интересном способе создать иконку на CSS3. При этом нам понадобиться только один HTML элемент.

Пример иконки можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

Для создания иконки будем использовать блок div с классом stage, а внутри находится ссылка, для того чтобы сделать этот блок ссылкой:

1
2
3

<div class="stage">
    <a href="#" class="docIcon"></a>
</div>



CSS часть

Основной стиль для иконки сделаем следующий:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.docIcon
{
    background:#eee;
    background:-moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
    background:-webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
    border:1px solid #ccc;
    -moz-border-radius:3px 15px 3px 3px;
    -webkit-border-radius:3px 15px 3px 3px;
    border-radius:3px 15px 3px 3px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    display:block;
    width:40px;
    height:56px;
    position:relative;
    text-indent:-9999em;
    margin:42px auto;
}

Сейчас необходимо загнуть один угол. Для этого будем использовать псевдоэлемент :before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.docIcon:before
{
    content:"";
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:15px;
    height:15px;
    background:#ccc;
    background:-moz-linear-gradient(45deg, #fff 0,  #eee 50%, #ccc 100%);
    background:-webkit-linear-gradient(45deg, #fff 0,  #eee 50%, #ccc 100%);
    box-shadow:rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
    border-bottom:1px solid #ccc;
    border-left:1px solid #ccc;
    -moz-border-radius:0 14px 0 0;
    -webkit-border-radius:0 14px 0 0;
    border-radius:0 14px 0 0;
}

Добавим три линии нашей иконке:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.docIcon:after
{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:60%;
    margin:22px 20% 0;
    background:#ccc;
    background:-moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background:-webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    height:15px;
}

Сейчас наша иконка готова!



Вывод

С помощью несложных действий мы создали симпатичную иконку, которую можно модифицировать при желании, немного придать ей разных красок и использовать у себя на сайте. Преимуществом данной кнопки является то, что она не использует изображений, а значит и загружается быстрее чем картинка.


Успехов!

Источник: net.tutsplus.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *