Ответы пользователя по тегу HTML
  • Как не обрезать тень элемента, используя "overflow: hidden"?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Задача со звёздочкой, факт. В целом поддержу оратора — Сергей delphinpro. Добавлю, что неплохо бы после сделать отрицательный отступ, чтобы не было нерегулируемого смещения остальными блоками. Плюс можно поиграться с «разгоном» элементов следующего и предыдущего слайда, чтобы задать им пространство в рамках «ушей», чтобы тень не выплывала обрезанной.
    Ответ написан
    Комментировать
  • Как лучше сделать?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Решения:
    1. Грубо и тупо — сохранить идентификатор блоков, соотнести с навигацией и при клике по навигации врубать display:none всем, кроме активного.
    2. Разбить информацию логически (контент) и отрисовывать тогда, когда выбран пункт навигации (createEleemnt и т.д.)
    3. Актуальный — пункт два в реализации на каком-нибудь фреймворке или библиотеке (React, Vue).
    Ответ написан
  • Как поместить логотип под кнопку в Html?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    1. Использовать фон.
    2. Абсолютное позиционирование.
    3. Использовать отрицательные отступы.
    Ответ написан
    Комментировать
  • Как сделать, чтобы меню не закрывалось при наведении на другую часть экрана?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    CSS предполагает наличие контекста наведения, наводишь на элемент и можешь управлять состоянием его дочерних элементов. Если ты увел курсор с родительского компонента, то потерял контекст и правило стилей работать не будет. Чтобы решить проблему, используй JS и управляй состоянием без контекста привязки, вешая состояние на переменные.
    Ответ написан
    Комментировать
  • Как будет правильно по правилам БЭМ использовать повторяющийся элемент?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если лого имеет какую-то стилевую нагрузку, например это svg, который управляется по цветовой схеме и т.д., т.е. это действительно самостоятельный блок, а не картинка в теле другого блока, то такие вопросы решаются как раз миксом.

    Блок логотипа описывает поведение исключительно логотипа, а класс-элемент родителя, в котором он находится задает отступы и вполне может регулировать размеры блока. В свою очередь поведение логотипа в разных размерах должно быть описано, хотя бы max-width: 100% для изображения.

    Модификаторы в этом случае не нужны, их оптимальнее использовать для других случаев, например покрас того же svg в черный или белые цвета, чтобы на фоне родительского блока выглядело контрастно.
    Ответ написан
    Комментировать
  • Как задать градиент кнопкам bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    background: linear/radial/и т.д.-gradient.
    Ответ написан
    Комментировать
  • Как правильно и без костылей сделать адаптивную страницу 404?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если тело страницы содержит разметку, например, шапки сайта, подвала и т.д., то эта информация должна быть и в стилях. А вообще обычно это простейшая страница, стили которой можно разместить прямо в теле, их не должно быть много.

    Если используется в маркетинговых целях, например «Вы попали не туда, но вот смотрите есть товары, которые могут вас заинтересовать», то есть смысл делать его как визуально в структуре сайта, так и через ЧПУ, который выдает страницу, как исключение из урлов.

    Если же убрать все эти тонкости, то задача страницы — отдать ответ 404 в запросе. Это тупик и никакой лишней информации и стилизации он не требует.
    Ответ написан
    5 комментариев
  • Как реализовать слайдер?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Чтобы элементы всегда были по обе стороны, их можно банально переставлять\клонировать и крутить. Дальше уже вопрос позиционирования. Так делают в принципе все карусели.
    Ответ написан
    Комментировать
  • Как сверстать подобные карточки?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Это masonry, реализуется либо библиотекой одноименной, либо гридами с танцами с бубном, либо каким-то более изощренным методом.
    Ответ написан
    Комментировать
  • Как сделать калькулятор дохода на сайт?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Дешево, просто и сердито — использовать библиотеки и фреймворки, например Vue или React, которые уже из коробки слушают изменяемые значения и могут рисовать новые.

    Лучше для получения понимания, как это работает — использовать слушатели с триггерами перерисовки на VanillaJS.
    Ответ написан
    Комментировать
  • Начал делать адаптив для сайта но в определенный момент сайт делает огромный отступ справа из-за чего там просто белый экран. Как это исправить?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Что-то на странице не сжимается до границ родительский области (максимальный размер — экран), и «выталкивается» создавая такую область. Пройдись по элементам инспектором, он подсветит их, что позволит найти. Обычно такое происходит с картинками, картами и заголовками.
    Ответ написан
    1 комментарий
  • Какое событие слушать, чтобы адекватно обновлять позицию дропдауна?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Нус, для начала, можно не вытаскивать такие контекстные штуки в общую видимость. Если не злоупотреблять overflow-ами, то все будет ок.

    В текущем же ключе для каждого элемента можно вешать слушатель прямо на вьюпорт, а не искать родителя.
    Ответ написан
  • Как лучше сделать меню при уменьшении экрана?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Нус, для начала нет смысла в ссылке «Главная», т.к. давно уже стало нормой делать ссылкой лого для этого функционала. Во-вторых пункты «Порядок работы» и «Этапы работы» мало того, что по своей сути являются дублирующим контентом, так еще и могут быть расположены прямо на главной странице, т.к. заводить под них отдельную ссылку не имеет смысла, а если это лендос, то могут быть перенесены в первый экран, а не в шапку.

    Портфолио может быть заменено словом Кейсы, если, конечно, по содержанию это именно они, а не скриншотики проектов.

    Все нужные контакты перечислены справа в шапке же, поэтому ссылка может располагаться в подвале или быть элементом выпадашки «О нас».

    Итого:
    1. Минус половина ненужной навигации.
    2. Проблема плохого дизайна.

    ЗЫ: Если же не в твоих силах сделать что-то с дизайном, то можно прибегнуть к выстраиванию навигации в 2 строки либо на медиазапросах экрана, либо плясать от медиазапроса контейнера. А на мобилке, конечно, прятать под бургер. Также можно прибегнуть к прокручиваемой области (как в приложениях часто делают).
    Ответ написан
  • Как затемнить background?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Псевдоэлемент для сайдбара, который позиционирован так, что закрывает контент и имеет цвет rgba(0,0,0,0.5) к примеру.
    2. Тень от сайдбара — расточительно, но работает.
    3. Реально существующий узел в DOM, который, как и в первом случае, позиционируется поверх контента.

    И т.д.
    Ответ написан
    Комментировать
  • Проблема в масштабировании сайта?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Выключить масштабирование.
    2. Почитать про адаптив.
    Ответ написан
  • Как сделать компактно с display: flex?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Можно прибегнуть к masonry, ведь это именно такая раскладка. Или к многоколоночному тексту в сопровождении танцев с бубном.
    Ответ написан
  • Как сделать начало анимации с другой стороны?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Дешево и сердито — так: https://codepen.io/i-am-studio_ru/pen/BaWymoy?edit...
    А в целом есть смысл и на абсолютном позиционировании.
    Ответ написан
  • Как убрать выделение у нажатых элементов в CSS?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Это выделение объекта мышкой. На скрине, так полагаю, картинка, а это текстовый элемент и выделяется точно также: зажать и выделить область или двойной клик на элемент (слово, например).

    Решение — поменять мышку, если двойной клик происходит при попытке сделать один.

    Могу ошибаться, конечно же, выглядит не так очевидно из-за свойства изображений. Если бы у пикчи не было свойства vertical-align:middle, то при выделении появлялся характерный отступ снизу. Другие свойства тоже могут его убирать.
    Ответ написан
    Комментировать
  • В чем суть SSR (Server Side Rendering)?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Динамические сайты, которые все больше занимают места на рынке, в виде загруженной html страницы представляют собой обертку типа:
    <html>
       <head>...
       <body>
           <p>Сообщение, которое будет отрисовано, если у юзера выключен JS</p>
           <script src="скрипт, генерирующий внешний вид и логику">
       </body>


    Т.е. данных нет. Из минусов:
    1. Роботы, которые не ждут отрисовки страницы просто не получают никаких данных.
    2. Пользователь получает данные тогда, когда они у него будут отрисованы, что создает некоторую задержку.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Либо чисто hover на стилях, либо на JS. Псевдокласс на пункт li распространяются на вложенные в нем списки.
    Ответ написан