Ответы пользователя по тегу HTML
  • Как применить темную тему с учетом темы устройства на странице?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В купе с css переменными и выделением переменных темы в критический css
    https://yandex.ru/turbo/ru.hexlet.io/s/blog/posts/...
    Ответ написан
    Комментировать
  • Есть 4 псевдо-счетчика на странице. Как их рассинхронизировать?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    У Вас счётчик в глобале висит, вот и "синхронизированно".
    статьи по теме:
    https://learn.javascript.ru/closures
    https://learn.javascript.ru/closures-usage

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

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Оставляю Вам рефакторинг и задание стилей
    Ответ написан
    Комментировать
  • Как заменить атрибут title внутри ссылки?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Работа с атрибутами

    $('a').attr('title', 'Новый тайтл')
    Ответ написан
  • Как добавить логотип на видео ютуб в теге iframe?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Лого хабра поверх вставленного видео.
    Ответ написан
    Комментировать
  • Есть ли такие ситуации где гриды вообще не к месту, а флексбокс подойдёт?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    В целом, всё на ваше усмотрение. Раньше для сеток вообще исопльзовали таблицы или float. Которые для этого не предназначены.
    Однако, считается хорошим выбором чтобы использовать гриды для сеток\раскладок элементов, а флексы уже внутри блоков для выравнивания, порядка и тд. Когда нет чёткой сетки или она не нужна и тд.

    свежак:
    https://www.youtube.com/watch?v=ST1EvRemB_U

    Гриды были созданы для сеток\раскладок.
    А флексы для управления потоком элементов.

    Опирайтесь на тз, браузерную поддержку и здравый смысл.
    Ответ написан
    6 комментариев
  • Как реализовать такой эффект?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Итак, для этого вам понадобится:
    1. Медиафайл, который доложен вот так вот выпрыгивать(картинка, анимация, да хоть видео)
    2. Добавить этот медиа на страницу. и обернём его в div с классом, какой вашей душе угодно. Но лучше чтобы название намекало на суть элемента - что это какой-то выскакивающий блок. Скажем, toast(как тост из тостера)
    3. Делаем ему position: fixed и размещаем с помощью right И bottom так, чтобы его не было видно на экране.(right и bottom - чтобы не зависеть от размера экрана и он всегда был в одном месте)
    4. Так же опишем класс модификатор, например, toast_active, в котором будут стили отвечающие за позиционирование. Так, чтобы элемент было видно. То есть toast_active должны содержать такие bottom и right, чтобы элемент был на экране.
    5. Ну и далее нужен элемент триггер - по нажатию который надо добавлять класс toast_active на наш элемент. Например, через js.
    6. Внутри обработчика сделать таймер(setTImeout) на нужное вам время, через которое нужно скрыть этот элемент снова. В функции таймера убрать класс toast_active.
    7. Если пропишете в классе .toast свойство transition для bottom, то будет ещё и плавно всплывать.
    8. Профит
    Ответ написан
    Комментировать
  • Как в кнопке располагать иконку рядом с текстом?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Если отвечать на поставленный вопрос - то после текста должен идти слот под эту иконку.
    Пустой div, у которого и будет этот background указан.
    Таким образом, div всегда будет идти строго за текстом. Вы сможете задать ему отступ от текста, размеры, и прочие стили.

    div а не span просто потому что span всё таки обёртка для текста. А иконка это не текст.

    <div style="width: 100%; background-color: #fff;">
      <button style="width: 100%;height: 50px;">
        Зарегистрироваться
        <div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
      </button>
    </div>
    Ответ написан
  • Как вызвать модальное окно при скроллинге до нужного блока?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В зависимости от необходимой браузернйо поддержки у вас 2 варианта.

    1 - более универсальный, но больше работы руками:
    При загрузке документа находить в дереве ваш элемент с id=popup. Сохранить в переменную.
    Добавлять обработчик скрола на документ и сверять текущий скролл и позицию элемента сверху от начала документа(тык и тык). Совпадает - вызываем модалку.

    2 - более современный, но браузер сделает всё за вас:
    Воспользоваться Intersection Observer
    Суть ,в целом, та же. Указываете за каким элементом следить, указываете что следить нужно за появлением этого элемента во вьюпорте и указываете функцию обработчик этого события, в которой открываете модалку.

    Вот пример кода на Intersection observer
    var options = {
        root: null, // Не указываем = следим за областью вьюпорта.
        rootMargin: '0px', // отступы вокруг root
        threshold: 1.0
    }
    var callback = function(entries, observer) { 
        // Открываем модалку
    };
    var observer = new IntersectionObserver(callback, options);
    
    /* Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root */
    
    
    var target = document.querySelector('#popup'); // элемент, за которым будем следить.
    observer.observe(target);


    Профит
    Ответ написан
    Комментировать
  • Как временно подсветить якорную ссылку?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Не совсем понятно что именно нужно подсветить.
    • Если саму ссылку, на которую нужно нажать, то тут либо через css анимации(transition/keyframes), однако анимация будет зависеть от наличия конкретного состояния(наведение, focus и тд), либо же через JS. Суть та же, однако можно не зависеть от состояния, включать анимацию и выключать по таймеру. А так же есть дополнительные варианты, такие как обработчик нажатия на ссылку.
    • Если цель ссылки, на которую она указывает, то тут, в целом, варианты те же. Однако, через css, например, это можно сделать воспользовавшись псевдоклассом :target htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.

    Пример на :target, то есть если нужно подсветить цель ссылки:

    #one {
      color: blue;
      background-color: transparent;
    }
    
    #one:target {
    // и другие параметры анимации - направление, длительность, задержка и тд. 
    // в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
      animation: blur 10s ease-in-out ... ;
    }
    
    @keyframes blur {
       // другие ключевые кадры
       50% {
         color: red;
         background-color: yellow;
       }
    }
    Ответ написан
    Комментировать
  • Как создать такой блок?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1. Целиком картинкой сделать фон(Плохой вариант)
    2. Фоновый зелёный + через background-image задать этот круг(Должна быть отдельная картинка с этим кругом. Лучше svg) и правильно его спозиционировать с помощью соответствюущего свойства(background-position). Ваш вопрос разбирается в любой книжке про html\css, где есть глава про фоны.
    3. Можно через радиальный градиент, как предлагали выше, однако учитывайте какая браузерная поддержка вам нужна. Работать будет не взеде.
    Ответ написан
    Комментировать
  • Здравствуйте, я новичок в html, можете подсказать команду для того чтобы мне сделать для каждого поста отдельный блок не на всю ширину экрана?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Задайте каждому элементу-"посту" атрибут class, а потом в css определите ширину элементов с таким классом.
    HTML:
    <div class="post"></div>
    CSS:
    .post{
      width: 400px; // ограничит ширину блоков на отметке в 400 пикселей. (Но каждый блок будет всё равно начинаться с новой строки.)
    }

    Советую, перед тем как задавать подобные вопросы, сначала пройти какие-то курсы или почитать книги по html/css, которые не сложно нагуглить. Иначе Вы всю жизнь только и будете что задавать вопросы.
    Не плохой базовый интерактивный курс можно пройти на html academy бесплатно.
    Ответ написан
    Комментировать
  • Копирование текста и отправка в консоли?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Предположу, что Вам нужно скриптом скопировать "AZE KING" и отправить это запросом.
    В таком случае,
    • на основе предоставленной информации;
    • а так же при условии, что в нике игрока не может быть запятых;
    • у каждого игрока есть уровень, который отделяется от ника запятой;
    предложу слудющее:
    var playerInfo = document.querySelector('.win').textContent.trim(); // AZE KING, 47 уровень
    var playerName = playerInfo.slice(0, playerInfo.indexOf(',')) // AZE KING;
    var url = "site.com/add.php?name=" + playerName;
    
    var req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);


    Можно переделать на:
    // И сделать это массивом. Удобно, если дальше нужно так же что-то делать с уровнем или будут ещё другие параметры игрока через запятую.
    var playerInfo = document.querySelector('.win').textContent.trim().split(','); // ['AZE KING', '47 уровень']
    var playerName = playerInfo[0] // AZE KING;
    var url = "site.com/add.php?name=" + playerName;
    
    var req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    Ответ написан
    Комментировать
  • Как лучше реализовать выпадающую шторку на сайте?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Сделать у шторки footer, в виде некой "риски". И на неё уже вешать обработчик свайпа.
    5d55734acb356595239824.png
    Ответ написан
    Комментировать
  • Как сделать загрузку изображения с компьютера пользователя?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Комментировать