CSS от А до Я: как изменять видимость элемента при помощи свойства opacity

CSS от А до Я: как изменять видимость элемента при помощи свойства opacity

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством opacity.

O значит opacity

С помощью свойства opacity можно изменять видимость элементов на странице: от полной прозрачности до полной непрозрачности, как мы рассказывали в видео.

Совет 1: свойство opacity применяется ко всему элементу

При применении свойства opacity к элементу, оно применяется ко всему элементу и его дочерним элементам, делая их полупрозрачными. Opacity не наследуется дочерними элементами, то есть нельзя применить к ним opacity: 1, чтобы они стали видимыми.

Если необходимо задать полупрозрачный фон, а дочерние элементы были нормальными (текст, изображения), используйте полупрозрачный фон background, а не opacity.

.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().

$('.show-modal-button').on('click',function(e) {
  e.preventDefault();
  $('.modal').fadeIn();
});

Этот метод будет использовать JS для анимации элемента от display: none до display: block, вставляя инлайновые стили.
Я, как правило, избегаю необязательных инлайновых стилей, и такой же эффект можно сделать при помощи классов состояний в CSS. Один класс для видимого состояния и один для скрытого. При помощи свойства transition и простой смены классов мы можем переключаться между состояниями и создавать плавную анимацию. Для создания эффекта на чистом CSS можно использовать псевдоклассы :hover или :focus.

Сначала необходимо прописать состояния в CSS. В именах классов я использую префикс is-, чтобы показать, что состояния переключаются через JS.

.modal {
  /* остальные стили модального окна */
  transition: opacity 1s ease;
}
.modal.is-visible {
  opacity: 1;
}
.modal.is-hidden {
  opacity: 0;
}

Динамически добавляя или удаляя классы в JS, мы теперь можем переключаться между состояниями. По умолчанию должен стоять класс is-hidden в HTML.

$('.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

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree