Что можно сделать для дизайна самих иконок и при наведении на них курсора мыши? Да то же самое, что и с рядовым текстом — менять цвет текста, фона, параметры шрифта, в общем, всё что позволяют стили. Так, для изменения цвета фона под пунктом меню и, соответственно, иконкой, достаточно к стилю ссылки добавить background, и для контрастности ещё и color (пример 2).
Пример 2. Стиль для смены цвета фона и текста
.menu a:hover {
background: #ffe71a;
color: #000;
}
Также можно сделать дизайн в олдскульной манере, добавив свечение вокруг иконок при наведении. Это делается с помощью свойства text-shadow, как показано в примере 3.
Чтобы свечение было более заметным, мне пришлось три раза повторить параметры тени.
Ну, и не забываем про модную нынче анимацию и заставляем наши иконки весело вращаться и плавно менять цвет (пример 4).
Пример 4. Анимация при наведении
.icon {
transition: 1s;
}
.menu a:hover .icon {
color: #ffe71a;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
В общем, поведение и дизайн таких иконок зависит практически только от вашей фантазии.
Рамки и границы
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border, как наиболее универсальное, а также outline и, как ни удивительно, box-shadow, основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border, но существенно отличается от него некоторыми деталями:
• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Возникает вопрос — в каких случаях нужен outline, когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border? Ситуаций не так и много, но они встречаются:
• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset, для создания различных дизайнерских эффектов.
Разноцветные рамки
Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.
Пример 1. Создание рамки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border и outline</title>
<style>
div {
width: 100px; height: 100px; /* Размеры */
background: #fc0; /* Цвет фона */
outline: 2px solid #000; /* Чёрная рамка */
border: 3px solid #fff; /* Белая рамка */
border-radius: 10px; /* Радиус скругления */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).
