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

Sigma Male

Middle Frontend developer (плюс минус middle)
Ответы пользователя по тегу CSS

  • Почему radial-gradient скопированый из фигмы выглядит в вёрстке иначе?

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Скорее всего дело в браузере или если поконкретнее, то в отсутствии кроссбраузерности свойства.

    В прошлом я сталкивался с такой же проблемой, но с тенями. В гугл хром тени были такие же как в фигме, но в браузере firefox они работали не так. Проверьте работу сайта в других браузерах.

    Проблему решил через добавление отдельного свойства для firefox в котором было указано меньшее (или большее, не помню) значение.
    Ответ написан
    Комментировать
    Комментировать

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

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Проще всего эту проблему можно решить добавив на сайт JavaScript код ниже через плагин для Wordpress

    let sizeButtons = document.getElementsByClassName("button-variable-item"); 

for (let i = 0; i < sizeButtons.length; i++) {
  sizeButtons[i].removeAttribute("title");
  sizeButtons[i].removeAttribute("data-wvstooltip");
}
    Ответ написан
    Комментировать
    Комментировать

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

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Я бы сохранил весь фон как картинку (серую часть с выемкой + розовую линию) и задал бы как фоновое изображение родителю кнопки.

    Изменено:
    Второй вариант: попросить дизайнера что бы он вырезал кусочек фона как на фото (только белую часть), а дальше использовать её как фон для кнопки. Если вместо белого фона там может быть другой цвет, то лучше сохранить картинку как SVG код и дальше делать через псевдо элемент. Для SVG можно будет изменить цвет через CSS.
    62f021cdc7a53203296520.jpeg
    Ответ написан
    3 комментария
    3 комментария

  • Лучше воспользоваться position/after/before или вырезать все картинки как одну?

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Если у этих картинок не должно быть какой нибудь сложной анимации задействующей их по отдельности то лучше одной картинкой. Главное преимущество в том что проще адаптировать под мобильные устройства, ну и в целом проще и быстрее.
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать такое?

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Возможно вам подойдет единица измерения vh. vh и vw -- это типа как %, но их можно использовать где угодно.

    Пример:
    Можно задать элементу ширину равную 50% от высоты экрана добавив свойство width: 50vh. Точно также можно устанавливать и отступы.

    vh -- это % от высоты экрана
    vw -- это % от ширины экрана

    Изменено: Думаю вам подойдет такой вариант https://www.youtube.com/watch?v=eaOAY0vIB4U&ab_cha...
    Ответ написан
    Комментировать
    Комментировать

  • Шапка для сайта?

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Если html структура позволяет, то можно сделать мобильную шапку из десктопной, но если нет, то конечно нужно делать два отдельных блока и с помощью медиа запросов устанавливать их видимость в зависимости от размера устройства.
    Ответ написан
    Комментировать
    Комментировать

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

    @SigmaMale
    Middle Frontend developer (плюс минус middle)
    Можно использовать box-shadow:

    input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
    Ответ написан
    1 комментарий
    1 комментарий