• Как поменять положение элементов при применении скрипта JS?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Поскольку у вас изначально установлено display: none, то toggle просто убирает свойство display и оно становится дефолтным для a, то есть inline.
    Варианты:
    - поместить все иконки в общий div и переключать его;
    - переключать класс, на основе которого в CSS менять свойство display.

    Из ошибок с ходу:
    - тэг i не стоит использовать для иконок, семантически он предназначен для выделения фрагмента текста, например технического термина или идиоматическтого выражения;
    - 'display' в первом параметре toggle не имеет смысла, там может быть длительность переключения, объект с параметрами или логическое значение, но не произвольная строка.
    Ответ написан
    4 комментария
  • Как бы вы сверстали такие блоки?

    Get-Web
    @Get-Web
    Front-End Developer
    Первое как вариант:

    Уголки можно заменить svg или png картинками, чтобы стало более гладко

    А на второе времени нет
    Ответ написан
    6 комментариев
  • Какой есть онлайн-сервис, делающий css код кроссбраузерным?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    С натяжкой, можно сказать, что он старается сделать css код более кроссбраузерным + в онлайн варианте: Autoprefixer CSS
    Ответ написан
    Комментировать
  • Названия в классов: я могу раздавать их рандомно или есть некая традиция, игнорирование которой считается плохим тоном?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    В программировании есть традиция давать сущностям понятные имена.

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

    Дополнительно, существуют и схемы наименования, самая популярная - БЭМ.

    С точки зрения же механики, браузеру совершенно всё равно, что написано у вас в классах (за исключением небольших технических ограничений, описанных в спецификации).
    Ответ написан
    Комментировать
  • Как изменить расположение placeholder?

    Goodilla
    @Goodilla
    Разработчик/архитектор веб приложений
    Судя по всему, у Вас там поле TEXT, не TEXTAREA?
    Ответ написан
    1 комментарий
  • Где искать верстальщиков и бекендеров?

    На этот вопрос нет чёткого ответа.
    1. Связи - вот главный рецепт успеха в IT. Это лучший способ найти исполнителя.
    2. Если связей нет, то гарантированный, но дорогой и неприятный способ - это заключение контракта с какой-то галерой. Тут главное прописать все обязательства и ответственность сторон. Требовать исполнения, но и самому исполнять.
    3. Остальные способы как раз и сопряжены с теми рисками, что вы описали. Вы лишь должны принять эти риски, заложить их в сроки проекта, и не ждать чуда из места, где его не может быть. Что могу посоветовать - если нашли толкового исполнителя, то берегите его, заплатите вовремя и столько, сколько договаривались, не требуйте крупных бесплатных доработок. Такой исполнитель - большая редкость, и это добавка в список ваших связей, и в следующий раз вы начнёте уже с п.1...
    Ответ написан
    Комментировать
  • Как распределить элементы на адаптивной, векторной кривой?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Хорошего нативного и кроссбраузерного решения у нас пока нет. Но у path в SVG есть методы getTotalLength и getPointAtLength, а из них можно сообразить себе утилиту для расположения кружков вдоль кривой в удобных единицах измерения. Это не так здорово, как на CSS, но тем не менее:

    function putCircleOnPath(path, circle, percent) {
        const length = path.getTotalLength();
        const point = path.getPointAtLength(length * percent / 100);
    
        circle.setAttribute('cx', point.x);
        circle.setAttribute('cy', point.y);
    }


    Получится что-то такое:

    Ответ написан
    2 комментария
  • Как изменить цвет svg заливки?

    LenovoId
    @LenovoId Куратор тега SVG
    I want, women not to get sick
    конечно порнуха, но я завтра буду дома и сделаю по нормальному

    в общем, градиент не возможно сделать с анимацией, но я попробую сделать это но будет с избыточным кодом, такую шляпу лучше вставлять в html скриптом

    Ответ написан
    Комментировать
  • Суммa элeментoв пoд чeтными индeксaми?

    Alexandroppolus
    @Alexandroppolus
    кодир
    проверка на четность в этой задаче явно лишняя

    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    let sum = 0;
    
    for (let i = 0; i < arr.length; i += 2) {
        sum += arr[i];
    }
    
    console.log(sum);
    Ответ написан
    4 комментария
  • Как сделать SVG чётче?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Нарисовать надо по пиксельной сетке, иллюстрирую:

    65663114addb4709037114.jpeg
    Если дизайнер изначально об этом не думал, когда рисовал (точки поставлены наобум, либо используется не целочисленная величина обводки) - вы с этим ничего не сделаете.

    На экранах повышенной плотности, к слову, эффект менее заметен (что не особо радует всех остальных).
    Ответ написан
    Комментировать
  • Как правильно переписать css в scss с нестингом?

    @its2easyy
    .project-details__container.project-details__container__loaded {}
    .project-details__cover.project-details__cover_loaded {}

    =>
    .project-details{
      $this: &;
      &__container{
         &#{$this}__container__loaded{
    
        }
      &__cover{
           &#{$this}__cover_loaded{
    
           }
        }
      }

    Но вообще тут что то не то со специфичностью, по нормальному это должно было бы быть как-то так
    .project-details {
      &__container{
         &__loaded{
        }
      }
    }
    Ответ написан
    Комментировать
  • Будет ли это считаться костылем из-за неопытности?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Сделайте такую сетку

    654a7bd091686677695562.png

    Картинки разместите с объединением ячеек grid-row: span 2; или указанием конкретных грид-линий.
    Ответ написан
    Комментировать
  • Почему img для :before не работает как надо?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Это изображение контентное, а не оформительское. На реальном сайте, его очевидно будут загружать через админку. Его следует ставить через тег img

    <div class="person">
      <img class="person__photo" src="">
      <div class="person__wrapper">
        <div class="person__name">Имя фамилия</div>
        <div class="person__position">Должность</div>
      </div>
    </div>

    .person {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .person__photo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .person__wrapper {
      display: grid;
      gap: 0.25rem;
    }
    .person__name {}
    .person__position {}
    Ответ написан
    Комментировать
  • Имеет ли смысл использование SCSS при именовании классов по BEM?

    Get-Web
    @Get-Web Куратор тега HTML
    Front-End Developer
    Лично мне использование амперсанда принесло больше вреда чем пользы, поэтому я придерживаюсь второго варианта:

    .banner {
      свойства
    }
    
    .banner__text {
      свойства
    }
    
    .banner__img  {
      свойства
    }

    Даже если каждый блок разбит на отдельные файлы поиск в самом файле намного проще, при этом можно использовать глобальный поиск по проекту и сразу переходить к нужному классу.

    Но SCSS это не только амперсанд, поэтому одно другому не мешает, хотя я использую только postCSS
    Ответ написан
    2 комментария
  • Как обратится к первой таблице в разметке?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    .mytable:not(#table_1):not(#table_2) {
      /* Таблица с классом .mytable, но не имеющая идентификаторов #table_1 и #table_2 */
    }
    
    .mytable:not([id]) {
      /* Таблица с классом .mytable, но не имеющая никаких идентификаторов */
    }


    Но гораздо лучшим вариантом будет дать отдельный класс нужной таблице

    .table-striped {
    
    }
    Ответ написан
    Комментировать
  • Как убрать невидимую полосу в правой стороне (такое только с телефона)?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Вы же сами на своем скрине показали, какие элементы у вас не влезают во вьюпорт. Сделайте так, чтобы влезали, и "невидимой полосы" не будет.
    Ответ написан
    Комментировать
  • Для чего нужен nodejs?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    для начала нужно понять что делает nodejs, а еще точнее где можно выполнить код на javascript.

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

    И nodejs - это собственно решение, которое превратило десятки тысяч фронтендеров в full-stack разработчиков.
    Ответ написан
    Комментировать
  • Как забрать файлы из другой ветки?

    sergey-kuznetsov
    @sergey-kuznetsov Куратор тега Git
    Автоматизатор
    Если нужно вытащить отдельные файлы из другой ветки, используйте checkout
    git checkout ветка -- путь/к/файлу
    Это извлечет файл в рабочий каталог. Останется только его закоммитить в текущей ветке.
    Ответ написан
    Комментировать
  • Разные экраны, разные разрешения фоновых картинок. Как?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    body {
      background: black no-repeat / cover;
      background-image: var(--bg-image-mobile);
    }
    @media (min-width: 768px) {
      body {
        background-image: var(--bg-image-tablet);
      }
    }
    @media (min-width: 1200px) {
      body {
        background-image: var(--bg-image-desktop);
      }
    }


    <body style="
      --bg-image-mobile: url(/images/bg-image-mobile.jpg);
      --bg-image-tablet: url(/images/bg-image-tablet.jpg);
      --bg-image-desktop: url(/images/bg-image-desktop.jpg);
    ">
    
    </body>
    Ответ написан
    Комментировать