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

GAS-ART

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

  • Как убрать отступы внутри input?

    Gavr_Gavr
    @Gavr_Gavr
    Скорее всего они заданы или свойством height или padding для инпута. Также может влиять высота строки line-height... Нужен css код что бы сказать точно
    Ответ написан
    1 комментарий
    1 комментарий

  • Как устранить мерцание последнего кадра свойства animate на iphone?

    Gavr_Gavr
    @Gavr_Gavr Автор вопроса
    Убрал свойства "infinite" для анимации.
    Сделал 2 класса и две анимации для этих классов. Через setInterval просто меняю классы и по очереди запускаю анимации для них.
    Решение конечно не совсем элегантное, но работает

    <!DOCTYPE html>
<body>
   <div class="circle">
      ТЕСТОВАЯ КНОПКА
   </div>
</body>
</html>


    body {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.circle.animate::after {
   content: "";
   width: 30px;
   height: 30px;
   border-radius: 100%;
   border: 6px solid #00ffcb;
   position: absolute;
   z-index: -1;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: ring 1.5s;
}

.circle.active::after {
   content: "";
   width: 30px;
   height: 30px;
   border-radius: 100%;
   border: 6px solid #00ffcb;
   position: absolute;
   z-index: -1;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: ringActive 1.5s;
}
.call-oder-button:hover::after,
.call-oder-button:focus::after {
   animation: none;
}

@keyframes ring {
   0% {
      width: 30px;
      height: 30px;
      opacity: 1;
   }
   100% {
      width: 300px;
      height: 300px;
      opacity: 0;
   }
}
@keyframes ringActive {
   0% {
      width: 30px;
      height: 30px;
      opacity: 1;
   }
   100% {
      width: 300px;
      height: 300px;
      opacity: 0;
   }
}


    window.onload = function () {
   let circle = document.querySelector('.circle');

   circle.classList.add('animate');

   setInterval(() => {
      if (circle.classList.contains('animate')) {
         circle.classList.remove('animate');
         circle.classList.add('active');
      } else {
         circle.classList.remove('active');
         circle.classList.add('animate');
      }
   }, 1500);
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему блок nav не уменьшается?

    Gavr_Gavr
    @Gavr_Gavr
    .nav {
    width: 100%;
    position: fixed;
    ....
    }

    Это раскидывает его на всю ширину. Причин для его уменьшения нет никаких.
    Ответ написан
    Комментировать
    Комментировать

  • Как в опроснике сделать подсвечивание правильный и неправильных ответов?

    Gavr_Gavr
    @Gavr_Gavr
    Не совсем понятно зачем Вам форма? Я так понял судя из задачи нужно определять ошибку динамически. Если так то просто проверяйте на соответсвия value и check и назначайте нужный класс который подкрасит ответы.
    Что то типа такого:

    let listCheckbox = document.querySelectorAll('.i-6')
for(i=0; i<listCheckbox.length; i++){
      if((listCheckbox[i].checked == true && listCheckbox[i].value == 1) || (listCheckbox[i].checked == false && listCheckbox[i].value == 0)) {
         listCheckbox[i].classList.add("right")
      }
      else(
         listCheckbox[i].classList.add('false')
      )
}
    Ответ написан
    6 комментариев
    6 комментариев

  • Почему position: absolute + height 100% в медиазапросе не растягивает заливку background-color на всю ширину экрана?

    Gavr_Gavr
    @Gavr_Gavr Автор вопроса
    Разобрался:
    Для width/height обычно процент высчитывается от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). А так как высота задана 100% то при fixed он тянет ее на весь экран.
    Ответ написан
    Комментировать
    Комментировать