Ответы пользователя по тегу CSS
  • Как оптимизировать загрузку стилей по ссылке https://fonts.googleapis.com/css.....?

    @olegchabak
    Frontend developer
    archelon прав. Действительно надо аж 5 шрифтов? В идеале 2, край 3. Часто подключают целый шрифт, чтобы логотип или слово в одном блоке были правильного начертания. Попробуйте заменить такие места на картинку (если лого), а для сео пропишите там невидимый текст. Или бывает дизайнер просто не учитывает нагрузку шрифтовую и фигачит в макете разными шрифтами, тут надо подумать как обойтись парочкой шрифтов.

    А вообще касаемо PageSpeed Insights, еще не все по ходу знают:
    Чтоб система не ругалась, она хочет при подключении шрифтов ленивую загрузку - font-display: swap, т.е. сначала всё отобразится дефолтными шрифтами, а потом когда загрузятся кастомные, подключатся уже они.
    Типа того:
    @font-face {
      font-family: ExampleFont;
      src: url(/path/to/fonts/examplefont.woff) format('woff'),
           url(/path/to/fonts/examplefont.eot) format('eot');
      font-weight: 400;
      font-style: normal;
      font-display:  swap;
    }
    Ответ написан
    1 комментарий
  • Как сделать оверлей на слайдере?

    @olegchabak
    Frontend developer
    Виталий Киренков @DeLaVega
    Оберните слайдер в див, у которого будет ::before абсолютно спозиционированный. И на нём фон с этой картинкой

    Почти верно, проще всего так и сделать. Но тогда слайдер перестанет быть интерактивным, нельзя будет свайпом по содержимому перелистнуть. Если и не надо, то ОК.

    Выглядит страшненько, но работает =)

    Не работает. Точнее работает пока там слайдера нет. Когда подключите:
    1. .slider__slide будет первым слайдом
    2. .slider__svg-overlay будет вторым слайдом

    Нельзя оверлей к слайдам класть, надо его выше располагать по структуре. В остальном с SVG хорошо получилось, хотя думаю сойдет и обычная картинка.

    А чтобы все функции слайдера работали, например можно при ховере на слайдер - оверлей дисплейнонить. Будет резковато меняться, но зато останется функционал слайдера.
    .slider::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('img/overlay.png') center / cover no-repeat;
      opacity:  0.5;
      z-index: 1;
    }
    .slider:hover::before {
      display: none;
    }


    Есть еще вариант добавлять этот оверлей не слайдеру , а каждому слайду. Но тогда оверлей будет перелистываться вместе со слайдами. Тут можно просто изменить режим работы слайдера, чтобы слайды не сдвигом появлялись, а через опасити (в owl-carousel есть такое).
    В общем выбирайте)
    Ну или делайте как Виталий предложил.
    Ответ написан
    Комментировать