В сегодняшнем уроке разберем как создать красивый значок или иконку используя только чистый CSS3 код, более того один тег HTML <a>
и чистый код CSS3, пройдемся по содержанию урока:
- Создадим прямоугольник
- Округлим у него края
- Используя псевдоэлементы для создадим свернувшийся угол
- Полосатым градиентом создадим иллюзию текста.
Давайте сделаем это!
Шаг 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%); }
и вот после всех наших заморочек мы получаем вот такой великолепный значок:
Понятно, что в фотошопе проще сделать иконку, он разработан для работы с изображением. Но чтобы просто округлить углы — не всегда рационально использовать фотошоп, в уроке, на примере, доступно раскрыто, как это сделать, да и другой полезной информации можно черпнуть. Спасибо за статью.
сейчас совершенствую верстку и css3, стараюсь уходить от использования изображений где только можно, одно жаль что для IE(кроме 9) нужно включать разнообразные махинации, которые напрягают и мешают быстро делать работу
Хмм. прикольно, тока вот в фотошопе это намного легче создать, чем с листами стиля так тупить. Зачетный урок, много нового узнал. Сам я любитель css постепенно изучаю…
Согласен на 100%, я в основном использую изображения.
ну а вдруг прикроется бесплатное использование фотошопа)
Прикольно, конечно, что это можно сделать в CSS3, но если не нужна анимация инонки, я бы предпочел использовать изображение. Проще создать и меньше кода.