Delat

Пользователь
  • Публикации

    145
  • Зарегистрирован

  • Посещение

Репутация

2 Обычная

О Delat

  • Звание
    Участник

Информация

  • Пол
    мужской

Посетители профиля

1377 просмотров профиля
  1. Как делаются такие эффекты, когда при вводе текста placeholder не исчезает, а уменьшается и перемещается в угол. Вот пример с placeholder (слово "email") сместилось при вводе почтового ящика.
  2. вот это интересно, можете пояснить на примере? У меня объемлющий блок в котором находится кнопка, имеет ширину 375px. Как высчитать пропорции для border-radius в %?
  3. Как сверстать блок с закруглёнными краями и градиентным border? На примере кнопки, я сверстал используя не стандартный подход, а есть ли более правильный семантически корректный подход в решении таких задач? Не нравится что кнопка вышла фиксированного размера. Много CSS-свойств. *, *::before, *::after { box-sizing: border-box; } body { background: #050B1F; } /* Верхний слой */ #button-continue { margin-top: 46px; width: 331px; height: 54px; border: 3px solid transparent; border-radius: 56px; background-color: rgba(11, 27, 55, 1); position:relative; cursor:pointer; } /* нижний слой (Градиент) */ #button-continue::after { content: ""; width:337px; height:60px; position:absolute; z-index:-5; top:-6px; left:-6px; border-radius: 56px; background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 100px); } .button-continue__text { text-transform: uppercase; font-size: 0.875em; color: #99CEFF; font-weight: 400; } .button-continue__text::after { content: url('img/icon-continue.svg'); position: relative; top: 3px; left: 10px; } <button id="button-continue"> <span class="button-continue__text">Continue</span> </button> Должно получиться вот так, но получилось не так как хотелось бы: