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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Общая концепция будет примерно такая:
    @keyframes custom-fade-in {
        0% {
            stroke-dasharray: 0 300;
            fill: transparent;
            animation-timing-function: ease-in;
        }
        50% {
            stroke-dasharray: 150 150;
            fill: transparent;
            animation-timing-function: ease-out;
        }
        100% {
            stroke-dasharray: 300 0;
            fill: #000;
        }
    }
    
    path {
        stroke: #000;
        fill: none;
        stroke-dasharray: 0 300;
        animation: custom-fade-in 2s ease-in-out infinite;
        animation-fill-mode: forwards;
    }


    Но если взять контуры как есть, то они будут заливаться не там, где нужно по дизайну. Нужно открыть эту SVG в векторном графическом редакторе и слегка порезать эти контуры. Нужно чтобы каждая буква была обрисована линией по кругу один раз, а не два, как сейчас. Тогда заливка будет по всей букве. А то сейчас заливается пространство между двумя почти продублированными контурами букв, т.к. технически именно оно является внутренной частью path. А еще будет удобно каждую букву делать отдельным контуром - проще будет подобрать значения для stroke-dasharray.
    Ответ написан
  • Как сделать так, чтобы тень не налазила на буквы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Можно заменить тень на фильтр:



    Но такие штуки не отличаются хорошей кроссбраузерностью, а светлое будущее наступило еще не везде, так что в общем случае я бы рекомендовал использовать SVG-картинки.
    Ответ написан
  • Как сделать 3D анимацию такого плана как на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Саму птицу, как уже верно заметили, можно соорудить на WebGL. Как пример подобной штуки, только без частиц вокруг и без ядреного шума на самих крыльях:
    Ответ написан
  • Как сделать волну?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Самый простой и универсальный вариант - SVG картинка с белой волной на всю ширину страницы, которая налезает на секцию с фоном. Формат SVG хорош тем, что для такой простой по форме и однотонной штуки, он весит меньше, чем растровая картинка нужного размера. А еще есть готовые инструменты, вроде getwaves.io, для генерации таких волн. Разместить картинку так можно по-разному, в зависимости от соглашений по коду в проекте - отрицательные марджины, абсолютное позиционирование и.т.д.
    Ответ написан
  • Как сделать такую штуку?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Вариантов в целом много. Если пойти по пути псевдоэлементов с абсолютным позиционированием и аккуратного выравнивания, то получится что-то такое:
    Ответ написан
  • Прорисовка SVG?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Нужно с помощью метода getTotalLength() узнать длину path (она равна 3904) и подставить ее везде, вместо вашего магического числа 1000.
    Ответ написан
  • Как вставить 3д модель с помощью three.js?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    В сети есть множество примеров. Есть официальный пример из документации самой Three.js. Или вот, например, другой вариант, с дополнением в виде статьи.
    Ответ написан
  • Как это лучше реализовать?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Для квадратов с размером одежды - можно просто border сделать. Круги можно нарисовать с помощью radial-gradient() в фоне, без создания дополнительных элементов (чередуя цвет и прозрачность по мере удаления от центра).

    В таких переключателях не так важно, как вы их сверстаете, важна доступность. И вот тут самая сложность и кроется. В этом маленьком компоненте нужно подумать про поддержку клаиатуры, подумать про то, что читалки должны понимать, что это radio-инпут и здесь что-то выбирается, ну и должны быть по крайней мере очевидные изменения во внешнем виде на :hover/:focus и выделение выбранного варианта. Последнее решается с дизайнером. А про первые два - полезно загуглить для своего развития, даже если ваш заказчик/начальник скажет, что "денег нет, но вы [пользователи с ограниченными возможностями] держитесь".
    Ответ написан
  • Как сделать адаптивный по высоте треугольник на CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    В современном CSS есть замечательная штука - clip-path, которая позволяет сделать элемент нужной формы. В контексте вашей задачи это решение гораздо надежнее хаков с градиентами, т.к. будет по-настоящему тянуться на любую высоту (правда IE эту красоту не поддерживает):
    Ответ написан
  • Hover у тега svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Проблема в том, что у вас дублируются id у элементов на странице.
    Ответ написан
  • Что за эффект при скролле?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Все это строится на шейдерах в WebGL.

    Первый пример очень похож на вот эту демку (лучше открыть в отдельном окне):


    А вот найти готовое решение один в один как на какой-то гифке из сети очень сложно. Часто его не будет. Дизайнер концепт нарисовал, а на практике никто такое еще не запрограммировал. В такой ситуации - только руками писать. Советую почитать введение в программирование шейдеров для верстальщиков и посмотреть стримы Юрия Артюха (меня терзают смутные сомнения, что он когда-то делал эффект, как во втором вашем примере).
    Ответ написан
  • Как сделать, чтобы эффект blur не выходил за бэграунд?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    .main-header {
        overflow: hidden;
    }
    Ответ написан
  • Как "заставить" работать stroke-dashoffset?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Дело в том, что в браузере firefox не работает свойство stroke-dashoffset

    Если добавить единицы измерения, то начинает работать:
    stroke-dashoffset: calc(440px - (440px * 90) / 100);
    Ответ написан
  • Обтекание текстом фиксированного блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.

    Треугольники можно было упустить, не в них суть)


    Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.

    5e202e499c905300447523.png

    codepen.io/sfi0zy/pen/zYxJNmG.
    Ответ написан
  • Review верстки: ошибки и замечания???

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    По внешнему виду сказать особо нечего, дизайн слишком простой. Есть пара замечаний:
    • Дюже мелкий шрифт на 15.6' fullhd мониторе. Нужно увеличить. Это один из тех моментов, когда может быть накосячили и не вы (а дизайнер), но исправить нужно. Вообще дизайнеров всегда нужно проверять - они тоже люди, ошибаются иногда.
    • Обводка вокруг элемента, на котором сейчас фокус, не всегда видна, особенно вокруг картинок. Нужно что-то с этим сделать.


    По коду и сборке:
    • Concat для скриптов? Весьма своеобразный выбор. Лучше освойте сборщики, тот же webpack, и используйте везде его.
    • Освойте хотя бы классы из ES6. Делать компоненты в виде функций и париться с прототипами в 2020 году - не комильфо. И просто не удобно.
    • Собранный CSS/JS не нужно хранить в директории с исходниками. Вообще все что генерируется при сборке - не исходники. Когда все в кучу смешано - думать сложнее.
    • Картинки в git репозитории в общем случае лучше не хранить.
    • Зависимости проще и понятнее ставить из npm, а не копировать себе файлы.
    • JS стоит форматировать поаккуратнее, будет проще бысто читать и понимать его. Загуглите стайлгайд от airbnb.
    • Селекторы в CSS не способствуют пониманию происходящего, поддержке и переиспользованию кода. Почитайте про CSS методологии. Для начала про БЭМ. Поймите саму суть, зачем они нужны, и используйте.
    • Подтяните английский, чтобы в самих селекторах не было тупых грамматических ошибок (в комментариях - черт с ними, а вот селекторы переиспользуются много где, поэтому лучше, если имена у них понятные и грамматически верные).


    Советы, как и в большинстве таких вопросов, простые:
    • Изучайте современный стек инструментов, старайтесь понять не форму, не внешние признаки их использования, а суть, зачем они нужны.
    • Больше практикуйтесь.
    Ответ написан
  • Периодическое мерцание элементов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).
    Ответ написан
  • Проблемы с анимацией в Safari?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    на айфонах

    caniuse.com/#feat=css-animation:
    iOS 6.1 and below do not support animation on pseudo-elements. iOS 7 and higher are reported to have buggy behavior with animating pseudo-elements.


    Обе лагающие анимации как раз связаны с псевдоэлементами. Имеет смысл их заменить на обычные div-элементы.
    Ответ написан
  • Оцените пожалуйста вёрстку(2)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Замечание номер раз: код минифицирован, не смотрел.
    Замечание номер два: макеты не видел, возможно местами накосячил дизайнер.

    Беглый просмотр дал следующее:

    №1:
    - Шрифтыыыы... Arial - это боль. Вы, вероятно, забыли подключить нужный шрифт
    - Иконки социальных сетей слишком маленькие, сложно попасть, можно поболее сделать
    - Две иконки одинаковые, нехорошо, путает
    - В поле для поиска серым по серому написано - не видно
    - Гамбургер есть, но что он делает - не понятно
    - В карусели, при нажатии на точки появляется ненужный outline
    - В поле для поиска иконка съехала
    - Размер шрифта в одинаковых элементах скачет
    - Вертикальные отступы скачут
    - При адаптиве картинки плющатся
    - Какие-то ошибки в консоли

    №2
    - Такое впечатление, что навигация и текст под ней выровнены не по левому краю
    - Так и хочется, чтобы кнопка с рыжей границей при наведении стала вся рыжей, как это обычно и делают
    - Выпадающая выбиралка языка и валюты пропадает, ее нельзя использовать мышкой
    - Два поля для поиска на одном экране? Хотя это косяк дизайнера, ладно
    - Какие-то иконки с сердечками, вопросиками и.т.д. Нужно по крайней мере добавить всплывающие подсказки, что это вообще такое
    - Плюс и минус подсвечиваются как одна кнопка
    - Интерактив никакой не работает, нужно доделывать
    - Имеется непостоянство в подсвечивании элементов при наведении
    - Скидки в 70%, круто! Эээ.. А где тут кнопка "показать товары со скидкой"?
    - Внезапный шрифт с засечками
    - Внезапные серые бордеры, когда только что в такой же секции их не было
    - Вертикальные отступы опять везде пляшут
    - Белый по желтому не читается
    - Опять внезапное выравнивание влево, когда только что в такой же секции было по центру
    - Подпишитесь на рассылку! Ввожу почту и понимаю, что кнопки "подписаться" там нет. Fail.
    - На телефоне в подвале все выравнивание скачет влево-вправо

    Совет номер раз: почитайте про дизайн для недизайнеров и книги от Nick Kolenda, чтобы лучше понимать, где что-то явно не так и имеет смысл поправить.

    Совет номер два: старайтесь все в коде приводить к единой системе, чтобы одинаковые вещи действительно были одинаковыми. Этому способствуют препроцессоры и введение переменных с основными размерами + миксины для эффектов. Системная верстка всегда оставляет лучшее впечатление, чем бессистемная.

    Совет номер три: изучайте JS и доделывайте интерактивные элементы, чтобы ими можно было пользоваться. Не стоит это дело откладывать в черный ящик, работодателям чисто верстка без скриптов нужна очень редко.
    Ответ написан
  • Как сделать canvas в качестве фона для div?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    канвас добавить в качестве фона для div + background-size: cover

    Проверьте правильность позиционирования этого фона, может он у вас съехал куда-то и вы его не видите. Плюс не забывайте, что у png есть прозрачность, и, если канвас закрашен не полностью, а вы используете лишь его часть, то сложится впечатление, что на фоне ничего нет, хотя там что-то есть.

    Ответ написан