Создаем красивый значок используя CSS3

В сегодняшнем уроке разберем как создать красивый значок или иконку используя только чистый CSS3 код, более того один тег HTML <a> и чистый код CSS3, пройдемся по содержанию урока:

1. Создадим прямоугольник
2. Округлим у него края
3. Используя псевдоэлементы для создадим свернувшийся угол
4. Полосатым градиентом создадим иллюзию текста.

Давайте сделаем это!

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

Начнем с добавления нашего единственного HTML элемента — ссылки (это полезно потому, что часто иконки-значки используются для ссылок):

<a class="addPost" href="#">Добавить статью</a>

Зададим для нашего примера высоту и ширину 40 х 56 px (для своих проектов Вы конечно же можете использовать любые числовые варианты), фон, градиент, отступы и не забудьте про dispay: block;.

.addPost {
	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 синтаксис для отображения градиента.

Еще такое примечание: мы же хотим быть довольными и чтобы все браузеры радовались, поэтому нужно поддобавить для полного счастья еще такие строки кода:

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

Добавим тень нашему прямоугольнику и скроем текст

.addPost {
   ...
    -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. Округляем углы

Округлим все углы (кроме правого верхнего) на 4px

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

Получим, вот такую эффектную иконку:

Шаг 3. Создадим завернутый угол

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

.addPost: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% и отступами справа и слева по 20%, высоту и положение определим в нули 0 0.

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

Одну линию создать не проблема, а вот набор линий это уже сложней. Но мы парни и девочки собачку съели на всяких трюках поэтому будем использовать CSS3 градиенты для достижения нужного эффекта. Для начала разделим общую высоту на пять и закрасим каждый блок сплошной заливкой, как на скриншоте:

Добавляем финальный код

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

и вот после всех наших заморочек мы получаем вот такой великолепный значок: