Rustam Bainazarov

Чтобы отключить эмодзи от 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 и т. п.

Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?

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

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

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

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

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

Добавьте элементу:
-webkit-tap-highlight-color: transparent;

В данном контексте — никак.

Только если через :last-child и margin'ом.

Либо избавляться от space-around и делать на calc(ширина - отступ*2) а-ля так:



Выше — это типичная реализация подобных вещей на flex.

Данной возможности у колонок нет, к сожалению. Мы задаём количество колонок, и браузер уже сам распределяет по ним элементы.

Свойства, которое бы определяло минимальное/максимальное количество элементов в колонке, при превышении которого элементы уходили в следующую колонку, — нет.

Тут либо на JS нужно делать, либо в backend определять количество и распределять элементы по разным блокам.

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

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

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

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

Правильного нет варианта. Есть более надёжный — диапазонами без стыков (по возможности).

То есть, лично я всегда делаю диапазонами по второму алгоритму, это позволяет избежать проблем и чётко разграничить стили, чтобы избежать перезаписи оных на всём протяжении указанных размеров viewport.

Например:

@media (max-width: 767px) {

}

@media (min-width: 768px) and (max-width: 1023px) {

}

@media (min-width: 1024px) and (max-width: 1199px) {

}

@media (min-width: 1200px) {

}

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

UPDATE. Это не я такой умный и придумал такую схему. Я прочитал про неё ещё давно на Medium, потом увидел в работе на разных сайтах сервисов Google, на сайте Stripe и на большом количестве других крупных сайтов. С тех с огромной радостью м использую.

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 (но не надо).



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

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


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

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

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


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