Задать вопрос
ZerdoX-x

Mark Lansky

Frontend developer influenced by web, a11y, crypto
Ответы пользователя по тегу CSS

  • Есть ли альтернативный способ для такой анимации?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Само свойство visibility анимировать невозможно, также как и display и прочие "дискретные" свойства.
    Но чтобы реализовать плавную анимацию например исчезновения (и чтобы в конце анимации было выставлено visibility: hidden;) можно использовать например анимации @keyframes
    @keyframes hide {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity:0;
        visibility: hidden;
    }
}


    Это самое быстрое решение, которое я придумал. Но правильнее скорее всего будет через js слушать окончание анимации и вешать класс, который будет применять нужные стили
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать кол-во колонок в зависимости от кол-ва элементов в контейнере?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Родителю можно поставить флоу по вертикальной оси и добавить перенос элементов при переполнении. Чтобы переполнение возникало, нужно ограничить высоту родителя.

    display: flex;
flex-direction: column;
max-height: 100px;
flex-wrap: wrap;
    Ответ написан
    4 комментария
    4 комментария

  • Как правильно добавить прокрутку?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Задача явно должна решаться через css. JS здесь не уместен

    Можно попробовать решить проблему таким образом
    .buy__wrap {
  position: relative;
}

.buy__item--text {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
}


    Тогда правый блок всегда будет по высоте родителя, ни больше ни меньше. Если захочет быть больше, появится скролл. Дальше уже можно плясать с медиа выражениями как душа того пожелает.
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать такую линию в header-e?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Способов много, но предлагаю на выбор вот эти четыре:
    • Можно добавить дочерним элементам рамку (css свойство border). Например по 0.5px слева и справа. Либо по 1px только справа, первому элементу можно задать обе рамки
    • Можно между элементами сделать отступ в 1px при помощи отступа (margin-right: 1px). Для этого способа нужно чтобы у родителя элементов был серый цвет (цвет линии)
    • Если это flex раскладка (сомневаюсь), можно сделать гэп (css свойство gap для флекс контейнера)
    • Предыдущие три способа требуют, чтобы дочерные элементы контейнера были 100% высоты и n px в ширину. Если не хочешь с этим морочиться, можешь создать псевдоэлемент after для ребёнка (ссылки), добавить ему абсолютное позиционирование (а контейнеру относительное), выставить ширину в один пиксель, высоту в 100%, залить фоном, правильно спозиционировать и тд. Тогда это уже будет действительно самая настоящая независимая линия, а не рамка)


    Предпочтительнее всего третий вариант. Четвёртый вариант может устроить если не хочется перевёрстывать уже существующие элементы (например если они не на всю высоту или слишком узкие)
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать прозрачный шрифт так?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    В нынешних реалиях я бы попробовал данное свойство: -webkit-text-fill-color
    Ответ написан
    Комментировать
    Комментировать

  • Как расположить элемент по центру в CSS?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Если вы учитесь, то советую изучить данную статью: https://css-tricks.com/centering-css-complete-guide/

    Спрашивая на подобных сервисах и копируя код, продвигаться будете медленно :)
    Ответ написан
    Комментировать
    Комментировать

  • Пропадает фоновое размытие при наведении на карточку tilt.js, что делать?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Ни разу не пользовался тильдой, но на предоставленном примере для размытия используется "backdrop-filter: blur()". Этот css не поддерживается в некоторых браузерах.. штука баганая, если не изменяет память сам репортил багу в хромиум. В общем лучше не надеяться на это свойство, оно очень ненадёжное, фильтр очень часто ломается, проблема не в вашей анимации.

    mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/b...
    caniuse: https://caniuse.com/css-backdrop-filter

    UPD: вижу только два варианта решения проблемы:
    1. Убрать анимацию поворота карточки при наведении на неё, оставить блюр.
    2. Убрать блюр, оставить анимацию поворота.
    Вряд-ли получится добиться желаемого результата с таким набором (а если и получится, будет работать мало где)
    Ответ написан
    5 комментариев
    5 комментариев

  • Как разместить блок по центру страницы по горизонтали?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    В вашем случае элемент имеет "position: absolute". Чтобы отцентрировать такой элемент по горизонтали, можно использовать left/right и transform:
    left: 50%;
transform: translateX(-50%);

    Затем отступ снизу уже можно добавить например при помощи свойства "bottom". В демке на jsfiddle данный отступ уже присутствует.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как перебить цвет input'а при автозаполнении в Chrome?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Никак. Если и избавляться от этого, то только при помощи autocomplete="off"
    Ответ написан
    1 комментарий
    1 комментарий