• Background-size cover для retina экранов?

    SmthTo
    @SmthTo Куратор тега Вёрстка
    Все перепёлки мира будут оплакивать мою смерть.
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      
      /* Тут ваш код для чистой retina, начинающейся от минимального размера viewport в два раза меньше физического или, если нет поддержки первого свойства, от от разрешения в 192DPI */
      
    }

    Вот пример, где работает cover везде и безо всяких проблем. Проверяется это тем, что там две картинки на фон, первая с надписью X1 (обычная), вторая — с надписью X2 (retina). Везде background-size: cover. И всё работает:



    На обычном экране грузит X1:

    5d517b143bb0a556931245.png

    На экране, который проходит проверку retina — X2

    5d517bafeed0c135455260.jpeg

    Android Chrome тоже всё понимает и, если экран высокого разрешения, использует retina-вариант (X2):

    5d517f4f33c14418788499.png
    Ответ написан
    Комментировать
  • Какой инструмент лучше выбрать для простой svg анимации?

    @lagudal
    Я вижу 3 подхода:
    1 - чистая svg-анимация, где анимация реализуется внутри собственно svg- кода;
    2 - css-анимация с помощью keyframes;
    3 - анимация с помощью javascript-библиотек.

    Для себя, если возможно, стараюсь обходиться без js, однако иногда все же соблазн бывает слишком велик, в основном, когда надо сделать быстро и с определенными эффектами. Для меня именно эффекты ванильно реализовывать самое долго. А тут - добавил один js файл и красота.
    Вот пару известных библиотек именно по svg морфингу и не только.
    alexk111.github.io/SVG-Morpheus
    snapsvg.io
    Вот еще крутой, правда платный плагин -
    https://greensock.com/morphSVG
    Ну и что то можно еще полезного найти в статье на хабре
    Ответ написан
    1 комментарий