Ответы пользователя по тегу CSS
  • Как сделать кнопку копировать в буфер обмена?

    @vladdimir
    Верстальщик
    Как-то так можно:
    //...
    	function copyResult() {
    	    navigator.clipboard.writeText(result.textContent)
                    .then(() => console.log('Done'))
                    .catch((err) => console.log(err))
    	}
    Ответ написан
    Комментировать
  • Когда создавать служебный блок в БЭМ?

    @vladdimir
    Верстальщик
    Присоединяюсь к ответу выше — с дизайном проще.
    Можно сделать так:
    <div class="hero-section__grid">
      ...
        <div class="hero-item hero-section__hero-item">
          <h2 class="hero-item__header">Hero Item 1</h2>
          ...
        </div>
    </div>


    Или так:
    <div class="hero-section__grid">
      ...
        <div class="hero-section__content">
          <div class="hero-item">...</div>
        </div>
        <div class="hero-section__pagination">...</div>
        <div class="hero-section__footer">...</div>
    </div>

    Или еще как, выбирая оптимальный вариант для конкретного проекта.

    Учитывая, что вам хочется делать элементы элементов, стоит перечитать руководство, методология отлично документирована. Хорошие статьи про БЭМ рассказывают про опыт и набитые шишки других разработчиков, и подразумевают, что вы методологией уже владеете. Если вы не владеете, они вас только запутают. Вводные статьи — вольный и урезанный пересказ официальной документации, причем часто гораздо худшего качества.
    Ответ написан
    Комментировать
  • Как лучше подключать картинки/стили: в js или в html?

    @vladdimir
    Верстальщик
    Почитайте подробнее доку, вот по теме: https://webpack.js.org/loaders/file-loader/
    После описания апи, внизу есть примеры разного использования. Не обязательно через js вставлять, вы в настройках вебпака указываете откуда и куда копировать картинку, в html вписываете текущий урл, при сборке пути заменяются на необходимые.

    Вот еще неплохой ресурс по вебпак: https://survivejs.com/webpack/foreword/
    Покрывает очень многие вопросы в достаточно сжатой форме, возможно знакомство будет удобнее как раз по этому ресурсу, чем по офф доке.
    Ответ написан
    1 комментарий
  • Стоит делать разметку так?

    @vladdimir
    Верстальщик
    От диватоза к дивафобии...
    цель, как можно меньше дивов - плохая цель. Дивы вообще это неплохо, а нейтрально. Плохо != нейтрально. С таким же успехом можно вместо дивов использовать секции и гордится своей семантичностью 80 уровня. Вполне нормально использовать дивы, если они вам нужны, для группировки или оформления или еще чего, что вам надо выразить и что не имеет какого-либо выраженного контекста.
    Конструктивная цель - изучить семантические значения тегов, как пример.

    На счет структуры - норм, но я бы ввел дополнительные обертки для группировки логотипа заголовка с текстом в отдельные секции (не обязательно этим тегом). Потому что, вместе они образуют законченные блоки, и имеют сильные связи между собой.
    div.logo
      img.logo-img
      p.logo-caption
    ...
    div.banner
      h1
      p
    Ответ написан
  • Как сделать бесконечный фейк-чат?

    @vladdimir
    Верстальщик
    Фу, развод какой-нибудь небось? Подсказка: таймеры, Intersection Observer, скролл.
    Ответ написан
    Комментировать
  • Я не как не могу правильно сделать урок в developer mozzila. Поможете?

    @vladdimir
    Верстальщик
    Так у вас в разметке, которую вы показали и нет никаких слов и таблиц. А линия красная, оттого что блок схлопнулся наверное.
    Как оно работать должно? Если через скрипт добавляете, то код скрипта нужен еще
    Ответ написан
  • Как сделать линии в перспективе (формула)?

    @vladdimir
    Верстальщик
    На css автоматически не получится.
    Можно вставить картинкой через свойство background-image, нарисовать svg например.
    Можно через канвас нарисовать.
    Ответ написан
    Комментировать
  • Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

    @vladdimir
    Верстальщик
    Алгоритм
    1. Вешаем обработчик на галерею addEventListener('click', onClickGallery)
    2. пишем функцию onClickGallery.
    Что она должна делать?
    - Если клик по превью, то изменить адрес большого изображения. И добавить индикатор текущего изображения у превью (синяя точка под последней прьвюшкой).
    - Если клик по стрелке, то показать следующее/предыдущее изображение.
    - Если клик по активному изображению или в другом месте, выйти из функции.

    Дал бы готовый код, но мне лень, а вам надеюсь хочется сделать и самому)

    Еще можно оптимизировать, чтобы в превью стояли картинки маленького разрешения, а в большую ставить полномасштабные варианты. Это ускорит загрузку сайта)
    Ответ написан
    4 комментария
  • Как скомбинировать классы, чтобы при div:hover свойство применялось к нескольким другим div?

    @vladdimir
    Верстальщик
    На сколько понял задачу, должно подойти.
    // Если изменяться должны элементы, которые лежат внутри targetClass
    .targetClass:hover .changeClass1,
    .targetClass:hover .changeClass2,
    .targetClass:hover .changeClass999, { 
    
    }
    // Если те, которые рядом лежат, то через  ~
    
    targetClass:hover ~ .changeClass1,
    targetClass:hover ~ .changeClass2,
    targetClass:hover ~ .changeClass999, {
    
    }


    Но вообще, все зависит от структуры разметки. Где и как размещены все эти блоки. Возможно в вашей разметке, с помощью css такое нереализуемо и нужно делать через js.
    Ответ написан
  • Как реализовать поиск на сайте?

    @vladdimir
    Верстальщик
    Вам логику поиска надо делать или отображение уже готовых результатов, которые получаете от апи?
    Если второе и апи на том же домене, аджакс подойдет. На вскидку, не особо вникая, делал бы как-то так.
    На форму обработчик изменения, который отправляет пользовательский ввод в функцию поиска через аджакс.
    Получаем джейсон-файл с результатами, ставим заголовки в подсказки сразу, а результаты по энтеру и клику на кнопке искать.

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

    @vladdimir
    Верстальщик
    Не уверен, сколько потратил) Не буду рассказывать о процессе обучения и прочем, а то ответ разнесет на несколько экранов. Лучше перейдем к сути.

    Вы как учитесь?
    На мой взгляд, программирование и верстка это 90% практики. Нужно писать код.
    Самый оптимальный вариант обучению новому. В вашем случае верстке html&css
    1. Ознакомиться с технологией.
    2. В зависимости от уровня - взять макет в инете или поставить задачу, например: сверстать главу из любимой книги, или сделать реплику кусочка сайта, который вам нравится. И верстать.
    3. Получать кайф от магии) «Повелеваю тебе, браузер, сделай этот текст красным, а эту картинку подвинь влево!». Когда не знаете конкретное заклинание, чтобы заставить браузер сделать то, что вам нужно - идти в гугл, искать инфу.
    4. Когда магии и заклинаний станет уже мало, и вы захотите узнать, как все это дело устроено и почему, идите читать спецификации и серьезные статьи.


    Суть в том, чтобы не учиться теории, а решать прикладные задачи.
    Когда мы читаем теорию без должного подкрепления практикой, мы лишь абстрактно представляем значимость тех знаний, которые добываем. «Ну да, круто, можно написать медиа-запрос под нужныый экран и перестроить сетку, ну да, бывают элементы блочные, блочно-строчные и вообще очень разные. Круто, это мне обязательно где-нибудь пригодится, эх зевнуть что-то хочется...»

    А когда мы щупаем руками перестройку сетки, поведение конкретных элементов, думаем о том, как расположить элементы в нужном порядке, сталкиваемся со сложностями и багами, мы понимаем для чего нужны конкретные команды, и как что работает.
    Когда начинаем писать полноценные страницы и сайты, сталкиваемся со сложностью, понимаем про вложенность, узнаем что-то про методологии и хорошие практики. И не просто потому, что так надо, а потому что на своем опыте поняли: это полезно и эстетически красиво.
    Забегая вперед, большинство концепций без практики вообще не понять. Можно зазубрить и даже немного внедрить в работу. Ну это будет необходимость ради необходимости, а та польза, которую конкретная концепция привносит в процесс разработки останется вне зоны осознавания.
    Ответ написан
    Комментировать
  • HTML/CSS. Как убрать расстояние между объектами полностью?

    @vladdimir
    Верстальщик
    Элементы с заданным блочно-строчным типом видят пробелы, решение:
    /jsfiddle.net/kpmjtnw8
    Убираем размер шрифта у родительского элемента, возвращаем
    .main-nav {
      ...
      font-size: 0;
      ...
    }
    
    main-nav a,
    main-nav p {
      ...
      font-size: 24px;
      ...
    }


    Исправил
    Ответ написан
    2 комментария
  • Position vs padding и margin. В каких случаях использовать?

    @vladdimir
    Верстальщик
    На мой взгляд, совсем не уместно - использовать position для выравнивания потока документа. Я использую там, где нужно навести красоту, добавить декора: прилепить иконку к инпуту, приклеить что-то к чему то и т.д.

    Паддинг это отступ от содержимого элемента к границе, маргин от границы к следующему элементу.На мой взгляд тут нет четких правил вроде: вот тут можно использовать только паддинг, а вот тут маргин и больше ничего. Использовать на вкус и по макету.
    Поиграйтесь сами с разными вариантами, посмотри как что себя ведет, 10 минут практики иногда полезнее нескольких часов зубрежки)
    https://webref.ru/ - а тут можно почитать о css.
    Ответ написан
    Комментировать