Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи в серии здесь
Смотрите полный скринкаст и расшифровку стенограммы для Hover здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), начиная с буквы алфавита. Мы знаем, что иногда скринкастов просто недостаточно, в этой статье мы добавили новый быстрый совет о Hover для вас.
H для наведения и высоты
Я не могу сказать слишком много о Hover, о котором я еще не упоминал в видео о букве H. Однако, есть несколько классных анимаций, которые вы можете применить для состояния наведения. Google «CSS-эффекты при наведении», и вы найдете много.
Вот несколько сайтов, которые имеют отличные эффекты:
- Codrops: CSS эффекты перехода
- Design Shack: копирование + вставка эффектов при наведении
- CSS-хитрости: всплывающие подсказки
В дополнение к этому, я недавно выпустил видео для Code School , посвященное библиотеке hover.css .
Другой CSS H (о котором я не вдавался в подробности на этом сайте) — это height
Свойство height используется для определения высоты содержимого содержащего элемента. Все стандартные единицы длины (например, px, em, rem,%, vw, vh и другие) могут использоваться для контроля height
Если высота элемента специально не указана, она рассчитывается как минимальная высота для хранения всех содержащихся элементов (соответствует значению по умолчанию auto
Как правило, желательно избегать явной установки высоты для любых элементов, поскольку это ограничивает гибкость элемента — это означает, что он не может увеличиваться при изменении содержимого. Это особенно рискованно при работе с адаптивным дизайном, когда контент должен переформатироваться вертикально при изменении доступной ширины.
Поэтому я склонен устанавливать height Другой вариант использования — использование absolutefixedheightwidth
Вот пример, который демонстрирует проблему с установкой фиксированной высоты.
В то время как первый набор текста выглядит стилизованным правильно, как только текст становится короче или длиннее стиля, он перестает выглядеть корректно — содержащее поле кажется слишком большим или текст выходит за пределы поля.
Решением для переполнения текста может быть использование свойства overflow, но это обрезает текст и делает его нечитаемым.
Эту ситуацию можно полностью избежать, не указав высоту в первую очередь. Если я смогу улучшить гибкость своего кода, ничего не делая, я получу свой голос!