Создаем красивую иконку с помощью CSS3

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


Посмотреть демо

Шаг 1. Создание прямоугольника

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

Document Icon

Давайте зададим некоторые параметры нашей иконки. Размер сделаем 40х56px для данного примера. В реальном проекте, я думаю, размер будет порядком меньше. Так же стоит иметь ввиду, что нам необходимо установить свойство 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. Рекомендуется использовать так же конструкции с префиксами для браузеров. Дабы ускорить процесс создания конструкций с префиксами рекомендую воспользоваться сервисом http://prefixr.com/. Просто скопируйте нужный код в рабочее окно этого сервиса и нажмите кнопку «Prefixize» и вы получите готовые варианты конструкций для всех браузеров. Наш код примет такой вид:

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

Ну и наконец давайте добавим немного тени нашему прямоугольнику с помощью box-shadow. Я так же буду использовать text-indent для того, чтобы спрятать текст:

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

Вот что мы имеем в итоге:
прямоугольник CSS

Шаг 2. Закругляем углы

Далее мы закруглим углы у нашего прямоугольника. Чтобы сделать это — добавьте вот такой код:

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

Изменяю эти 4 параметра вы можете задать собственные размеры для радиусов углов. Это похоже на работу со свойствами margin и padding.
Мы получим вот такой прямоугольник с закругленными углами:
прямоугольник с закругленными углами CSS

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

Для создания загнутого угла мы будем используем псевдо-элементы. Для начала мы добавим псевдо-элемент :before. Ничего особенного мы делать не будем. Мы просто создадим еще один прямоугольник размером 15х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;

И итог у нас выглядит уже очень приятно:
прямоугольник с загнутым углом CSS

Шаг 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;
}

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

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

А вот и итог нашей работы:
иконка на CSS3

Посмотреть демо

Ну а если Вы житель Киева, то погода Киев не испортит, если знать ее заранее. Загляните в прогноз на сайте http://www.meteoprog.ua.

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



Запись опубликована в рубрике CSS3 с метками , , , , . Добавьте в закладки постоянную ссылку.

Один комментарий: Создаем красивую иконку с помощью CSS3

  1. Алексей Калиев говорит:

    Неплохо так выглядит!

Добавить комментарий для Алексей Калиев Отменить ответ

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