Продолжу древнюю рубрику полезных мелочей и сегодня посмотрим на некоторые CSS свойства, которые вам желательно знать и помнить о них.
📍 пока вас не попросят покрасить цвет каретки в инпуте, вы и не будете знать, что существует свойство caret-color (каретка - это мигающая палочка в месте, где будет введен текст). Работает максимально просто, поддерживает формат hex, rgba, hsla и описание цвета словами (red, blue). Поддержка 94% и можно смело плевать на IE11
Дока: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
📍 Уверен, что вы видели на сайтах/приложениях эффект, когда наводишь на картинку(или другой элемент), а он становится черно-белый, более контрастный, размытый и тд. Многие новички при этом ломают голову как это сделать, а старички забывают как :)
Так что смело читаем про свойство filter: https://developer.mozilla.org/ru/docs/Web/CSS/filter
Примеры с картинками есть прямо в доке, листайте ниже. Поддержка почти 97%, маме только ручкой IE11
📍 Еще заметил, что в сети «пиарят» свойство zoom. Да, такое существует: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
Оно не стандартизировано и, очевидно, просто зумит элемент - изменяет его масштаб. Его проблема в том, что Firefox не поддерживает такое свойство, а в будущем оно вообще может поменяться при включении в стандарт.
Так что пока обходимся обычным transform: scale() и наслаждаемся жизнью
#полезности
📍 пока вас не попросят покрасить цвет каретки в инпуте, вы и не будете знать, что существует свойство caret-color (каретка - это мигающая палочка в месте, где будет введен текст). Работает максимально просто, поддерживает формат hex, rgba, hsla и описание цвета словами (red, blue). Поддержка 94% и можно смело плевать на IE11
Дока: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
📍 Уверен, что вы видели на сайтах/приложениях эффект, когда наводишь на картинку(или другой элемент), а он становится черно-белый, более контрастный, размытый и тд. Многие новички при этом ломают голову как это сделать, а старички забывают как :)
Так что смело читаем про свойство filter: https://developer.mozilla.org/ru/docs/Web/CSS/filter
Примеры с картинками есть прямо в доке, листайте ниже. Поддержка почти 97%, маме только ручкой IE11
📍 Еще заметил, что в сети «пиарят» свойство zoom. Да, такое существует: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
Оно не стандартизировано и, очевидно, просто зумит элемент - изменяет его масштаб. Его проблема в том, что Firefox не поддерживает такое свойство, а в будущем оно вообще может поменяться при включении в стандарт.
Так что пока обходимся обычным transform: scale() и наслаждаемся жизнью
#полезности