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

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



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

    Самое главное здесь - подумать об адаптивности и аккуратно прибрать все лишнее на маленьких экранах.
    Ответ написан
    Комментировать
  • Как сделать такой экран загрузки?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если хранить все в одном css/js то пока js загрузиться будет мелькать html сайта а после уже загрузочный экран будет

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

    красивый загрузочный экран, стоит задача создать такой-же... стили и скрипты...

    Скрипты здесь не нужны, можно все на CSS сделать (ну только потом, в основном скрипте, когда он загрузится, нужно будет убрать этот экран). А еще, как вариант, можно воспользоваться древней магией под кодовым названием SMIL для встроенной в страницу SVG-картинки с логотипом и надписью. Будет по сути то же самое, только сбоку.
    Ответ написан
    Комментировать
  • Как сделать такую анимацию на сайте?

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



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

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    А нельзя ли как-то упростить?


    На вкус и цвет, конечно, но я бы первым делом избавился от всех этих symbol и use. Без них воспринимать код проще, а из условий задачи вроде бы не следует, что они прямо нужны:

    <svg width="200" height="300">
        <mask id="my-mask">
            <g stroke="gray" stroke-width="12" fill="white">
                <circle cx="33%" cy="30%" r="20%" />
                <circle cx="52%" cy="62%" r="32%" />
            </g>
        </mask>
    </svg>
    
    <!-- 1 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/1/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>
    
    <!-- 2 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/2/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>
    
    <!-- ...100500 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/3/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>


    Ну а если вы хотите use, то да, все так, как вы и написали - много id, и следить, чтобы они случайно не продублировались при сборке страницы, а то начнется магия.
    Ответ написан
    7 комментариев
  • Как можно с помощью js сделать анимацию исчезновения и появления блоков с учётом того, что у блоков “tab” display: none;?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Свойство display- не анимируемое. С ним ничего не сделать. Можно плавно менять opacity от 1 до 0 и добавлять pointer-events: none, чтобы элементы уходили из под мыши и с ними нельзя было взаимодействовать. Ну и, раз у вас скрипты используются для этого - в конце анимации, когда уже элементы не видны, можно добавить display: none, если на это свойство что-то еще завязано. При появлении - все в обратную сторону - pointer-events: auto и возвращаем opacity.

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

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это реализуется с помощью свойств stroke-dasharray и stroke-dashoffset в SVG. Слушаем событие скролла - меняем значения. Подробнее в статье про пунктирные вау-эффекты. Вам нужна пятая демка - там как раз вот почти то же самое рисуется при скролле. На сайте Яндекс.Практикума эту линию поделили на небольшие части для удобства/оптимизации, но принцип тот же.
    Ответ написан
    Комментировать
  • Как реализовать вот такой эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    SVG-маски - наше все. Хотя в этом случае вариант с clip-path тоже очень даже рабочий. Еще есть вариант маски на шейдерах, но это совсем особый случай, хотя может внезапно оказаться очень производительным.

    Ответ написан
    Комментировать
  • Как средствами CSS сделать градиент рамки слева и справа блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Но я как-то уже делал такое не прибегая к псевдо. Забыл(((


    Как вариант можно линейными градиентами все нарисовать, с помощью border-image:
    .menu-item {
        border-image: linear-gradient(to bottom, transparent 0%, #fff 50%, transparent 100%) 1;
        border-width: 0 0 0 1px;
        border-style: solid;
    }
    
    .menu-item:last-child {
        border-width: 0 1px 0 1px;
    }


    В общем случае можно градиентами на фоне вообще все, что угодно нарисовать.
    Ответ написан
    1 комментарий
  • Как реализовать подобную анимацию?

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend 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.
    Ответ написан
    3 комментария
  • Как сделать так, чтобы тень не налазила на буквы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно заменить тень на фильтр:



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

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

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

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

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

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

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

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

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

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

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

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


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