• Как убрать фокус с инпута?

    tolfy
    @tolfy
    Фирменный стиль
    tabindex="-1"
    Ответ написан
    Комментировать
  • :hover для мобильных устройств, нужно ли адаптировать?

    tolfy
    @tolfy
    Фирменный стиль
    Вопрос не в самом hover. А в UX для tap, в прогнозировании, как именно пользователь использует элементы на устройстве с тапами. Что это, ссылка или button, понятно-ли пользователю при взгляде на элемент, как он работает, выглядит-ли ссылка как ссылка, в кнопка как кнопка?
    Если это вопросы рассмотрены при вёрстке, то остальное несущественно
    Ответ написан
    Комментировать
  • Как верстать адаптивный элемент из нескольких картинок?

    tolfy
    @tolfy
    Фирменный стиль
    1. Для адаптива использовать относительные величины: %, vw\vh
    2. Сверстать блок с картинками на SVG
    Ответ написан
    Комментировать
  • Как сделать что бы линия не растягивалась во всю ширину?

    tolfy
    @tolfy
    Фирменный стиль
    решение в лоб https://codepen.io/tolfy/pen/abEYyxE
    :root {
        --svg-width: 5px;
    }
    .parent {
        position: relative;
        z-index: 1;
    }
    .parent:before {
        content: '';
        position: absolute;
        z-index: 2;
        width: 5px; /* можно задать через переменную var(--svg-width) */ 
        height: 100%;
        margin-left: calc(50% - var(--svg-width) / 2);
        display: block;
        background: red; /* подставьте своё, позиционировать не надо */ 
    }
    Ответ написан
    Комментировать
  • Как сделать высоту картинки равной его ширине?

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

    tolfy
    @tolfy
    Фирменный стиль
    Почти беспроигрышно font-family: system-ui,sans-serif;
    https://codepen.io/tolfy/pen/XWVrNyG
    Ответ написан
    Комментировать
  • Как сделать круглый 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, но не через соседство +
    Ответ написан
  • Как учиться дизайну самостоятельно?

    tolfy
    @tolfy
    Фирменный стиль
    offtop: UI/UX
    Совет. Воспитай в себе тестировочного персонажа. Желательно, чтобы это был:
    • пожилой человек, слабо знакомый с интернетом и его "стандартными" UI
    • спешащий и "затраханный" юзер, уставший от нашествия "интересных решений" в UI

    Свои решения проводи через проверку этим персонажем.

    Приглядись к сети, как много решений, понятных только самим разработчикам. Как часто удивляешься, что нужный тебе в данное время элемент хрен найдёшь сходу и он ради "красоты" загнан "куда-то там".. Считаю, UI рассчитанный на умного и не учитывающий "дурака", - ущербен. ) Следовать совету выше вначале будет тяжело, потом втягиваешься, и персонаж начинает работать в паре с мастером уже параллельно и постоянно, не сильно мешая.
    Ответ написан
    Комментировать
  • Почему на мобильных разрешениях не работает видео-фон?

    tolfy
    @tolfy
    Фирменный стиль
    Начинайте рыть отсюда: мобильные браузеры могут блокировать запуск(и даже загрузку) фонового видео ради экономии трафика, энергоресурсов и ..
    Safari и Chrome для мобильных устройств внесли изменения в то, как действует видео на мобильных устройствах

    это раз.. и это два

    p.s. Мозилла тоже в деле
    Ответ написан
    Комментировать
  • Как сделать ширину столбца 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

    отлично работает везде
    Ответ написан
    Комментировать
  • Grid: как задать картинке высоту строки?

    tolfy
    @tolfy
    Фирменный стиль
    .* img{height: 1 rem;max-height: 1 rem;width: auto;} иллюстрация должна быть в той же строке и быть inline
    Ответ написан
  • Как уместить SVG на экране при смене ориентации?

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

    tolfy
    @tolfy
    Фирменный стиль
    Я бы посоветовал начать со штудирования истоков, с примеров работ графиков.
    Начните с Дюрера и да Винчи.

    Если вы уже поднаторели в мастерстве рисования, то важнейшим моментом станет сама подача работ, стиль публикаций, тут Пинтерест к вашим услугам. Наибольший массив коллекций концептов и техническо-художественных приёмов их подачи. Подобрать ссылку крайне сложно, на вкус и цвет..

    Со своей стороны советую потрудиться над логотипом и общим стилевым шаблоном для публикаций. Окупится сторицей узнаваемостью. Примеры стилизации
    Ответ написан
    Комментировать
  • Как называется такой дизайн? Как научиться правильно верстать такие макеты?

    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

    если нужен код, скажите, накидаю
    Ответ написан
    Комментировать