От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством opacity.
O значит opacity
С помощью свойства opacity можно изменять видимость элементов на странице: от полной прозрачности до полной непрозрачности, как мы рассказывали в видео.
Совет 1: свойство opacity применяется ко всему элементу
При применении свойства opacity к элементу, оно применяется ко всему элементу и его дочерним элементам, делая их полупрозрачными. Opacity не наследуется дочерними элементами, то есть нельзя применить к ним opacity: 1, чтобы они стали видимыми.
Если необходимо задать полупрозрачный фон, а дочерние элементы были нормальными (текст, изображения), используйте полупрозрачный фон background, а не opacity.
|
1 2 3 |
.module { background: rgba(255,255,255,0.5); /* полупрозрачный белый */ } |
Совет 2: opacity работает по типу стека
Если задать opacity меньше 1, элемент помещается на новый слой, и можно показывать фон background под полупрозрачным элементом. Принцип работы схож со свойством z-index. Как и свойство z-index, opacity создает новый контекст стека.
Совет 3: можно создавать эффекты плавного появления и затухания без JQuery
Сразу оговорюсь: мне нравится JQuery, я им часто пользуюсь, почти в каждом проекте. Тут я буду говорить не о полном отказе от JQuery, а о том, что можно обойтись функционалом CSS и не учить JS только из-за эффектов.
Можно с легкостью создавать эффекты плавного появления и затухания при помощи свойств opacity и transition, и, возможно, немного JS для смены классов.
Представим ситуацию: по клику на кнопку плавно появляется модальное окно с каким-то дополнительным контентом. После полной загрузки страницы это модальное окно должно быть скрыто, а вызывать его должен JQuery метод fadeIn().
|
1 2 3 4 |
$('.show-modal-button').on('click',function(e) { e.preventDefault(); $('.modal').fadeIn(); }); |
Этот метод будет использовать JS для анимации элемента от display: none до display: block, вставляя инлайновые стили.
Я, как правило, избегаю необязательных инлайновых стилей, и такой же эффект можно сделать при помощи классов состояний в CSS. Один класс для видимого состояния и один для скрытого. При помощи свойства transition и простой смены классов мы можем переключаться между состояниями и создавать плавную анимацию. Для создания эффекта на чистом CSS можно использовать псевдоклассы :hover или :focus.
Сначала необходимо прописать состояния в CSS. В именах классов я использую префикс is-, чтобы показать, что состояния переключаются через JS.
|
1 2 3 4 5 6 7 8 9 10 |
.modal { /* остальные стили модального окна */ transition: opacity 1s ease; } .modal.is-visible { opacity: 1; } .modal.is-hidden { opacity: 0; } |
Динамически добавляя или удаляя классы в JS, мы теперь можем переключаться между состояниями. По умолчанию должен стоять класс is-hidden в HTML.
|
1 2 3 4 |
$('.show-modal-button').on('click',function(e) { // убираем класс is-hidden и добавляем класс is-visible $('.modal').toggleClass('is-hidden is-visible'); }); |
Вот и все, 3 простых совета по свойству opacity. Я призываю вас использовать CSS по максимуму вместо JS для создания эффектов. Я понял, что намного лучше контролирую анимацию и плавные переходы в CSS. Из JQuery можно стащить пару прикольных эффектов, но без кучи строк колбэк функций.
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
