Lecaw

Учимся создавать Web-сайты

Как создать красивые иконки с помощью CSS3 \ Скачать красивые иконки

August 16, 2013
CSS
476hits

Сегодня я хотел бы показать вам интересный трюк. Мы создадим иконки документа на чистом CSS3. И еще один большой плюс, это то, что мы использовали для этого всего один элемент HTML.

ДЕМО Исходные файлы

 

План действий

  1. Создать блок
  2. Закругленный угол
  3. Использовать псевдо-элементы чтобы создать загнутый угол
  4. Создать иллюзию текста при помощи полосатого градиента

Шаг 1. Создание блока

Начнем с создания единственного HTML элемента: ссылки. Это для того, чтобы наши иконки отображались в качестве ссылки.

<a class="docIcon" href="#">Document Icon</a>

Давайте установим размеры для нашей иконки. Мы сделаем её размером 40x56px. Кроме того, имейте в виду, что нам нужно добавить свойство display: block, так как ссылка имеет значение по умолчанию - Inline.

.docIcon
{
    background:#eee;
    background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
    border:1px solid #ccc;
    display:block;
    width:40px;
    height:56px;
    position:relative;
    margin:42px auto;
}

Также хочу отметить, мы установили позиционирование, это для работы с псевдо-элементами. Я использовал официальный CSS3 синтаксис для градиента. Вы также можете использовать различные префиксы браузеров. Для ускорения процесса, вы можете использовать Prefixr.com, либо его API в вашем редакторе кода. Просто скопируйте фрагмент кода выше, вставьте его в текстовое поле Prefixr, а затем нажмите кнопку подтверждения.

.docIcon {
   background: #eee;
 
   background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
 
   border: 1px solid #ccc;
   display: block;
   width: 40px;
   height: 56px;
   position: relative;
   margin: 42px auto;
}

Далее, давайте добавим немного блеска нашей иконки, для этого используем CSS box shadows. Я также использовал отступы, чтобы скрыть лишний текст.

.docIcon
{
   ...
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
 
    text-indent:-9999em;
}

Что мы имеем на данном этапе:

Шаг 2. Закругленный угол

Далее, у иконки, нам необходимо создать эффект закругленного угла:

.docIcon
{
    ...
    -webkit-border-radius:3px 15px 3px 3px;
    -moz-border-radius:3px 15px 3px 3px;
    border-radius:3px 15px 3px 3px;
}

Шаг 3. Согнутый угол

Во-первых, добавьте content :before для нашей иконки. В этом случае, нам не понадобится специальный текст. Вместо этого нам нужно создать рамку размером 15px и применить к ней градиентный фон.

.docIcon:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 15px;
   height: 15px;
   background: #ccc;
 
   background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
 
   -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   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;
}

Далее нам необходимо получить круглые края:

...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;

Шаг 4. Добавление линий

Теперь, мы собираемся использовать псевдо-элемент :after, чтобы добавить пунктирные линии.

.docIcon:after
{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:60%;
    margin:22px 20% 0;
    height:15px;
}

Создание нескольких линий немного сложнее. Мы можем использовать CSS градиенты для достижения такого эффекта. Во-первых, разделим общую высоту на пять частей, и установим в каждом блоке сплошную заливку (См. изображение ниже).

.docIcon:after
{
    ...
    background:#ccc;
    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%);
    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: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

Оставить комментарий