Работа с CSS может раздражать, потому что иногда элементы HTML не просто идут в том потоке, в котором вы хотите их видеть. В этой статье мы поговорим о 5 неизвестных полезных свойствах, о которых вы наверняка не знаете, например, знаете ли вы, что с помощью одного свойства CSS можно изменять цвет изображений, изменять размер не только <textarea>, но и других элементов, а также многое другое. Так что оставайтесь с нами и наслаждайтесь.
1. Свойство фильтра
Это одно из самых неизвестных, но полезных свойств CSS. Свойство CSS Filter позволяет применять графические эффекты к элементам HTML, такие как размытие, яркость, контрастность и многое другое. Это невероятно полезно, поскольку вы можете изменять цвет изображений и настраивать отрисовку фона и границ.
Чтобы узнать больше о свойстве CSS Filter, ознакомьтесь с документами Mdn.
2. Свойство видимости
Это свойство также неизвестно и также полезно. Свойство Visibility позволяет скрывать элементы, но сохраняет их место в DOM. Когда вы применяете display:none, это полностью удаляет элемент из DOM, а свойство visibility скрывает его, но место все еще остается. в общем, это просто делает элемент невидимым.
3. Свойство Object Fit
Все мы знаем, как трудно сделать изображения отзывчивыми, а также трудно поддерживать соотношение сторон. Существуют различные способы управления изображениями, но это статья для другого дня. Свойство object fit позволяет изменять выравнивание HTML-элементов, таких как <img>, в пределах поля элемента. В общем, вы можете растягивать изображение, уменьшать его масштаб, а также обращаться с изображениями как с фоновыми изображениями. Чтобы узнать больше, посетите Mdn
4.Свойство Resize
Свойство CSS resize устанавливает, можно ли изменять размеры элемента,
и если да, то в каких направлениях (вертикально или горизонтально или обоими). Чтобы сделать обычный div изменяемым по размеру, просто укажите ему resize:both и убедитесь, что свойство overflow установлено в visible overflow: visible. Свойство resize не применяется к инлайн-элементам или блочным элементам, для которых свойство overflow установлено в hidden. Для получения дополнительной информации ознакомьтесь с разделом mdn
5.Свойство Text-shadow
Это свойство похоже на box-shadow для текста, но это свойство более точно и аккуратно применяет тени к тексту. Это свойство очень мощное, поэтому не стоит его недооценивать, чтобы узнать больше.
6. Bouns (свойство CSS Content)
Многие из вас, возможно, уже знают об этом свойстве CSS, которое, по сути, позволяет нам заменить элемент сгенерированным значением. Наверняка вы не знаете о существовании этого мощного свойства. Знаете ли вы, что с помощью свойства content можно изменить src элемента <img>? Чтобы узнать больше, загляните в Mdn
Заключение
В заключение, спасибо за чтение, если вам понравилось, оставьте свой отзыв и комментарий ниже о вашем лучшем свойстве CSS, и не забудьте следить за мной для лучшего содержания приближающегося мира ✌🏽✌🏽.