0

Пытаюсь в качестве обучения скопировать верстку сайта iWebka.com

Там есть скрины выполненных работ. Они задаются в теге <a> через background-image в атрибуте style. Непонятно, зачем внутри тега ссылки находится тег <img> с display: none? И зачем там применяется псевдоэлемент ::before? Я через DevTools удалил тег <img>, поставил display: none для псевдоэлемента ::before, но все осталось, как прежде. Какой был смысл в подобной разметке и стиле?

Для ссылки (класс .image) используется следующий псевдоэлемент:

.spotlights > section > .image:before {
  -moz-transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  transition: opacity 1s ease;
  background: rgba(49, 36, 80, 0.9);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Я думаю, что я все равно не объясню все соответствующие стили тут, поэтому просто предлагаю вам посмотреть все на сайте через инструменты разработчика.

4
  • 1
    ::before - Там для анимации. Используется вот так: .spotlights > section.inactive > .image:before, body.is-loading .spotlights > section > .image:before { opacity: 1; } 9 ноя 2017 в 23:02
  • Хорошо. А что с img? 10 ноя 2017 в 2:38
  • Для красоты наверное ) 10 ноя 2017 в 2:43
  • Это заглушка, если отключить JavaScrit на сайте встают картинки на место ссылок <a> Можете отключить в браузере JavaScript-ы и убедится в этом лично. 10 ноя 2017 в 2:46

1 ответ 1

1

Вопрос №1 - "Зачем надо было вставлять внутрь тега A с background-image , тег img с display:none "

Ответ: Захотели они так сделать наверное. На тег IMG свойство "display:none" Присваивается средствами JS, дабы скрыть картинку и отобразить только BG с ссылки тег A.

Вопрос №2 -"Зачем надо было вставлять псевдоэлемент before на эту ссылку?"

Ответ: Псевдоэлемент before там для анимации которая срабатывает при движение скролла до блока с работой.

Код CSS:

.spotlights > section.inactive > .image:before, 
body.is-loading .spotlights > section > .image:before {
   opacity: 1;
}

Вот так выглядит без JavaScript:

введите сюда описание изображения Активен тег IMG

Вот так выглядит с JavaScript:

введите сюда описание изображения Тег img скрыт, активен тег A

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.