Задать вопрос
Finesse

Finesse

Ответы пользователя по тегу HTML

  • Могу ли я изменить свойтсов css без js по клику на элемент?

    Finesse
    @Finesse
    На чистом CSS нет, но можно с применением HTML. Смысл трюка: изменение состояния <input type="checkbox" /> и привязка CSS-свойств к этому состоянию. Пример:

    <input type="checkbox" id="wrapTrigger" />
<div class="wrap">
  <p>Любой контент</p>
  <label for="wrapTrigger" class="button">Нажми меня</label>
  <p>Любой контент</p>
</div>

<style>
  #wrapTrigger {
    display: none;
  }
  .wrap {
    color: red;
  }
  input:checked + .wrap {
    color: blue;
  }
</style>

    В этом примере важно, чтобы блок .wrap располагался сразу после input, иначе не сработает CSS-селектор +. HTML-элемент label переносит эффект клика на указанный чекбокс (связь происходит через значения полей for и id).
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать так, чтобы при нескольких подходящих HTML элементу CSS селекторах с равным весом применялся селектор относящийся к ближайшему родителю?

    Finesse
    @Finesse Автор вопроса
    CSS-переменные элегантно решают эту проблему:

    a {
  color: var(--link-color);
}
.style1 {
  --link-color: red;
}
.style2 {
  --link-color: green;
}


    HTML-код тот же самый, то в вопросе. Демо: https://codepen.io/anon/pen/aqEmXr.

    По данным Can I use эту технологию поддерживают браузеры примерно 80% пользователей. По данным посещений сайтов, к статистике которых я имею доступ (≈300000 посетителей в месяц), эту технологию поддерживают браузеры 88% посетителей.
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать вылезая за границы блока?

    Finesse
    @Finesse
    Способ 1: абсолютное позиционирование

    <div class="block">
    <img class="image">
</div>

    .block {
    position: relative;
    overflow: visible;
}
.block .image {
    position: absolute;
    top: -100px;
    right: 200px;
}


    Способ 2: отрицательные отступы

    <div class="block">
    <img class="image">
</div>

    .block {
    overflow: visible;
}
.block .image {
    display: inline-block;
    margin-top: -100px;
    margin-bottom: -100px;
}


    В обоих способах адаптивность можно сделать с помощью @media-правил. Например:

    .block .image {
    position: absolute;
    width: 300px;
    top: -100px;
    right: 200px;
}
@media (max-width: 800px) {
    .block .image {
        width: 200px;
        top: -50px;
        right: 50px;
    }
}
    Ответ написан
    5 комментариев
    5 комментариев

  • Стоит ли до изучения бекенда (PHP) сперва изучать фронтенд?

    Finesse
    @Finesse
    Если вы изучаете PHP для веб-разработки, то вам в любом случае понадобится знание HTML и базовые знания CSS и JS.
    Ответ написан
    Комментировать
    Комментировать

  • Как осуществить такую анимацию?

    Finesse
    @Finesse
    Через <canvas>. Программирование производится с помощью JavaScript. Схема примерно такая:
    1. На то место, где должен быть эффект, помещается canvas, который занимает всю площадь места.
    2. В памяти генерируется набор случайных точек со своим вектором скорости.
    3. В каждом кадре анимации точки сдвигаются в соответствии в вектором скорости.
    4. В каждом кадре анимации точки отрисовываются на canvas. Дополнительно проводятся линии между всеми парами точек, между которыми расстояние меньше определённого значения.

    Есть готовая библиотека для создания таких анимаций.
    Ответ написан
    Комментировать
    Комментировать

  • Как исправить ошибку? Почему так происходит?

    Finesse
    @Finesse
    Файл _header.pug включает сам себя, получается рекурсия, из-за неё происходит переполнение стэка при компиляции. Чтобы исправить, уберите extends ../components/_header.pug из файла _header.pug.
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить сам тег с помощью js (jq)?

    Finesse
    @Finesse
    У DOM-элемента невозможно изменить тэг. Можно только заменить старый элемент на новый, перенеся всё его содержимое. Например, так:

    function replaceTag( element, newTag )
{
    var elementNew = document.createElement( newTag );
    elementNew.innerHTML = element.innerHTML;

    Array.prototype.forEach.call( element.attributes, function( attr ) {
        elementNew.setAttribute( attr.name, attr.value );
    });

    element.parentNode.insertBefore( elementNew, element );
    element.parentNode.removeChild( element );
    return elementNew;
}


    Функция не переносит слушатели событий. Возвращает новый элемент.
    Ответ написан
    Комментировать
    Комментировать

  • Как прижать baseline-линию текста к низу родительского блока?

    Finesse
    @Finesse Автор вопроса
    Для блока .contents установить значение line-height равным 0 и добавить него какой-нибудь элемент, у которого свойство display равно inline-block:

    .contents {
  line-height: 0;
}
.contents:before {
  content: "";
  display: inline-block;
}

    Демо: codepen.io/anon/pen/MyJXoy?editors=1100
    Ответ написан
    Комментировать
    Комментировать

  • Как добавить/удалить link в head? И возможно ли это вообще?

    Finesse
    @Finesse 
    // Добавление link
$link = $('<link/>', {
  rel: 'stylesheet',
  href: 'путь...'
}).appendTo('head');

// Немного позже удаление ранее созданного link
$link.remove();


    Но лучше так не делать, потому что изменение стилей произойдёт с заметной задержкой, вызванной тем, что новый файл стилей нужно сначала загрузить и обработать. Лучше всего изменять класс тега body, а новое оформление задавать в том же файле стилей, но добавив к селекторам body.новыйКласс:

    <html>
  <head>
    <script src="js/jquery.js"></script>
    <style>
      .content { color: black; } /* Обычное оформление */
      body.otherStyle .content { color: red; } /* Новое оформление */
    </style>
  </head>
  <body>
    <div class="content">Lorem ipsum</div>
    <button id="button">Поменять всё</button>
    <script>
      $('#button').click(function(event) {
        // Нажатие кнопки будет добавлять класс, если его нет, и удалять его, если есть, тем самым включая/выключая другое оформление
        $('body').toggleClass('otherStyle');
        event.preventDefault();
      });
    </script>
  </body>
</html>
    Ответ написан
    3 комментария
    3 комментария