Задать вопрос
sfi0zy

Ivan Bogachev

Creative frontend developer
Ответы пользователя по тегу Вёрстка

  • Как реализовать такой дизайн сайта в один экран и анимационными переходами между экранами?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Для переходов между страницами можно использовать Barba.js. А как именно делать сами анимации - смотрите сами, что вам проще будет делать. По идее в WebGL здесь нет необходимости - все можно сделать на CSS-трансформациях.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать, что бы header прогружался без дерганий?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Скорее всего вам нужно выделить css для первого экрана и вставить его сразу в начале страницы в тег style. Это можно автоматизировать, есть разные инструменты, например вот этот. В любом случае стоит гуглить по запросу critical css.
    Ответ написан
    Комментировать
    Комментировать

  • Примеры хорошей верстки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    примеры верстки для разбора кода, структуры?

    Если под "версткой" понимать именно ее с классическим бэкэндом, а не создание SPA, то я обычно начинающим советую посмотреть свой велосипед. Как пример организации универсальной коллекции компонентов в обычной верстке он оказался весьма неплох - почти нет лапши, все, что есть, собирается в одном месте и сразу видно сколько и чего на странице есть:
    5c5eeecb5755e188340828.png
    Основная мысль - если сделать для компании подобную штуковину в виде отдельного пакета (это не так долго, если целенаправленно ее делать), то потом можно быстро клепать страницы с фирменным стилем используя его как зависимость (как на бутстрапе, но на своем) и легко потом эту верстку поддерживать - все одинаковое и хорошо структурированное.
    Ответ написан

  • Есть идеи как это реализовано?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сама линия делается по вот такому принципу с помощью SVG:

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

  • Где смотреть современные интересные сайты?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Awwwards
    CSSDesignAwards
    FWA
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно верстать страницу?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как будет быстрее и правильнее? Как вы верстаете?

    Если проект предполагает продолжительное существование, то имеет смысл делить все на компоненты и верстать каждый по отдельности, класть их в отдельные файлы. Для каждого компонента это стили, скрипты и пример разметки. Разумеется, все общие данные вроде цветов или размеров отступов имеет смысл сразу выносить в отдельный конфиг. Полезно сразу использовать везде одну и ту же методологию по именованию всего. Какая будет - не важно, главное, чтобы везде одинаковая. Организовать можно по-разному, но суть в том, чтобы работать не со "страницами", а с "набором компонентов".

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

  • Как сверстать такой блок?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Как можно такое сверстать, учитывая адаптив? В какую сторону смотреть? Canvas?

    Такие штуки удобно делать с помощью двух слоев - снизу сам график в виде SVG, сверху тексты в виде обычных div-элементов. Посмотрите последний пример из вот этой статьи, он по смыслу очень похож на вашу картинку.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать такую анимацию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Скорость скролла используется как угловое ускорение для этих объектов. Знак зависит от направления скролла. При этом есть сила трения, которая постоянно уменьшает модуль скорости, тем самым тормозит и останавливает эти штуковины в конечном счете. Формулы из курса кинематики за 9 класс помогают сделать движения более натуральными, плавными и приятными глазу.
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать изображения с выносными названиями её элементов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно картинкой вставить. Просто. Быстро. Размер шрифта начинает отличаться от остальной страницы при адаптивном уменьшении картинки. Печаль для дизайнера-перфекциониста. А еще буквы могут начать мылиться. Это вообще печаль. Если нужно добавить/убрать стрелки - придется перерисовывать картинку. Это неприемлемо, если к ним привязана какая-то еще логика и они показываются не всегда.

    Можно использовать связку SVG+CSS:
    - Берется SVG с viewbox='0 0 100 100'.
    - Основная картинка вставляется в виде image.
    - Стрелки рисуем в векторе (это просто дуги из одной точки в другую с маркером на конце).
    - Если нужно сделать их двухцветными, как в вашем примере - делаем маску по картинке и применяем ее к стрелкам.
    - Надписи верстаем отдельно (div`ами) и абсолютно позиционируем сверху. Координаты будут соответствовать им же в svg (от 0 до 100). Это нужно для того, чтобы сохранять размер шрифта при адаптивном уменьшении всего этого.

    Дальше при необходимости мы можем легко из css или js показывать или скрывать надписи и стрелки.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как сделать незамкнутый контур в CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Практически все подобные вопросы про бордеры можно решать с помощью линейных градиентов (пример). Это получается как бы не бордер, а просто нарисованные на фоне линии.
    Ответ написан
    4 комментария
    4 комментария

  • Svg + тень, адаптив?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как такую тень сделать?

    Использовать фильтр с feOffset и feGaussianBlur. Просто сдвинуть и размыть. Получится тень. Начать можно вот отсюда.

    Есть конечно и feDropShadow, но по сути это является укороченным синтаксисом для первого варианта и не работает в IE.
    Ответ написан
    1 комментарий
    1 комментарий

  • Сделать такую карту SVG?

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

    Слой номер два: Плашки с текстом. Их удобно не в картинку пихать, а верстать на html/css и располагать поверх картинки с помощью абсолютного позиционирования или трансформаций. Если сообразить для картинки viewbox='0 0 100 100', то даже считать ничего не нужно будет.

    Дальше на css на :hover/:focus по областям показываете плашки с текстом. Можно это на :nth-child построить или еще как-нибудь - смотрите, что будет удобнее. Ну и самим областям меняете fill на оранжевый.

    P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...
    Ответ написан
    3 комментария
    3 комментария

  • Префиксы для кроссбраузерности, насколько сегодня актуально?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    на сколько сегодня актуально? Все браузеры поддерживают самые распространенные св-ва flex...

    Не забывайте про телефоны, там все не так хорошо, как на десктопах. Какие-нибудь ios 6 или android 4.3 все еще существуют. Не посылать же их в известном направлении просто потому, что нам лень поставить пару префиксов?

    По поводу предыдущих ответов
    Использование автоматизации для добавления префиксов - не требуется

    emmet все дописывает

    Первое выражение как минимум странно. Оно имеет право на существование в некоторых случаях, но в целом - зачем что-то помнить и делать руками? Скажите автопрефиксеру какие браузеры вам нужно поддерживать, и он сам все сделает. Где надо добавит префиксы, где не надо - не добавит. И даже уберет лишние, там, где они уже не нужны. Штука с emmet тоже не всегда будет хороша. Главная ее проблема - захламление кода, который видит разработчик.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать кастомные тултипы в определённых областях изображения?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Или можно всё сделать проще?

    Так у них [на сайте, на который вы ссылку дали] и так все просто:
    1. Есть SVG, в которую через image воткнули картинки. Это обычные png с прозрачным фоном. Каждый человек - отдельная картинка. Можно еще сделать маску вокруг каждого человека, чтобы буквально вырезать его по контуру и определять наведение не по прямоугольнику (как у них), а по силуэту
    2. Зная положение каждого человека, можно нарисовать текст над ним. Это можно как внутри SVG сделать (но тогда адаптировать сложно будет), так и с помощью обычных div`ов и абсолютного позиционирования из CSS. Если сделать viewbox='0 0 100 100' у SVG, то считать будет проще.
    3. При наведении на человека (думаю про addEventListener вы знаете):
      • Берем большой прямоугольник в SVG, заливаем его черным полупрозрачным, таким образом делается затемнение. Показываем его.
      • Человека можно заменить другим человеком (как сделано на том сайте), или применить к нему какой-нибудь фильтр, чтобы цвета изменить. В любом нормальном графическом редакторе вы найдете кучу фильтров.
      • Показываем текст

        Когда я говорю "показываем" я имею в виду, что есть миллион способов сделать это, от банального отключения display:none или изменения прозрачности и до хитрых анимаций с SVG-масками или еще чем-нибудь.

    Ответ написан
    Комментировать
    Комментировать

  • Ваша структура проекта под верстку?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Что есть для вас компонент а что нет?

    Любая логически независимая сущность - компонент.

    Ваша структура проекта под верстку?

    Обычно получается структура в таком духе:
    спойлер
    src/less
├── animations.less (универсальные анимации вроде fade-in)
├── colors.less (цветовая схема: константы + вспомогательные классы)
├── components (тут все компоненты, их много-много)
│   ├── accordion.less
│   ├── badge.less
│   ├── blockquote.less
│   ├── breadcrumb.less
│   ├── button-dropdown.less
│   ├── button-group.less
│   ├── button.less
│   ├── card.less
│   ├── carousel.less (у сложных компонентов могут быть внутренние
                       компоненты, которые нигде больше не используются,
                       соответственно они лежат в одном файле с родительским)
│   ├── checkbox.less
│   ├── grid.less (да, сетка - это тоже компонент)
│   ├── . . . . и.т.д.
├── constants.less (константы, это что-то вроде глобального конфига)
├── fonts.less (все, что связано с типографикой)
├── helpers.less (классы-хелперы с перебиваниями стилей)
├── main.less (сюда все импортируется в нужном порядке)
├── normalize-ext.less (расширение стандартного normalize.css)
└── utils.less (миксины, их обычно довольно мало.
                все хаки и фиксы добавляет PostCSS, так что тут их нет)

    Рядом с этим лежат скрипты (структура для обычного не-spa варианта). Эти файлы создаются по мере надобности - может так статься, что все в одном-двух файлах будет, если делается лендинг какой-нибудь:
    src/js
├── component.js (если компонентов много - они все наследуются
                от базового компонента. единообразие важно.)
├── components
│   ├── . . . . тут сами компоненты, называются аналогично своим *.less файлам
├── components.js (индекс для компонентов)
├── controls
│   ├── . . . . тут могут быть (а могут не быть) утилиты-обертки
                для клавиатуры/тачпада; это иногда позволяет сильно
                разгрузить остальной код.
├── dependencies.js (обертки-адаптеры для зависимостей)
├── events.js (следилка за событиями)
├── factory.js (маленькая фабрика компонентов)
├── main.js
├── polyfills.js (обертки-адаптеры для полифилов)
├── store.js (минимальное хранилище, иногда является оберткой
                для какого-то стороннего решения)
├── utils
│   ├── . . . . (тут могут быть файлы с разными утититами, иногда их вообще нет)
└── utils.js (если файлов с утилитами много, этот файл является индексом для них)
    Ответ написан
    Комментировать
    Комментировать

  • Как делаются подобные сайты?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    И вообще при помощи чего конкретно сделано здесь


    Конкретно здесь многое сделано на three.js (да почти все). Тормоза в основном исходят от этого же инструмента, а точнее от того, что им малость злоупотребляют там, где можно все сделать проще.

    как верстальщику со знанием html, css и немного jquery как сделать такое?


    Параллакс с картинками, текстами и градиентными фонами для секций; смена надписей и плюсик - анимации svg; видео на фоне; немного css-трансформаций для переходов между страницами SPA; соответственно роутер, практика показывает, что в таких ситуациях имеет смысл написать свой, кастомный; шкала справа - еще css-переходы; на страницах проектов и агенства - большие картинки, еще видео, немного svg-анимаций, много абсолютного позиционирования, немного эффекта scrollfire + css-переходы; где-то между делом - подгрузка ресурсов аяксом. Если все это поделить на отдельные задачи, то такой сайт будет вполне реализуем, главное - не усложнять на ровном месте.
    Ответ написан
    Комментировать
    Комментировать

  • Как опустить одно слово ниже строчки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    чтобы слово "in" было ниже "Work" на одну строчку, а "minimalism" ниже "in" также на одну строчку?

    .in {
    vertical-align: -1em;
}

.minimal {
    vertical-align: -2em;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше всего реализовать это меню?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
    2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
    3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
    4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
    5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).
    Ответ написан
    5 комментариев
    5 комментариев

  • Как сверстать элемент в виде буквы с background-image?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Вы там в комментарии написали:
    Единственная проблема, что в IE11 не работает


    А почему бы не воспользоваться масками? Они вроде как для этого и сделаны, а работать будет во всех браузерах с тех времен, как они вообще начали поддерживать SVG.
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли с помощью normalize.css или reset.css добиться полной кросбраузерности или для этого обязательно нужен JavaScript?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Эти инструменты вообще не влияют на кроссбраузерность, они просто избавляют от необходимости помнить в каких браузерах какие стили применяются по умолчанию.
    Ответ написан
    Комментировать
    Комментировать