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

Ivan Bogachev

Creative frontend developer
Ответы пользователя по тегу HTML

  • Какой аналог БЭМ актуален для использования в верстке и CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Насколько знаю, БЭМ юзает только яндекс.

    БЭМ как методологию организации CSS используют все кому не лень, не только яндекс. В наших краях это наверное самый популярный подход. Про него говорят "не знаешь, что выбрать - бери БЭМ".

    Есть альтернативные подходы к классам в CSS, например RSCSS или даже Atomic CSS, но они не имеют такой распространенности. Хотя познакомиться полезно - как и с разными языками, разные методологии расширяют видение происходящего. А уж что выбирать в конкретной ситуации - на этот вопрос вам никто не ответит. У всего есть свои плюсы и минусы.

    P.S.: Видимо стоит привести пару цитат из первых загугленных статей с css-tricks и csswizardry (в соседнем ответе говорится, что он там пропагандируется), чтобы пояснить, почему я говорю в первую очередь про организацию CSS и намекнуть, что "весь мир заблуждается, что БЭМ — это про CSS и классы через чёрточку":
    - BEM is a popular naming convention for classes in HTML and CSS
    - BEM (Block Element Modifier) is a popular CSS class naming convention
    - BEM – meaning block, element, modifier – is a front-end naming methodology
    Народ во всех этих статьях пишет про методологию именования, а не про "БЭМ - это нечто большее".
    Ответ написан
    Комментировать
    Комментировать

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

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

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

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

  • Как сделать glitch эффект в css или JS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сходите на codepen и посмотрите демки с первых 3-4 страниц по запросу "glitch". Там есть самые разные варианты того, как этот эффект можно сделать.
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать такой элемент?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как использовать маску на видео?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Проще всего поверх видео расположить (абсолютным позиционированием) SVG-картинку с прозрачной дыркой в форме этого пятна.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать такой эффект при наведении?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    1. Блок с overflow: hidden, содержимое в 200% его высоты.
    2. При наведении содержимому добавляется transform: translateY(-100%).
    Ответ написан
    Комментировать
    Комментировать

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

    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 комментариев

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Подобные бордеры легко рисуются линейными градиентами на одном элементе (пример).
    Ответ написан
    2 комментария
    2 комментария

  • Как в SVG PATH установить фоновый рисунок?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    1. Нарисуйте веревку как прямоугольник (не линию с толщиной, а именно замкнутый контур)
    2. Сделайте внутри SVG pattern с нужной картинкой (image)
    3. Используйте свойство fill, чтобы залить прямоугольник этим паттерном


    При возникновении трудностей - гуглите упомянутые термины.
    Ответ написан
    1 комментарий
    1 комментарий

  • Boilerplate для не SPA?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Без vue, react и прочих библиотек. Интересует как писать js компоненты типа табы, модалки и т.п. Как реализовать их взаимодействие. Хочется посмотреть на примеры и реализации.

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

    для многостраничных сайтов

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

  • Как сделать незамкнутый контур в 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 комментария

  • Как вывести из txt файла ссылки?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Можно пойти в консольку (bash наше все). Если ссылки так и стоят в начале строк:
    awk '{print $1}' test.txt

    Если они там и как попало тоже стоят, то можно регуляркой их вытащить. Что-нибудь такое получится:
    grep -Eo "(http|https)://[a-zA-Z0-9./?=_-]*" test.txt
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать круглый бордюр не до конца?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    круглый бордюр

    Можно хоть звездочкой его сделать - habr.com/post/349988/.
    Ответ написан
    Комментировать
    Комментировать

  • Есть ли смысл использования Jekyll, а не WordPress?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Для меня важно: 1. чтобы в URL не было окончаний .html или в этом роде; 2. чтобы если я в корне сайта создам папку "portfolio", а в ней папку с названием проекта "project-name" в итоге получилось так "site.ru/portfolio/project-name"

    С этим проблем не будет.

    возникло ощущение, что по сути он не отличается от обычной верстки. Ведь можно также собирать обычную верстку с помощью Gulp, Sass и шаблонизатора Nunjucks.

    Да, но... Раскидывание постов по тегам и категориям, rss и sitemap, постраничная навигация, поиск, еще что-то... лениво все это делать самому. Jekyll выступает в качестве готовой конфигурации, которую можно взять и использовать для таких задач, не запариваяь о том, что там есть и как оно работает. В этом его предназначение. Понятно, что jekyll не заменит gulp или webpack в задачах вроде сборки современного фронтенда (ну знаете, это когда 100500 модулей, babel или даже typescript, препроцессоры, постпроцессоры и.т.д.), но вопросы именно файловой структуры сайта и всего, что с ней может быть связано, он решает хорошо и без лишних вопросов.

    могу обойтись без админки... или может остаться на WordPress?

    Если хочется просто статичное портфолио - то зачем там какая-то cms? Она будет только тормозить и ничего не делать. А еще статику можно на github захостить - бесплатно и достаточно надежно.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать эффекты как на сайте примере?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

    1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

    Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

    2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

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

    Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

    Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как быстрее конвертировать из пикселей в rem?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть плагин для PostCSS - postcss-pxtorem.
    Ответ написан
    Комментировать
    Комментировать

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

    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-масками или еще чем-нибудь.

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