Задать вопрос
  • Не могу спрятать псевдоэлемент за родителя, что не так?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно убрать у второй кнопки z-index, он там все равно не нужен:
    .btn1 {
    	// z-index: 1;
    }
    Ответ написан
  • Как реализовать этот кусок шаблона?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Подобные штуки гуглятся по запросу CSS timeline. Есть неплохая подборка примеров на freefrontend.com, в которой можно набраться идей по реализации.
    Ответ написан
    Комментировать
  • Что может Gulp без плагинов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Gulp по своей сути - это таск-раннер. Он не умеет ничего, кроме как запускать таски. Он может запускать их последовательно или параллельно, может передавать поток данных от одной таски в другую, может эти данные записать в файл. На этом его возможности заканчиваются. Больше он ничего не умеет. Та функциональность, которую от предоставляет, позволяет удобно организовать большое количество небольших программ, которые могут быть нужны при сборке или деплое проекта, но сами программы его не касаются. Ему сказали запустить - он запускает, не более того.

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

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    В соседнем ответе есть решение с помощью дополнительного элемента и псевдоэлементов. Альтернативно можно нарисовать такой бордер с помощью градиентов на фоне:
    Ответ написан
    1 комментарий
  • Как сделать такую штуку?

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы забыли подключить jQuery UI. На CodePen библиотеку можно легко подключить введя ее название в поле "search CDNs..." в окошке для подключения скриптов - она есть на cdnjs, так что вы сразу увидите ее в выпадающем списке.
    Ответ написан
    5 комментариев
  • Прорисовка SVG?

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На сайте browserhacks.com вы найдете самые разные варианты проверок (как на CSS, так и на JS) на те или иные браузеры, в частности - Firefox там тоже есть.
    Ответ написан
    Комментировать
  • Как вставить 3д модель с помощью three.js?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    нет 3d модели предмета

    но
    модель крутится

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

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

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

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У вас есть рабочая задача. Вы выбираете инструменты для ее решения. Если инструмент подходит для ее решения, упрощает вам жизнь - вы его используете. Если инструмент не подходит для решения задачи и только все усложняет на ровном месте - вы его не используете. Вне контекста ваших задач вопрос не имеет смысла - возможно бутстрап вам подойдет для их решения, а возможно, что и нет. И вы можете заменить слово "бутстрап" на любое другое название инструмента, логика останется той же. А просто познакомиться с каким-то инструментом для расширения кругозора - лишним не будет. По крайней мере будете знать, для каких задач он подходит и в будущем будете делать более осознанный выбор.
    Ответ написан
    Комментировать
  • GreenSock или anime.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    очень сложный с анимационной части сайт

    Ну "очень сложный" - понятие растяжимое. Если нужен сложный морфинг или физика в 2d - однозначано берите GSAP, у него есть готовые плагины для этого (а значит не нужно думать об интегрировании чего-то со стороны). А так в большинстве повседневных задач вы разницы между этими инструментами не заметите, тут скорее на вкус и цвет: GSAP - это более "энтерпрайзно-замороченный" инструмент с кучей кнопок, а anime.js скорее ближе к unix-way - маленький и решающий одну задачу.
    Ответ написан
    4 комментария
  • Как сделать адаптивный по высоте треугольник на CSS?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Если я сделаю форк какого-то репозитория, а затем в оригинальный репозиторий внесут изменения, то появятся ли они в моем форке?

    Нет.

    Если нет, то как сделать, чтобы они появились?

    Есть официальный туториал.
    Ответ написан
    2 комментария
  • Hover у тега svg?

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    По функционалу:
    • Иногда подвисают кнопки "влево" и "вправо", не реагируют по несколько секунд.
    • При переходе с последнего слайда к первому мелькают они все. Было бы круто, чтобы был просто переход, как между остальными.
    • С клавиатуры нельзя попользоваться, свайпы тоже не поддерживаются.
    • В начале есть что-то вроде document.querySelectorAll в большом количестве. Это намекает на то, что два слайдера на одной странице работать не будут (все смешается в кучу).


    По коду:
    • Код ужасно отформатирован. Читать сложно (читай поддерживать сложно). Ознакомьтесь хотя бы с Airbnb JavaScript Style Guide и поймите, зачем делать код читаемым. Также там мешанина из ES6+ и каких-то древних хаков с that=this, самовызывающимися функциями и.т.д. Вы же уже используете современный язык - так используйте только его. Код будет в разы проще по структуре. Сейчас там черт ногу сломит. И очень очень очень очень очень очень длинные функции тоже мешают ориентироваться в происходящем.
    • Бессмысленные комментарии. Они просто дублируют код.
    • Сторонний код лучше загружать через NPM и подключать из node_modules, а не копироваать себе, и тем более не стоит руками смешивать разные инструменты в один файл. И да, они там вообще используются или просто лежат?
    • В репозитории отсутствуют конфиги и инструкция по сборке. Все это должно быть. Без них непонятно, как вообще это пересобрать.


    Рекомендации:
    • Почитайте про стиль кода, про то, как писать просто и понятно. Лучше этому сразу научиться.
    • Загуглите, как и зачем писать комментарии (и как из них генерировать документацию).
    • Поймите, зачем нужны все стандартные инструменты - сборщики, препроцессоры, линтеры, пакетные менеджеры, системы контроля версий и.т.д. Это понимание поднимет на новый уровень ваши поделки в плане их дальнейшего переиспользования. Да и вам поможет в работе.
    • Тестируйте. Хотя бы вручную.
    Ответ написан
    3 комментария
  • Undefined, в чем причина?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Я же делал проверку на Element, значит у объекта точно должно быть это свойство html

    if (value instanceof Element) {
        value = getHtml(key);
    }

    Ну value может быть и является "instanceof Element", но дальше вы вызываете функцию getHTML, передавая в качестве параметра строку. А никакого свойства html у нее, разумеется, нет.
    Ответ написан
  • Как правильно расположить один предмет относительно другого?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вожу её туда-сюда и не могу выбрать ей правильное место. Перемещу на одно место, вроде, норм. Потом смотрю — нет не норм и так много раз...

    Обычно это означает, что этот элемент там вообще не нужен. У каждого элемента на странице должно быть какое-то предназначение, не нужно их добавлять просто так, чтобы были. Какое предназначение у иконки телефона в данном случае? Тут и так понятно, что +7 495... - это телефон. То есть иконка, поясняющая, что это такое, тут не нужна (если бы там был ник с собачкой, то можно было бы добавить иконку инстаграма или твиттера, чтобы было понятно, к чему он относится, но телефон - штука универсальная). Если кроме логотипа и телефона в шапке ничего нет, то иконка, помогающая найти что-то на странице, тут тоже не нужна (ну то есть яркая жирная надпись и так бросается в глаза). В плане исправления композиции тоже не совсем понятно, нужна ли она там (иногда иконками можно сбалансировать негативное пространство, но тут скорее светящаяся штука его поломает). Так зачем она там?
    Ответ написан
    Комментировать