Rustam Bainazarov

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.

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

На второй странице отсутствует мета-тег адаптивности:

<meta name="viewport" content="width=device-width, initial-scale=1">

Вариантов много. Например, с помощью отдельного элемента (позволяет использовать рисунок на фоне):


Самый простой вариант без лишней разметки. Граница на li, а у span залить фон цветом, чтобы перекрыть линию там, где текст:


Можно псевдоэлементом сделать как для первого, так и второго варианта. Ну и так далее. Можно тут вообще костылей напридумывать, кстати, но это отдельная тема. Если не нужен фон, кроме однородного фона — делайте границей и заливкой цвета.

Извините, мне с телефона лень писать, поэтому дальше сами.

По описанию это явно iOS Safari.

Добавьте это в ваш сайдбар:
-webkit-overflow-scrolling: touch;

Тогда будет инерционная прокрутка, как на body. К сожалению, у этой штуки есть баги (особенно в сочетании с fixed: скачки, мигания, нежелательные оттягивания элементов), но иных решений Apple не даёт.

Retina-макетов не бывает. Retina — не более чем маркетинговое название экранов с высоким разрешением (300+ px на дюйм). Retina могут быть только ресурсы, например, картинки, которые будут иметь в несколько раз большее, чем целевой макет, разрешение, чтобы попасть в пиксельную сетку реального разрешения.

Вы же верстает не под размеры экрана в физических px, а под viewport с его «виртуальными» px, которые получаются из:
[физическое разрешение] : [степень масштабирования]

Чем выше разрешение при равных размерах экрана — тем всё мельче, если масштаб 1:1. Поэтому принято увеличивать масштаб, иначе всё мелкое-мелкое. Таким образом достигается высокая чёткость + адекватные размеры элементов на экране (эффект retina).


Так, старый iPhone 6 и iPhone XS имеют одинаковый размер viewport (375px), но реальное разрешение различается очень сильно: 750px против 1125px. Достигается это с помощью масштаба: x2 у iPhone 6 и x3 у iPhone XS.

Макет должен быть 1:1 к целевому размеру viewport, а не к физическому разрешению экрана. Потому что после всех манипуляций с масштабированием у нас остаётся четкое значение размера viewport, именно на него и надо ориентироваться.

Наличие или отсутствие retina в этом деле вам совершенно не важно, ибо вы верстает под чёткие размеры viewport, которые могут быть одинаковыми на устройствах с совершенно разными физическими разрешениями: например, ширину viewport 375px (как у iPhone XS) можно достичь на древнем VGA-экране, сжав в нём окно браузера до этих 375px.


Если у вас в макете текст имеет 15px, то и делайте его 15px. Надеюсь, кстати, что макет вам делал не совсем отбитый дизайнер, который не забыл поставить px вместо pt в макете для текстов. Иначе — либо подгонять на глаз, либо пытаться конвертировать их в px, исходя из выбранном плотности печати в настройках документа макета. Ибо pt — это относительная единица для печати, в web её нет.

Есть дизайнеры-уникумы, которые делают макеты в два раза больше необходимых размеров, типа, блин, retina x2. А если у меня retina x3 — что мне тогда делать? Или же делают макеты вообще неведомых размеров. Да и в Photoshop'e web-макеты в 2019-м году уже делать не надо, конечно.

В CSS и HTML есть методы детекции наличия масштаба, чтобы грузить нужный ресурс в зависимости от его степени.
UPDATE. С макетом полный порядок, тут уже дело в навыках верстки.

Update: + нужна последняя версия.

Это баг с просчетом высоты flex-direction: column. Ваши стили на это замените:

.main__title {
   padding-top: 1.25rem;
   color: #ffffff;
   font-weight: 400;
   width: 100%;
}

.main__container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

И все будет нормально:

Вам очень повезло, ибо в данном случае в CSS есть псевдокласс :focus-within. Он позволяет стилизовать предка, внутри которого поле в фокусе (спасибо Xdevelx за поправку терминологии, см. комментарии). Поддержка нормальная у него:
https://caniuse.com/#search=%3Afocus-within


Во всех остальных случаях пока что CSS не может идти выше по коду. Если нужно универсальное решение с поддержкой IE и старых EDGE — только JS.

:has — только в черновиках, ни в одном браузере его поддержки нет:
https://caniuse.com/#search=%3Ahas

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

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



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



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



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

C телефона было сложно, но примерно так:


Как правильно отметил Brad9aga в своем примере, лучше первую и последнюю полоски сдвигать, так лучше выглядит:

background: url(ссылка на фон) repeat-y -150px 100% / 300px,
            url(ссылка на фон) repeat-y calc(100% + 150px) -50% / 300px;

Только надо на SVG перерисовать саму картинку по образу и подобию + свои размеры поставить фону. Думаю, вы сможете разобраться и увидеть закономерности в позиционировании относительно размера фона в коде: