Rustam Bainazarov

Это разница между движками рендеринга шрифтов в ОС и Photoshop'е. Плюс, браузеры вносят свою лепту.

Чтобы было как на fonts.google.com, добавьте это в CSS:

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Более ничего вы сделать не сможете.

Update. Ну можно, конечно, хернёй помаяться ещё со следующими свойствами:

-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.1); /* Сильно влияет на рендеринг (условно, т. к. сам механизм рендеринга навряд ли меняет), аккуратнее с этим свойством */
text-shadow: #fff 0px 1px 1px; /* Да, LOL, оно тоже влияет на рендеринг */
 text-rendering: optimizeLegibility; /* Так и не понял результат работы  вот этого */

Дать однозначный ответ на данный вопрос невозможно. Всё зависит от проекта и его аудитории. К примеру, тот же VK поддерживает до сих пор IE8. Да, там работает только базовый функционал, но между тем. Или та же страница Google: она до сих пор работает на устройствах 20-летней давности с Netscape.

Обычный для меня список на конец 2018-го года: IE11, EDGE 12+, Chrome 49+, Firefox 50+, Android Chrome 50+, iOS Safari 10+, Desktop Safari 10+. В зависимости от проекта, он может как сужаться, так и расширяться.

На skewX это делать геморрой один (только на глаз) + нужно иметь четкие размера контента блока посередине, иначе ширина скоса будет меняться каждый раз, — словом, жопа.

Поэтому так: clip-path на calc() + отрицательный margin по ширине скоса.

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

EDGE и IE11 в полёте с динамическим clip-path — можно просто сделать изначально безо всяких наклонов, а для поддерживаемых браузеров с помощью media-запрос supports сделать следующее:

Да учите же вы наконец все Flexbox и Grid :))

Код ниже рабочий, вам нужно только свои значения вставить. Все благодарности сюда. Функция срабатывает только один раз при загрузке.

Если нужно делать адаптивно, т. е. чтобы стили могли подгружаться при изменении окна браузера, а не только при загрузке, то нужно прикручивать событие изменения габаритов окна и проверки. Проверки -- чтобы после загрузки, при новом изменении размера, скрипт в head больше не встраивал ссылку на нужный CSS (проблем особо это не сделает, но зачем нам это нужно).

// Функция загрузки CSS или JS, править не нужно.
function loadjscssfile(filename, filetype) {
    if (filetype=="js") { //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css") { //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
};

// Вот тут нужно править под конкретные нужды.
function appendAssets() {
    if (window.innerWidth <= 767) {
        loadjscssfile("small.css", "css"); // передаем в функцию путь до файла и расширение
    }
    else if (window.innerWidth <= 1299 && window.innerWidth >= 768) {
        loadjscssfile("medium.css", "css"); // передаем в функцию путь до файла и расширение
    }
    else if (window.innerWidth >= 1300) {
        loadjscssfile("big.css", "css"); // передаем в функцию путь до файла и расширение
    }
};

// Инициализация конечной функции 
appendAssets();

Судя по всему, вы смотрите в Chrome. Это графический баг рендеринга. Возможно, связанный с окружающей разметкой и iframe-выводом от JSfiddle. Попробуйте разместить где то ещё.

Замена содержимого CSS недоступна. Если без JS и чтобы было плавно — у вас только один вариант: разместить несколько, к примеру, span'ов с разным текстом и абсолютным позиционированием внутри родительского контейнера. И анимировать их поочередно, создавать иллюзию смены текста (геморрой): https://jsfiddle.net/yofud4h0/2/

Если о замене текста, то как бы можно через CSS -- заменой значения свойства content у псевдоэлементов:
https://jsfiddle.net/yezrts0b/

Текст под иллюстрацией женского портрета я тут анимировал заменой значения свойства content, но плавно это сделать нельзя, если только хаками с привязкой к шагам анимаций цвета текста, прозрачности и т. п. (геморрой).

function toggleSubmenuDisplay() {
    document.addEventListener('touchstart', function(event) {
        // ВОТ ЭТОТ КУСОК -- НАЧАЛО
        if (event.target.matches('a')) {
            var url = event.target.getAttribute('href') ? event.target.getAttribute('href') : '';
            if ('#' !== url && '' !== url) {
                window.location = url;
            } else if ('#' === url && event.target.nextSibling.matches('.submenu-expand')) {
                openSubMenu(event.target);
            } else {
                event.preventDefault();
            }
        }
        // ВОТ ЭТОТ КУСОК -- КОНЕЦ

    ...

Из-за него это всё. Нужно переписать, либо убрать его нафиг. Он все ссылки обрабатывает. С учетом того, что я в разметке не вижу элементов с классом submenu-expand, я бы закомментировал целиком этот участок и посмотрел, что сломалось. Если ничего не сломалось, так бы и оставил.

Неверное использование свойства animation-name, оно не комбинированное, а вы пытаетесь туда поместить ещё и значение свойства animation-duration.

Вот так можно:


P. S. Кстати, что за position: center?
Такого значения у этого свойства нет.

Если на голом JS и с троттлингом. Извините, если кого обидел лицом на фоне в примере:

https://developer.mozilla.org/ru/docs/Web/Events/resize

Комбинируя ответ Ярослав Иванов, идею касательно hover'а от Арсений Матыцин и делегирование функций, на нативном JS можно сделать так:

// наведение
document.body.addEventListener("mouseenter", function(e) {
  if (e.target.classList.contains('item')) {
 
    let item = e.target;
    let itemShadowGap = 15;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemBottom = item.querySelectorAll('.button')[0];
    let itemShadowHeight = itemShadow.scrollHeight + itemBottom.scrollHeight + itemShadowGap;

    // проверяем, нет ли атрибута
    if (!item.hasAttribute('data-shadow-limiter-delay')) {
      item.setAttribute('data-shadow-limiter-delay', true);
      itemShadow.style.maxHeight = '' + itemShadowHeight + 'px';
    }

    item.style.zIndex = '10';
    itemShadow.style.height = '' + itemShadowHeight + 'px';

  }
}, true);

// отведение
document.body.addEventListener("mouseleave", function(e) {
  if (e.target.classList.contains('item')) {
  
    let item = e.target;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemShadowHeight = itemShadow.scrollHeight;

    // убираем максимальную высоту и атрубут по задержке
    if (item.hasAttribute('data-shadow-limiter-delay')) {
      setTimeout(function() {
        item.removeAttribute('data-shadow-limiter-delay');
        itemShadow.style.maxHeight = '';
      }, 3000);
    }

    item.style.zIndex = '';
    itemShadow.style.height = '';

  }
}, true);

Таким образом решается вопрос с адаптивностью (высота считается при каждом hover'e), а также функция работает с динамически созданными элементами. Проверил на старом ноутбуке (мобильный Core i5 2-го поколения, 4 Гб ОЗУ и встроенная видеокарта; FireFox, Chrome, IE11), нет никаких задержек обработки скрипта в условии наличия 600 ед. элементов. И это с учетом всех остальных скриптов на сайте.

Как и говорил, проблема в SVG:


Нужно было добавить в тег svg:

width="750.3" height="450" preserveAspectRatio="none slice"

Полный код SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve" width="750.3" height="450" preserveAspectRatio="none slice">
<style type="text/css">
  .st0{fill:url(#SVGID_1_);}
</style>
<g id="bg">
  <g>
    <g>
      
        <radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse">
        <stop  offset="1.075270e-02" style="stop-color:#2C35A2"/>
        <stop  offset="0.1635" style="stop-color:#252C88"/>
        <stop  offset="0.3975" style="stop-color:#1B2167"/>
        <stop  offset="0.621" style="stop-color:#15194F"/>
        <stop  offset="0.8273" style="stop-color:#101540"/>
        <stop  offset="1" style="stop-color:#0F133B"/>
      </radialGradient>
      <rect y="0.3" class="st0" width="750.3" height="450"/>
    </g>
  </g>
</g>
</svg>

Либо же cделать градиент на CSS, тем более такой простой.

SVG и только SVG.

Ну, можно, конечно, делать всякие абсолютно позиционированные прозрачные блоки на HTML, но там это сложнее позиционировать в силу отсутствия viewBox, как у SVG.

Кроме того, блоки на HTML не могут иметь произвольную форму, а только прямоугольную (clip-path не в счёт, с ним ещё сложнее будет реализовать), что вызовет проблемы при совмещении нескольких объектов произвольной формы вместе. Точнее, будет проблема с зоной взаимодействия этих объектов при наведении мышки из-за наложения прямоугольников.

Все такие интерактивные карты делают с помощью SVG, что как бы намекает.

https://medium.com/@mattcroak718/creating-an-inter...

Я делал такую карту с помощью Boxy SVG:
https://boxy-svg.com

Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.

Удобно? Хм…

Ну раз удобно, попробуйте использовать выданный ими код в реальном проекте — сразу всё поймёте :))

Почесать собственную спину с помощью мизинца на ноге — и то удобнее будет.