Ответы пользователя по тегу CSS
  • Не могу выполнить задание на HTML Academy как выполнить?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    какой здесь применен фильтр?

    Третий глаз подсказывает, что здесь поиграли с filter: hue-rotate(150deg); или около того. Но вам бы стоило изучить, что делает каждый из возможных фильтров в CSS и что будет, если их начать комбинировать, чтобы в перспективе такие вопросы не возникали.
    Ответ написан
  • Как анимировать появление логотипа (свг)?

    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. Верстаю неверстаемое.
    У вас неправильный синтаксис keyframes - двоеточия и лишние скобки. Должно быть как-то так:

    @keyframes load {
        0% {
            width: 0%;
            background: #f00;
        }
        50% {
            width: 70%;
            background: #00f;
        }
        100% {
            width: 100%;
            background: #0f0;
        }
    }
    Ответ написан
  • Как сделать так, чтобы тень не налазила на буквы?

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



    Но такие штуки не отличаются хорошей кроссбраузерностью, а светлое будущее наступило еще не везде, так что в общем случае я бы рекомендовал использовать SVG-картинки.
    Ответ написан
  • Что означает ошибка Largest Contentful Paint?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    У Google есть инициатива под названием Web Vitals. Они там решили унифицировать разные метрики для сайтов, выделить что-то основное и человеко-понятное (названия, конечно, не очень интуитивные выбрали). Там сейчас есть три основных метрики:

    • LCP - Largest contentful paint. Грубо говоря это время загрузки первого экрана контента (не начала, а именно полной загрузки первого экрана, с картинками).
    • FID - First input delay. Время полной загрузки страницы, по идее со всеми скриптами, после чего можно полноценно взаимодействовать с ней.
    • CLS - Cumulative layout shift. Общая производительность, насколько быстро перерисовывается страница при изменении layout. Это не 1/FPS, но один из факторов, определяющих отзывчивость страницы, насколько она фризит или не фризит.

    Если кликнуть на синюю ленточку рядом с соответствующим пунктом, то откроется страница с более подробной информацией о том, что это такое и на что там стоит обращать внимание.
    Ответ написан
  • Какие вы используете инструменты для ускорения верстки макетов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI 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. Сильно недооцененная тема, но экономит много времени на отладке.


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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Технически можно использовать практически все unicode символы, за исключением самых первых, управляющих. То есть это не только буквы, но и всевозможные символы вроде ∑∜♫ и.т.д. Они могут отсутствовать в каких-то шрифтах, но на функциональность CSS не повлияют. Как говорил Chris Coyier еще 10 лет назад: "yes-it-works-in-IE6™ & yes-it-validates™".

    Другой вопрос - это практичность использования "альтернативных" селекторов. Тут есть несколько минусов:

    • Есть устоявшиеся английские названия для всех стандартных элементов интерфейса и вспомогательных оберток. Использование других названий (в том числе на другом языке) приведет к потере скорости чтения кода, придется привыкать к новым именованиям.
    • Придется постоянно переключаться между раскладками при написании кода. Минус к удобству.
    • В любимой IDE вашего коллеги может быть шрифт, не поддерживающий ваши альтернативные non-ascii символы. Ему будет плохо.


    Так что да, использовать можно, но как только у вас появятся коллеги, ваш код скорее всего начнут сравнивать с языком YoptaScript и вам придется переучиться на использование английского, чтобы "быть как все" и соответствовать общепринятым стандартам.
    Ответ написан
  • CSS ошибка keyframe?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Вы не указали % у первого фрейма. Безразмерное значение "0" некорректно. Умные браузеры могут добавить символ процента за вас, или могут просто пропустить "дефектный" фрейм, из-за чего будет казаться, что все работает, но полагаться на это не стоит.
    Ответ написан
  • Не могу спрятать псевдоэлемент за родителя, что не так?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Можно убрать у второй кнопки z-index, он там все равно не нужен:
    .btn1 {
    	// z-index: 1;
    }
    Ответ написан
  • Как сделать перечеркнутый текст в любой длинне слова через css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    .text {
        text-decoration: line-through;
    }
    Ответ написан
  • Как сделать волну?

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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    На сайте browserhacks.com вы найдете самые разные варианты проверок (как на CSS, так и на JS) на те или иные браузеры, в частности - Firefox там тоже есть.
    Ответ написан
  • Как вставить 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. Верстаю неверстаемое.
    Ответ написан