Ответы пользователя по тегу CSS
  • Как в Swiper-слайдере реализовать переключение слайдов по щелчку на ссылку?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Почитайте внимательно документацию: https://swiperjs.com/swiper-api#hash-navigation
    Также есть пример: https://swiperjs.com/demos#hash-navigation
    В ней вы можете открыть просмотр в CodeSandbox, где сами изучите код из примера
    Ответ написан
    Комментировать
  • Как таким образом расположить стрелки в slick slider?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Наверно надо кнопки в один блок с заголовком поставить, сам слайдер в другой. Не знаю, как в слике, но в swiper нормально так работает.
    Кнопки с заголовком должны быть в контейнере.
    Ответ написан
    Комментировать
  • Откуда расстояние появилось в верстке?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Попробуй стрелкой по правой стороне навести в DevTools. Элемент должен выделиться
    6464ae14bd7c6860763160.jpeg
    Ответ написан
    Комментировать
  • Как подвинуть изображение вправо?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Ответ написан
    Комментировать
  • Как перенести Flex элемент на новую строку?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    flex-wrap: wrap;
    Ответ написан
    Комментировать
  • Можно ли сделать Transition для псевдоелементов?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Лишние транзишн!!
    Надо указать изменяемое свойство (тут background) или all, а при hover вообще убрать сам transition. Ещё метод анимации указать надо (ease и т.д.).
    transition: all .3s ease;
    Ответ написан
  • Каким классом по БЭМ можно назвать этот блок?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    дай им класс со смыслом:
    родитель - block (допустим),
    дочерние - block__link; block__list или block-list, затем внутри него block-list__item
    <div class='block'>
         <a class='block__link'>Ссылка</a>
    </div>
    Ответ написан
    Комментировать
  • Как при наведении на SVG изменить размеры? (удлинить или укоротить линию)?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Обернул линейку в тег с классом anim и уменьшается только линейка
    <svg width="180" height="167" viewBox="0 0 180 167" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g class="anim">
      <path d="M126.203 63.7572C125.248 61.6869 126.152 59.2354 128.221 58.2805C130.291 57.3259 132.743 58.2294 133.699 60.2992C134.653 62.3675 133.749 64.8206 131.679 65.7747C129.609 66.7301 127.157 65.8262 126.203 63.7572ZM134.821 41.2773L29.8982 89.778L43.9743 120.291L148.895 71.7904L134.821 41.2773Z" fill="#3FD6B2" />
      <path d="M107.737 72.5025C107.452 71.8852 106.722 71.6157 106.106 71.8994C105.489 72.1851 105.22 72.915 105.505 73.5314L112.456 88.6021L114.689 87.5724L107.737 72.5025Z" fill="#0F0F0F" />
      <path d="M101.155 82.7588C100.87 82.1424 100.139 81.8741 99.5237 82.1573C98.907 82.4435 98.6369 83.1731 98.9218 83.7895L103.127 92.9054L105.362 91.8751L101.155 82.7588Z" fill="#0F0F0F" />
      <path d="M91.8249 87.0627C91.5399 86.4463 90.8108 86.1765 90.194 86.4611C89.576 86.7462 89.3067 87.4757 89.5917 88.0929L93.7977 97.2088L96.0308 96.1786L91.8249 87.0627Z" fill="#0F0F0F" />
      <path d="M82.4967 91.3649C82.2127 90.7492 81.482 90.4797 80.8656 90.7646C80.2484 91.0496 79.9795 91.7786 80.2644 92.395L84.4689 101.512L86.702 100.482L82.4967 91.3649Z" fill="#0F0F0F" />
      <path d="M70.4208 89.7151C70.1362 89.0983 69.4055 88.8287 68.789 89.1129C68.1723 89.3982 67.9031 90.1285 68.1872 90.7449L75.14 105.815L77.3727 104.785L70.4208 89.7151Z" fill="#0F0F0F" />
      <path d="M63.8396 99.9729C63.5555 99.3564 62.8252 99.0872 62.208 99.3714C61.5924 99.6563 61.3232 100.387 61.6077 101.003L65.8133 110.119L68.0449 109.09L63.8396 99.9729Z" fill="#0F0F0F" />
      <path d="M54.5103 104.276C54.2254 103.66 53.4956 103.391 52.8791 103.675C52.2622 103.959 51.9926 104.69 52.2775 105.306L56.4836 114.423L58.7159 113.393L54.5103 104.276Z" fill="#0F0F0F" />
      <path d="M45.1819 108.58C44.8974 107.964 44.1679 107.695 43.5498 107.979C42.935 108.263 42.6643 108.994 42.9503 109.61L47.1552 118.726L49.3863 117.697L45.1819 108.58Z" fill="#0F0F0F" />
        </g>
      <path d="M147.1 98.2161C147.619 98.4051 147.886 98.9791 147.697 99.498L144.617 107.954C144.428 108.473 143.854 108.741 143.335 108.552C142.816 108.363 142.548 107.789 142.737 107.27L145.476 99.753L137.959 97.0148C137.44 96.8257 137.173 96.2518 137.362 95.7329C137.551 95.2139 138.125 94.9465 138.644 95.1356L147.1 98.2161ZM66.1572 137.493C65.6383 137.304 65.3708 136.73 65.5599 136.211L68.6404 127.755C68.8295 127.236 69.4034 126.968 69.9223 127.157C70.4412 127.346 70.7087 127.92 70.5196 128.439L67.7813 135.956L75.2981 138.694C75.8171 138.883 76.0845 139.457 75.8954 139.976C75.7064 140.495 75.1325 140.763 74.6136 140.574L66.1572 137.493ZM147.18 100.062L66.9218 137.46L66.0771 135.647L146.335 98.2493L147.18 100.062Z" fill="#E8ECEF" />
      <path d="M133.5 34V21" stroke="#0F0F0F" stroke-width="2" stroke-linecap="round" />
      <path d="M138 35L142 27" stroke="#0F0F0F" stroke-width="2" stroke-linecap="round" />
      <path d="M141 38.5L154 30" stroke="#0F0F0F" stroke-width="2" stroke-linecap="round" />
    </svg>
    Ответ написан
  • Почему всё располагается в столбик?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    у тебя не подключены стили, конкретно в твоём случае, судя по написанным классам - bootstrap
    Ответ написан
  • Как выровнять горизонтальное меню?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    1. Можно задать .nav justify-content: space-between и по ширине регулировать список
    2. Если сам список расположен слева/справа, то можно дать для li { margin-right/-left: нужное значение; }
      li:not(:last-child){ // margin будет работать для всех li, кроме последнего, тем самым убирая лишний отступ
      margin-right:20px; 
      }

    Ответ написан
    Комментировать
  • Почему не работают свойства top и left?

    UNN4MED
    @UNN4MED
    Битрикс разработчик
    Напиши к значениям px или любую поддерживаемую единицу измерения, какую пожелаешь
    Ответ написан
    Комментировать