Создание красивых иконок с CSS3

Сегодня рассмотрим отличный метод. Создадим иконку с  чистым CSS3. Более того, этот эффект требует только одного HTML-элемента.

Скачать (Исходник)
Downloaded 5 times

Шаг 1: Создание коробки

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

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

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

.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. Также применим текстовые отступа.

.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: Один заложенный угол

Нужно добавить содержимое: 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 будем использовать пунктирные линии, чтобы  уменьшить масштаб текста. Применяем ширину 60%, а margin-left и margin-rightот 20% (что вместе составляет 100%). Высоту и положение определим по 0 0.

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

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

Несколько линий с CSS3 Gradienst

.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%);
}

Конечный результат

Ну вот и все ребята завтра будет новый урок а на конец полезная ссылка программа для создания сайта.