Ответы пользователя по тегу Вёрстка
  • Как для современных браузеров выводить анимацию, а для старых картинку?

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

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

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

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

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

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    Буквально на днях написал статью о том, как все это делается: Делаем интерактивный план местности за 15 минут. Там все основные вопросы и проблемы разобраны. Конкретно в вашем случае скорее всего (без кода не угадать) нужно перебивать ранее заданные стили, либо добавить заливку контурам, где ее нет - умные браузеры не всегда распознают наведение мыши на не залитые элементы в SVG.
    Ответ написан
  • Проблемы с анимацией в 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 и доделывайте интерактивные элементы, чтобы ими можно было пользоваться. Не стоит это дело откладывать в черный ящик, работодателям чисто верстка без скриптов нужна очень редко.
    Ответ написан
  • Как сверстать горизонтальный сайт?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    Ответ написан
  • Как работать с такими сетками?

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

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

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    Что нужно знать

    HTML, CSS, JS. А если серьезно, то ваш пример очень напоминает chart.js + air-datepicker.
    Ответ написан
  • Как сделать анимацию логотипа?

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    в большинстве других браузеров просто не работает

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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Смущает класс ".list__link"

    Если вас смущает повторение list в названии класса, то можно воспользоваться сохранением имени в стиле that=this из javascript:

    .list {
        $b: &;
    
        &__item {
            &:first-child {
                #{$b}__link {
                    // . . .
                }
            }
        }
    }

    Но это сложно назвать более читаемым вариантом.

    Если цель - все же сделать код более удобоваримым, то может иметь смысл просто ограничить вложенность при написании стилей (именно визуальную вложенность кода, а не каскад), как это делают в том же rscss:

    .list {
        &__item {
            // . . .
        }
    
        &__link {
            // . . .
        }
    
        &__item:first-child &__link {
            // . . .
        }
    }
    Ответ написан
  • Как сделать такую дугу между блоками?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    Вариантов может быть много. Один из них - большой-большой border-radius:
    Ответ написан
  • Как реализовать анимацию одного элемента по мере прокрутки страницы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Задача разделяется на две:
    1. Анимировать саму линию
    2. Перемещать огонь по ней

    Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


    Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.
    Ответ написан
  • Почему пропадает текст в em?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Что такое 1em? Это текущий размер шрифта. Когда вы задаете размер шрифта в единицах em, браузер считает этот размер относительно родительского размера шрифта. Но у html вы задаете font-size равный 0px. В данном случае это означает, что у всех потомков 1em будет равен нулю до тех пор, пока вы не зададите какое-то другое значение не в em/rem, тогда у потомков того элемента 1em будет равен заданному значению.

    P.S.: Задавать font-size равный нулю для html - это не лучшая идея, она может приводить к самым разным багам, а также проблемам, когда у пользователей в браузере настроены ограничения на размер шрифта для html.
    Ответ написан
  • Можете покритиковать верстку начинающего?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    С первого взгляда видно:

    1. Font-size в 1px для HTML, а потом все в REM? - интересное начало...
    2. CSS-методология? - отсутствует.
    3. Препроцессор для облегчения жизни? - отсутствует.
    4. Все в одном файле? - да, так и есть.
    5. Магические числа в CSS? - много.
    6. Префиксы прямо в коде? - ага.
    7. 21 брейкпоинт для такой простой страницы? - ежик...
    8. Шрифты? - Fira отвалилась. Letter-spacing скачет.
    9. Critical CSS? - отсутствует.
    10. Бесполезные условные комментарии для IE6, гриды и флексы в одном флаконе? - о дааа.
    11. HTML lang='ru' и контент на английском? - почему бы и нет.
    12. Грузить весь FontAwesome ради пары иконок? - классика.
    13. Асинхронная загрузка картинок? - отсутствует.

    Продолжать можно долго. Рекомендации можно дать следующие:

    1. Освойтесь с инструментами верстальщика. Откройте для себя препроцессоры и автопрефиксер. Почитайте про БЭМ. Используйте.
    2. Добейтесь такого, чтобы вы понимали абсолютно все в своей верстке. Что? Зачем? Почему именно так? Избегайте копипасты. Не используйте какие-то "фишки" только потому, что кто-то их где-то поиспользовал - вполне вероятно, что там был другой контекст, а в вашей ситуации получится что-то странное. Разбирайтесь со всем.
    3. Изучайте хорошие практики.
    4. Ну и JS, без него никак.
    Ответ написан
  • Как такое сверстать?

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