Ответы пользователя по тегу HTML
  • Как правильно верстать такой блок?full width + внутренние отступы, без отступов по краям блока?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Уберите у обёртки указание ширины (это блочный элемент, он и так растянется на всю доступную ширину) и добавьте отрицательный margin слева и справа, равный margin элементов. Вжух. Вполне нормальная практика.



    Альтернатива - использовать гриды, либо исповедовать ваш способ, но не стоит писать руками, есть специализированные инструменты для этого.
    Стили получаются избыточные (хотя, в целом, не сильно больше, чем руками написать), зато работает железобетонно и с точки зрения DX великолепно.
    Ответ написан
    Комментировать
  • HTML5 плавное повторение видео, есть ли способ?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Только зациклить в видео-редакторе таким образом, чтобы оно в конце приводилось к своему изначальному состоянию (первому кадру) как вам нужно. Это единственно правильный метод.

    Есть ещё вариант: сделать два видео, расположить друг над другом, одно запустить, другое стоп, отслеживать прогресс воспроизведения и за пару секунд до окончания видео его плавно скрыть, другое видео в этот момент стартуем, ну и такую карусель устраиваем.
    Но делать так настоятельно не рекомендую - это создание сложности на ровном месте, да и перфоманс такой себе получится.
    Ответ написан
    6 комментариев
  • Сборка html из фрагментов?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Компонентный подход - это всегда правильно.
    Сейчас в трендах работа с JS-компонентами, но практически тоже самое можно и на бэке делать, просто это менее удобно и готовых решений (и хороших практик) меньше.

    Вам нужен шаблонизатор. Если пишите на PHP - возьмите Blade, он простой как три копейки, есть в отрыве от Laravel, и хоть и несколько кастрирован в части работы с данными, но свои задачи как шаблонизатор выполняет более чем.
    Альтернативой может послужить Twig, но мне его синтаксис по сравнению с Blade нравится куда меньше, а регулярные задачи плюс-минус и там и там решаются.

    Чего-то готового найти довольно сложно, поэтому организовать воркфлоу, структуру придётся самостоятельно.
    Я, когда занимался, сделал себе вот так и использовать было не особо больно:
    5e89e66f399e0313757656.jpeg

    Те же компоненты, те же "пропсы" - это, пожалуй, в рамках шаблонизирования на PHP максимально приближенный вариант к модным фронтовым штукам.
    Из минусов по сравнению с ними - нет автокомплита и быстрой навигации по дочерним компонентам (всё приходится искать прям в файловой структуре, без Alt+LKM), нужно самостоятельно организовывать вопросы документирования компонентов.
    На скриншоте компонент входит в один экран и принимает три параметра, в таких случаях допустимо не документировать, но есть и другие, где параметров целая гора, там самостоятельно нужно думать о том, как организовать документацию, чтобы не запутаться.
    Для JS-фреймворков если классные инструменты для этого, Storybook мне например нравится очень.

    Если лень заморачиваться, всегда можно тем же пыхом сделать что-то в духе:
    function component($name, $params) {
      extract ($params);
      include 'path/to/components/' . $name;
    }
    
    component('component-name', [
      'param' => '123',
    ]);

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

    Ну а если вам и вашим клиентам стек не важен, не возникает проблем с SSR - то берите любой модный JS-фреймворк и пишите на нём, там всё до вас придумано и довольно удобно.
    Ответ написан
    Комментировать
  • Как сделать элемент выходящим за все границы страницы, при этом фиксируемым и по центру?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Зафиксируйте 2ой элемент по центру. Например так:
    .second {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }


    На JS посмотрите размер блока и рассчитайте коэффициент (K), на сколько его нужно увеличить, чтобы он оказался больше размеров окна браузера. Примените коэффициент через transform: scale(K) - тем более у вас SVG, что масштабируется без потери качества.

    На скролл повешайте событие, которое будет постепенно уменьшать коэффициент до единицы. Всё. :)
    Ответ написан
    Комментировать
  • Есть ли инструмент проверки стилей на сайте?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    В хроме есть инструмент, но полезность спорная.
    Так как, во-первых, не все сайты состоят из одной страницы, а функционала объединения данных с разных страниц в одну статистику не завезли (пока не завезли), а во-вторых - все те штуки, которые применяются динамически - не учитываются как "использованные".
    Есть сервисы, на практике лично не использовал, но видел отзывы, что тоже работают весьма неидеально.

    5e764ad440489052775541.png

    UPD:
    Вспомнил статью, там подробнее о вашей беде.
    Ответ написан
    Комментировать
  • Эффекты при наведении на элемент?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    По наведению на кнопку контентной части добавляется класс "interference", который запускает анимацию:
    .interference {
      animation: interference 0.5s linear;
    }

    Сама анимация простейшая:
    @keyframes interference {
      20% {
        filter: blur(2px);
        transform: skewY(-1.2deg)
      }
      30% {
        filter: blur(2px);
        transform: skewY(1.2deg)
      }
      100% {
        filter: blur(0px);
        transform: skewY(0)
      }
    }


    Заодно псевдоэлементом добавляется фиксированный фон, который мигает также с помощью свойства animation.
    Код форматировать лень, гуглите "css blink animation".
    Вот картинка: https://danieldefo.ru/styles/star/glitch-overlay.png

    Резюме: дизайнерская задумка ничего (хотя мне сама иконка больше нравится - есть что-то такое мистическое), а чисто технически это делать - скука смертная.

    Откройте консоль, добавьте класс сюда и изучайте инспектор.

    5e75480155473551632663.png
    Ответ написан
    1 комментарий
  • Как лучше сверстать такие вкладки?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Добрый день.
    По вашему примеру - я никогда не буду советовать делать какие-либо вкладки без использования JS - слишком негибко и неинтуитивно получается.
    Но если всё-таки нужно без JS, то вы можете по-прежнему использовать селектор "~", если поменяете порядок элементов с помощью order из flex-спецификации.
    Ваш причёсанный пример: https://codepen.io/morevm/pen/jOPpZKo
    То, как это должно быть с JS: https://codepen.io/morevm/pen/XWbBZOK
    Ответ написан
    Комментировать
  • Некоторые браузеры неправильно отображают мою страницу. Почему?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Установите кодировку файла в UTF-8 без BOM, в HTML в head поставьте <meta charset="utf-8">.
    Если не поможет, то заставьте ваш сервер отдать заголовок Content-Type: text/html; charset=utf-8 любым известным способом.
    Ответ написан
    Комментировать
  • Как сделать тянущую анимации за курсором мышки без библеотек?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вам нужно использовать функцию линейной интерполяции (да, у нас в веб-анимации есть немного математики).
    А также перестать использовать setInterval за этим делом, используйте requestAnimationFrame.
    Вот вам статья, которая натолкнёт на правильные мысли, а ещё больше информации можно получить в Гугле по запросу "js lerp animation".
    Ответ написан
  • Как сделать такой многосоставной фон?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вот так, например.


    А вообще, если уменьшение радиуса скругления при уменьшении вьюпорта не требуется - смотрите на свойство border-image - просто идеальный кейс использования, изящнее будет.
    Ответ написан
    1 комментарий
  • Есть какое-нибудь соглашение/рекомендации по переносу атрибутов HTML-тэгов?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Рекомендация тут одна - пишите так, как вам (или вашей команде) привычнее и доступнее.
    Слишком уж это вкусовщина, чтобы попасть в какие-то популярные стайлгайды.

    P.S. Сам пишу в том варианте, который у вас первый (из документации Vue), и в коде большинства решений используется именно он. Вероятно, он и является более приемлемым для сообщества.
    Ответ написан
    Комментировать
  • Отложить загрузку скриптов, пока не загрузится весь сайт, как?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Отложите их загрузку через window.onload => setTimeout с задержкой 2-3 секунды. Это работает для того, чтобы не влияло на показатели PageSpeed.
    Достоверно известно, что при этом подходе Яндекс Метрика не показывает, что скрипт Метрики установлен на сайт. Данные нормально поступают, но в панели Метрики значок красный. :)
    Ответ написан
  • Как убрать смещение ссылок при увеличение жирности текста?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    А никак.
    Если нужно делать при наведении текст жирным, чтобы он не менял свои размеры, то можно использовать хак при помощи text-shadow.
    Пример сделать сейчас нет возможности, загуглите "text-shadow like bold" - там всё расскажут.
    Ответ написан
    Комментировать
  • Как сверстать ссылку с текстом по центру?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вот и появилось поколение людей, которые из ссылок будут делать гриды...
    Ваша задача не решается при таких вводных никак.

    Мы можем выровнять текстовый контент внутри по центру (1), но при переполнении он и останется по центру (2).

    Если есть возможность добавить внутрь вложенный элемент, то задача решается (3 и 4).



    ---

    Когда-нибудь это будет решаться так:
    .flex {
      align-items: safe center;
    }

    Но эта штука уже два года в черновиках и движений в эту сторону нет особо.
    Ответ написан
    3 комментария
  • Что будет, если использовать много элементов html? С технической точки зрения?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Увеличение количества DOM-узлов отрицательно сказывается на производительности.
    Ну и работать с этим менее удобно, если вы на эту разметку в редакторе смотрите.

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

    Но дьявол всегда в мелочах... Тут немножко производительности, там чуть-чуть - и вот уже сайт быстро загружается и отзывается на действия пользователя.

    Руками подобную разбивку делать - лишнее чаще всего, есть автоматизированные решения.
    На JS есть charming, на серверной стороне как-то никогда не приходилось таким заниматься, сами найдёте.

    Говорите, здравого смысла нет? Есть ряд задач, которые только так и решаются... Всему своё место.

    some-test-image.gif
    Ответ написан
    Комментировать