Ответы пользователя по тегу Вёрстка
  • Есть ли какой то список что нельзя использовать в 2022 году при разработке с поддержкой IE 11?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Чтобы не перепечатывать каждое свойство в caniuse

    doiuse?
    Ответ написан
    Комментировать
  • Как сделать плавный переход градиента?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Градиенты нельзя анимировать в рамках CSS "в лоб". Но можно сделать несколько элементов с разными градиентами друг над другом и менять им прозрачность:

    Ответ написан
    4 комментария
  • Как реализовать подобную анимацию?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В соседнем ответе все верно написали. CSS-трансформации - это именно то, что нужно в такой ситуации. Технически вся красота возникает из-за параллакса - там несколько слоев движутся с разной скоростью. Так что здесь не обязательно именно слайдер использовать - это может быть любой инструмент для построения кастомного скролла (с инерцией). При желании можно свой написать, это не так сложно, нужен лишь школьный справочник по физике, но можно и готовый инструмент взять. Тот же Locomotive Scroll вполне сгодится.

    В этом примере как раз что-то похожее (только нужно открыть на CodePen - горизонтальный скролл не очень дружит с iframe-вставками):
    Ответ написан
    1 комментарий
  • Какие вы используете инструменты для ускорения верстки макетов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть несколько сторон вопроса:

    1. Часто повторяющиеся рутинные действия, вроде копирования файлов, выделения critical css или обработки картинок. Для этого есть gulp + плагины под конкретные задачи.
    2. Разделение кода по модулям, добавление синтаксических возможностей, убирание мусора из кода. Вопрос удобства и ускорения ориентирования по нему. Обычно это pug, less, postcss, в частности autoprefixer, ну и babel, куда без него.
    3. Это все нужно собрать. Тут webpack или снова gulp + плагины. Можно webpack запускать через gulp, как одну из задач. Ну и browsersync, чтобы руками не перезагружать страницу.
    4. Ускорение написания кода. Тут emmet + умение работать с текстовым форматом как таковым. Порой vim с множественными курсорами кажется чем-то космическим.
    5. Страховки от ошибок - w3c validator, stylelint, doiuse, eslint, sonarjs. Сильно недооцененная тема, но экономит много времени на отладке.


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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Самый простой и быстрый способ - вставить картинкой. Да, некрасиво, но зато дешево и надежно. В теории можно такую штуку сделать и на чистом CSS с помощью нескольких градиентов, но это дольше и могут возникнуть разные артефакты, которые не всегда получится скрыть. Хотя если фон однотонный и эта штука постоянно в движении, то такой вариант тоже может сработать:
    Ответ написан
    1 комментарий
  • Как реализовать этот кусок шаблона?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Подобные штуки гуглятся по запросу CSS timeline. Есть неплохая подборка примеров на freefrontend.com, в которой можно набраться идей по реализации.
    Ответ написан
    Комментировать
  • Как реализовать данную полосу?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    В соседнем ответе есть решение с помощью дополнительного элемента и псевдоэлементов. Альтернативно можно нарисовать такой бордер с помощью градиентов на фоне:
    Ответ написан
    1 комментарий
  • Как для современных браузеров выводить анимацию, а для старых картинку?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Можно сходить на Browserhacks.com, взять проверки на нужные вам браузеры и запускать анимацию в зависимости от их результата. Но это костыль, конечно. Тем более, что Safari - это не "старый браузер".
    Ответ написан
    Комментировать
  • Как сделать, чтобы эффект blur не выходил за бэграунд?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .main-header {
        overflow: hidden;
    }
    Ответ написан
    Комментировать
  • Фигуры на чистом css или svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Давайте посмотрим с разных сторон:

    С одной стороны SVG можно нарисовать в графическом редакторе - для замороченных фигур это будет проще, чем пытаться нашаманить их на CSS.

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

    С третьей стороны может быть соглашение в компании относительно верстки и в нем этот момент может быть описан (скорее всего в пользу SVG). Тогда ничего не придумываем и действуем в соответствии с ним - постоянство в коде очень важно для его поддержки.

    С четвертой стороны могут быть такие элементы, что на CSS их не получится сделать кроссбраузерно (с учетом утвержденного списка браузеров). Тогда SVG - наш выбор.

    С пятой стороны могут быть анимации у этих элементов. Там нужно смотреть, но иногда вариант с SVG можно будет анимировать как задумано, а вариант на CSS - нет.

    С шестой стороны есть вопрос производительности. Часто для имитации одного элемента в SVG нужен десяток-другой элементов, стилизованных с помощью CSS. А если таких элементов на странице сотни (и они превращаются в тысячи), то это начинает влиять на скорость применения стилей к странице.

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

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Картинка растровая - вы хотите ее экспортировать в виде векторной. А программа вам говорит, что даже в векторном виде она все равно будет "квадратиться" при увеличении. Автоматические конвертеры не умеют угадывать, какие именно кривые на маленькой картинке подразумеваются, и в лучшем случае переносят каждый пиксель как прямоугольник. На больших постеризованных картинках еще можно что-то нашаманить, но на маленьких - увы, нет. Так что в вашем конкретном случае сам факт конвертирования маленькой иконки в SVG не имеет смысла. Качества там не будет. Используйте растровую иконку как есть, или просите дизайнера нарисовать сразу в векторе, если нужна именно векторная.
    Ответ написан
    1 комментарий
  • Как реализуется верстка этажей SVG?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Буквально на днях написал статью о том, как все это делается: Делаем интерактивный план местности за 15 минут. Там все основные вопросы и проблемы разобраны. Конкретно в вашем случае скорее всего (без кода не угадать) нужно перебивать ранее заданные стили, либо добавить заливку контурам, где ее нет - умные браузеры не всегда распознают наведение мыши на не залитые элементы в SVG.
    Ответ написан
    1 комментарий
  • Проблемы с анимацией в Safari?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend 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-элементы.
    Ответ написан
    1 комментарий
  • Оцените пожалуйста вёрстку(2)?

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
  • Как работать с такими сетками?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Обычно в таких дизайнах просто много абсолютного позиционирования. Классическая N-колоночная сетка может использоваться в отдельных блоках, а может и не использоваться - по вкусу верстальщика. Сами дизайнеры часто используют не деление на колонки, а "художественную" сетку с диагоналями (пример можно загуглить по запросу golden canon grid). Специального названия у всего этого вроде как нет, лично мне кажется уместным называть это "журнальной" версткой (так многие модные оффлайновые журналы рисуют).

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как вариант:
    ul.sub-menu::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 35px;
        top: -35px;
        left: 0;
    }
    Ответ написан
    Комментировать
  • Как сделать анимацию логотипа?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

    На CSS только плоская карта получится. Надпись можно было бы соорудить с помощью большого количества элементов и 3d-трансформаций, но результат будет очень грубым. Так что WebGL в таких задачах - наше все.

    Запустить крутиться планету

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

    запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

    Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

    P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.
    Ответ написан
    1 комментарий
  • Чем заменить position: sticky?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    в большинстве других браузеров просто не работает

    Как вариант всегда есть полифилы, например вот этот.

    какие есть альтернативные методы

    Поговорить с дизайнером и поменять поведение элементов на странице.
    Ответ написан