Rustam Bainazarov

LOL, уже спрашивали про этот же макет, но давно и другой человек. Я за clip-path, и там я подробно описал, почему именно так:
Искажение блока с одной стороны css?

А вот, собственно, как:

Update. Описанное ниже решается с помощью CSS и writing-mode: vertical-lr

~ ~ ~

Если делать автоматически, то нужно использовать JS, ибо transform не меняет местами width и height:



Можно ставить min-height, что, в сочетании с display: flex у родителя таких блоков, позволит очень просто и без лишнего JS сделать подстройку всех элементов под высоту самого высокого в строке из них:



Если делать только на CSS, то нужно задать высоту блока:

background-image в чистом виде (картинка) не анимируемое свойство, градиент — на данный момент это картинка, просто отрендеренная браузером из параметров свойства.

Поэтому opacity для блока.


ease у transition-timing-function указывать бессмысленно, ибо это и есть его стандартное значение (если, конечно, вы его не хотите перезадать).

background — это сборное свойство, которое состоит из background-image, background-size, background-repeat, background-position, background-color, background-attachment и background-clip — поэтому почитайте, что вы можете из этого анимировать и каким способом.

Свойство none просто отключает любое свойство (даже анимируемое), что не позволяет переходу свершиться, даже если он возможен.

Чтобы отключить эмодзи от WordPress:
https://kinsta.com/knowledgebase/disable-emojis-wo...

Это не просто символ, это — эмодзи. А вы учли то, что эмодзи в разных системах — разные по внешнему виду? Ну отключите вы эмодзи WP, а толку, если этот крестик будет по-разному выглядеть? Поэтому WP и меняет этот кусок на свою картинку для того, чтобы эмодзи на вашем сайте выглядели в разных системах одинаково.

Вот тут примеры вида этого эмодзи в разных системах:
https://emojipedia.org/heavy-multiplication-x/

Поэтому такие вещи нельзя делать на эмодзи. На крайний случай, вот этот символ × используйте, если он есть в том шрифте, что вы используете на сайте. Но это не очень хорошая практика.

Современный путь — использовать простейшую SVG-иконку для таких вещей. Тогда вы не будете зависеть от систем и шрифтов. И ваша иконка будет выглядеть везде так, как вы хотите. Можно через #use, а можно вставить её разметку прямо в HTML, можно вообще через img или через CSS картинкой на фон блока кнопки.

SVG-иконки можно найти бесплатно и быстро тут:
https://www.flaticon.com/search?search-type=icons&...
https://thenounproject.com/search/?q=Cross

Ещё один современный путь — сверстать такой крестик:

Но лучше через canvas, ибо тут всё зависит от ширины + очень муторное позиционирование, габариты, адаптивность и пр. Но можно с помощью медиазапросов, фиксированных габаритов решить эти проблемы, конечно, но это костыли и муторно.



Ну можно немного обмануть это, но всё равно это не очень то:


Можете, конечно, что-то из этого сделать, но лучше на canvas сделать, как я и сказал выше.

Лучше не страдать ерундой, а сделать на том же TippyJS:
https://atomiks.github.io/tippyjs/

Сделать свою тему для этого плагина тоже не составит труда.

Таким образом вы обойдёте кучу узких моментов с HTML-структурой, позиционированием, триггерами и автоматизацией подобных тултипов. Ибо скрипт сам генерирует DOM (можно настроить как на уровень родителя, так и на другого предка или тег body) и позиционирует тултип с учётом его позиции в окне браузера.

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

Плавная смена background-image только в Chrome работает, поэтому так.

Лёгкого пути тут нет, к сожалению. Inset-закругления нет в CSS на данный момент. Только через градиент (адаптивно и всё такое) или картинкой на фон (не очень адаптивно, или через border-image (адаптивно, но с помощью картинки), или кучей блоков (адаптивно).

В данном случае идеально подойдёт градиент (второй пример):

CSS Как правильно верстается такое, когда элементы выходят за каркас?

Делать тень на отдельный блок с z-index: -1.

Используйте вот этот скрипт:
https://highlightjs.org/

Демо со всеми стилями и языками:
https://highlightjs.org/static/demo/

Выбираете нужный, инициализируйте по документации.

По-моему, уже все и давно используют Lazysizes:
https://github.com/aFarkas/lazysizes

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

IE 9+. Список всех поддерживаемых браузеров для всего базового функционала можно определить по поддержке document.getElementsByClassName:
https://caniuse.com/#feat=getelementsbyclassname

С полифилом для document.getElementsByClassName будет работать и в IE8.

https://toster.ru/answer?answer_id=1410491&e=1#ans...

Откройте в новом окне и сжимайте, разжимайте окно браузера или панель с результатом в песочнице:

Что первое, что второе, по описанию, требуют WebGL. Второй вариант проще и легче в плане кода будет: статичная сфера с текстурой + текст, который описывает движение по её орбите.

Можно на CSS сделать достаточно убогую бесконечную прокрутку карты, но она не будет учитывать геометрию шара.

Типа так:


UPDATE. Увидел такой баг в Android Chrome в результате совместной работы border-radius и overflow:

Нашел решение хаком. Нужно добавить следующее к такому блоку:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

Это исправило проблему, обновил песочницу.

Вы документацию читаете вообще? :))

@mixin button() {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    background: #54cff0;
    color: #fff;
    border-radius: 50px;
    padding: 15px 30px;
    margin-top: 20px;
    text-transform: uppercase;
}

Я сделал на flex, потому такая штука будет работать и в IE11. Хотя проще сделать с помощью grid. А вообще, такое можно сделать хоть на float (но не надо).



Можете их даже компоновать иначе, ничего не развалится:

Для браузеров от IE9 и выше вам (включая все современные) нужно только два типа: WOFF и WOFF2.

Про ETF
Опционально можете ETF добавить, но не обязательно (это для нивелирования бага в IE10/11, когда WOFF-файл не грузился).

Это полноценный файл со всей информацией по шрифту. Обычно в этом формате (или OTF) шрифты используются в ОС. Много весит.

Про SVG
SVG-шрифты вообще не нужны никому и никогда. Это устаревшая технология (как OTF и ETF для веба).

Их поддержку выпилили из Chrome уже несколько лет как. А поддержка в одном-единственном Safari держится по инерции.

Почему от SVG-шрифтов все отказались? Да очень просто: они не поддерживают лигатуры и кёрнинг. Они много весят и нагружают рендеринг, хоть и имеют более стандартизированный внешний вид на разных ОС и в разных браузерах.

Про WOFF
Первый нормальный формат шрифтов именно для web: весит сильно меньше ETF и т. п. + поддерживает все нужные технологии. Поддержка данного формата — широчайшая в браузерах, включая старые (IE9+). Обязателен к применению.

Про WOFF2
Развитие идей WOFF, при этом весит меньше него: там меньше ненужной информации + он изначально в сжатом виде. Это самый современный формат. Поддержка очень хорошая, но хуже, чем у WOFF, поэтому эти два формата нужно использовать вместе.

О кол-ве путей до файлов шрифтов в @font-face
Браузер, сколько бы вы файлов не указали для начертания, грузит только один файл шрифта для каждого начертания. Так что вы можете хоть все форматы указать, всё равно будет только один грузить, который поддерживается браузером. Просто никому не нужно держать на сервере кучи ненужных файлов шрифтов.

Ну тогда можешь так сделать, если фон позволяет:


Линию, которая делает а-ля мигание, можешь сделать тоже на повторяющийся градиент по ширине нескольких пунктиров, чтобы сделать анимацию через нужный промежуток. (Мне самому лень это делать, это долго.) Либо же просто начинать этот блок после каждой секции, чтобы его копии был разделителями между секциями.

Если нужно прямо как на сайте — без разметки тебе не обойтись.

Более простой вариант анимации именно линии делается так, например:


В последнем примере анимирование не через background-position, потому что такой метод не работает с направлением градиента to bottom.