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

    tolfy
    @tolfy
    Фирменный стиль
    tabindex="-1"
    Ответ написан
    Комментировать
  • Как сделать высоту картинки равной его ширине?

    tolfy
    @tolfy
    Фирменный стиль
    UPD к ответу Danny Arty
    Не всегда можно опереться на абсолютные\фиксированные размеры.
    Данная задача решается стандартно через background обёртки, в которую вставлена заглушка из IMG (размера квадрата).
    https://codepen.io/tolfy/pen/XWVaGae
    Заглушкой в примере использована одна из иллюстраций.
    Способ дёшев и кроссбраузен.
    Ответ написан
    Комментировать
  • Как сделать круглый border с градиентом?

    tolfy
    @tolfy
    Фирменный стиль
    Градиент бордер https://codepen.io/tolfy/pen/ZRJKye
    Ответ написан
    Комментировать
  • Как верстать подобные SVG-фоны?

    tolfy
    @tolfy
    Фирменный стиль
    Для фонов создавайте отдельный лаут. Далее играйте позиционированием, отталкиваясь от ID секций и позиции scroll
    Как пример подобного вот накинута страничка
    Ответ написан
    Комментировать
  • Как правильно верстаются фотографии в карточке товара?

    tolfy
    @tolfy
    Фирменный стиль
    Без JS, чистый CSS https://codepen.io/tolfy/pen/KKvdZzZ
    Ответ написан
    Комментировать
  • Адаптивная таблица со спойлером?

    tolfy
    @tolfy
    Фирменный стиль
    Если вам не претят прямолинейные и примитивные решения, я бы предложил след. конструкцию, потребуется небольшой JS:
    HTML
    <table>
        <tr><th>..</th></tr>
       <tbody>
        <tr id="foo1" class="close" onclick='toggleClass(this,"open")'><td><div class="line-visible">..</div><div class="line-invisible">..</div></td></tr>

    CSS
    #foo1 .line-visible {
        height: calc(1rem + (padding-top\bottom));
        overflow-y: hidden; // optional
    }
    #foo1 .line-invisible {
        width: 100%
        height: 0;   /* OR ​display: none; */
        word-wrap: break-word;
        overflow-y: hidden; // optional
    }
    #foo1.open .line-visible {
        height: auto;
        overflow-y: visible; // optional
    }
    #foo1.open .line-invisible {
        height: auto;  /* OR ​display: block; */
        overflow-y: visible; // optional
    }

    JS
    function toggleClass(el, className) {
    	if (hasClass(el, className))removeClass(el, className)
    		else addClass(el, className);
    };
    function hasClass(el, className) {
      if (el.classList)
        return el.classList.contains(className)
      else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
    }
    function addClass(el, className) {
      if (el.classList)
        el.classList.add(className)
      else if (!hasClass(el, className)) el.className += " " + className
    }
    function removeClass(el, className) {
      if (el.classList)
        el.classList.remove(className)
      else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
        el.className=el.className.replace(reg, ' ')
    }}

    Процесс. Изначально скрываемый элемент line-invisible входит в родителя TR с классом close, передающего элементу высоту 0 (или скрытие блока), при клике на родителя TR ему добавляется класс open , снимающий ограничения по невидимости блока. Повторный клик возвращает ситуацию к началу. Пример кода можно глянуть тут https://antonybark.ru/patterns/js_templates/toggle....
    Т.к. приведённый в примере JS не использует ниуаках библиотек, кроме браузерных, думаю что его можно как-то даже параметризовать под условия конкретного проекта, но это уже вопрос к вашим спецам по JS.
    Ответ написан
    Комментировать
  • Можно ли при наведении на один элемент анимировать другой с помощью :hover?

    tolfy
    @tolfy
    Фирменный стиль
    Стандартый ход:
    используем свойство CSS "сосед"
    .foo1 + .foo2

    следует помнить, что соседство действует только в сторону "следующего ЗА", т.е. нельзя обратиться к соседу, "идущему ДО". В примере можем достать только до .foo2, а до .foo1 можно достать другими средствами, например, через родителя: .parent > *[class^="foo"]:first-child, но не через соседство +
    Ответ написан
  • Как сделать ширину столбца html одинаковой для всех строк?

    tolfy
    @tolfy
    Фирменный стиль
    table {
      table-layout: fixed;
    }
    th,
    td {
        max-width: 2rem;
        overflow: hidden;
    /* or
        text-overflow: ellipsis;
    */
    }
    Ответ написан
    Комментировать
  • Как в input[type="date"] сделать открытие календаря не только с иконки?

    tolfy
    @tolfy
    Фирменный стиль
    .parent{position: relative;z-index:1;opacity:0;} // это прозрачный input
    .parent:after{position:absolute;z-index:0;height:100%;width:100%;content: "по желанию"; + можно иллюстрацию через bkg} // это то, что буде показано на месте input

    отлично работает везде
    Ответ написан
    Комментировать
  • Как уместить SVG на экране при смене ориентации?

    tolfy
    @tolfy
    Фирменный стиль
    Как сделать резиновый svg? , а конкретно пример https://codepen.io/tolfy/pen/LNpEgP
    пробуйте менять ориентацию, работает свойство preserveAspectRatio="none"
    Ответ написан
    1 комментарий
  • Как называется такой дизайн? Как научиться правильно верстать такие макеты?

    tolfy
    @tolfy
    Фирменный стиль
    если задача сверстать 1:1
    0. этот скрин кидаете бэкграундом (размер точно в пикселях) на body, выравниваете его как вам надо по краям
    1. Вытаскиваете из рисунка все тексты (заголовки и блоки) и верстаете страницу дивами, вкладывая в них H2(numbers), H3(titles) и P(параграфы) == размерами шрифта и отступами регулируйте максимальное совпадение (перекрытие) бакгроунда вашими блоками с текстом(заливка у блоков прозрачная, чтобы видеть нижний скрин).
    2. Отделяете на скрине графику от текстов, тексты удаляете (в фотошопе например), и кладёте получившееся также бэкграундом вместо первоначального скрина
    3. передайте текстам цвета
    Готово

    если стоит задача адаптивности, то бэкграунд нарезайте на части, (целыми кусками, не перерезая линии) и кидайте их бэкграундами в дивы

    лучше освоить любую векторную прогу и переводить растровые рисунки в вектор, далее в SVG, с ним вам будет удобнее работать
    Ответ написан
    Комментировать
  • Как сверстать блок, в котором другие блоки в ряд занимают 100% его ширины?

    tolfy
    @tolfy
    Фирменный стиль
    Создайте контейнер, входящие в него ряды блоков равны 100% ширины контейнера,
    ширину каждого блока или хардкорьте процентами, или примените js для расчёта.
    Высоту аналогично.
    Чтобы не мучиться расчётами, используйте flex: auto, -shrink, -grow; align stretch
    картинки бэкграундом через cover и contain

    если нужен код, скажите, накидаю
    Ответ написан
    Комментировать
  • Как лучше разбить заголовок H1 с точки зрения SEO?

    tolfy
    @tolfy
    Фирменный стиль
    h1{max-width:%em;}
    Ответ написан
    Комментировать
  • Насколько важна "Богатая семантика", в верстке?

    tolfy
    @tolfy
    Фирменный стиль
    Соблюдайте семантику, она важна.
    • доступность контента
    • удобство рефакторинга и экспорта-импорта данных
    • соблюдение стандартов всегда крайне радует в коде коллег
    • рано или поздно вырастите до руководителя, и стандарты станут вашим базисом, без которых управление ..(масса факторов)
    Ответ написан
    Комментировать
  • Почему видны границы бэкграунда при border-radius 50%?

    tolfy
    @tolfy
    Фирменный стиль
    Ответ написан
    Комментировать
  • Позиционнирование изображение внутри блока?

    tolfy
    @tolfy
    Фирменный стиль
    Рискну предложить, возможно не самый лучший, но быстрый и практически беспроблемный вариант с использованием background-image

    <div class="img-block"  style="background-image: url(something.img)">
         <img href="something.img" />
    </div>

    в принципе, имеем так:
    <div class="img-block"  style="background-image: url(something.img)">
    </div>

    .img-block {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .img-block img {
        opacity: 0;
    }


    Скрываем IMG, вместо него показываем background-image.
    Плюсы: кроссбраузерность, лёгкая правка кода, не требуется подготовка иллюстраций
    Минусы: засорение кода, хотя, если СЕО не так важно и заданы размеры блока, то <img> можно совсем удалить.
    * если во все <img> вставлять один и тот же файл something.img, этим можно контролировать линейные размеры блока <div>, не указывая его размер в стилях.

    пример https://codepen.io/tolfy/pen/MGVbwJ
    Ответ написан
    Комментировать
  • Из-за чего появляются непонятные символы?

    tolfy
    @tolfy
    Фирменный стиль
    при использовании в content национальных символов, кодировка должна быть указана в самом css :
    @charset "windows-1251";
    @charset "UTF-8";
    ...

    спецификация

    p.s. дополнение: возможны проблемы с подгрузкой шрифта (у вас font-family: "CirceRegular";), желательно расширить варианты для перекрытия глюков и подтягивания системного шрифта, например
    font-family: "CirceRegular", Helvetica, Arial, sans-serif;
    Ответ написан
    Комментировать
  • Какие проекты можно создать начинающему веб-разработчику?

    tolfy
    @tolfy
    Фирменный стиль
    скилл неплохо оттачивается на вёрстке стандартного раздела "каталог товаров", включая страницу товара, корзину и форму заказа.
    Тут и сетка и медиа-блоки и формы, развитая логика. Плюс в том, что вам обязательно попадётся магазин в дальнейшей практической работе.

    p.s. Мой личное: работа над абстрактными проектами, для себя, - не имеет большого смысла, если вы не в самом начале изучения азов. Выгоднее за бесплатно, но поднимать реальный проект, живой. Пусть даже не масштабный и не интересный именно вам. Идите волонтёром, получите правильный опыт работы в команде )
    Ответ написан
    Комментировать
  • Tooltip не переносится, как исправить?

    tolfy
    @tolfy
    Фирменный стиль
    проверьте ваш пример, по ссылке он пустой
    Ответ написан
    Комментировать
  • Как сделать верстку меню?

    tolfy
    @tolfy
    Фирменный стиль
    если без хаков, то это стандартное выпадающее (вверх) меню, только иная стилизация
    самый чистый по вёрстке способ, - применить на button JS (click) на замену класса стиля ( display: none > display: inline-block )
    если не умеете, скажите, скину код
    Ответ написан
    Комментировать