Чистый CSS для достижения общих эффектов пользовательского интерфейса

Эта статья разрешает эксклюзивное использование общедоступной учетной записи сообщества разработчиков Nuggets, включая, помимо прочего, редактирование, пометку оригинальности и другие права.

предисловие

Всем привет, это волшебник CSS - alphardex.

Четузай — это самоуничижительный термин, используемый большинством внешних интерфейсов. Я считаю, что когда многие люди обычно пишут страницы, они тратят большую часть своего времени на вырезание и расстановку картинок и так далее. Это не отрицание самой карты вырезания, а вопрос: какая польза от постоянного вырезания карты для вашего собственного роста навыков? Подумайте о пользовательском интерфейсе, который предлагает вам набор красивого интерфейса, но вам нужен только тег img или атрибут background-image, чтобы получить его, но в будущем вам нужно настроить внешний вид (цвет, текст и т. д.), вы Не лучше ли позволить пользовательскому интерфейсу изменить предыдущий материал и заменить его? Таким образом, он полностью контролируется пользовательским интерфейсом и не может проявлять собственную инициативу.

Итак, как выйти из этого тупика? Это очень просто, если вы достаточно хорошо играете в CSS, вам не нужно делать скучную работу по вырезанию картинок, эти интерфейсы и элементы создаются своими руками, хотя для их создания могут потребоваться некоторые усилия, это не просто Награды огромны, так как у вас есть не только свобода контролировать создаваемые вами элементы, но и значительно улучшать свои навыки CSS.

перед этим

Прежде чем использовать чистый CSS для достижения этих эффектов, автор представит несколько часто используемых миксинов SCSS и мощное оружие, использование которых для создания будет более эффективным с меньшими усилиями.

крышка - крышка

@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {
  position: absolute;
  top: $top;
  left: $left;
  width: $width;
  height: $height;
}

Вы будете использовать его, когда захотите «скопировать» элемент поверх оригинала и наложить его поверх него.

демонстрационный адрес:Blob Button

вставка - вставка

@mixin inset($inset: 0) {
  position: absolute;
  top: $inset;
  left: $inset;
  right: $inset;
  bottom: $inset;
}

Точно так же это означает копирование элемента на основе исходного элемента, но положение этого элемента такое же, как у исходного элемента, а размер будет увеличиваться или уменьшаться в зависимости от исходного элемента.

Например, если вы хотите создать несколько концентрических кругов с разными радиусами, этот миксин будет полезен.

aqua.css

aqua.cssЭто элегантный и легкий CSS-фреймворк с открытым исходным кодом. Есть много часто используемых компонентов и часто используемых классов стилей, будет очень здорово использовать их для написания опыта CSS.

На codepen автор подготовилШаблон Aqua.css, вы можете использовать его для создания CSS

Общие эффекты пользовательского интерфейса

полосатый эффект

Прежде всего, мы должны понять слово «граница», как создать специальную границу? Если общие свойства CSS не могут быть достигнуты, вы можете использовать для этого псевдоэлементы. имитация эффекта границы.

Так как же создать полосатый фон? Здесь мы будем использоватьrepeating-linear-gradientчтобы это произошло

<div class="card w-80">
  <div class="border-stripe rounded-xl">
    Lorem ipsum...
  </div>
</div>

.border-stripe {
  --stripe-width: 0.5rem;
  --stripe-deg: -45deg;
  --stripe-color-1: var(--grey-color-1);
  --stripe-offset-1: 2px;
  --stripe-color-2: var(--skin-color-2);
  --stripe-offset-2: 1rem;
  --stripe-radius: 15px;
  --stripe-inset: calc(var(--stripe-width) * -1);

  &::before {
    @include inset(var(--stripe-inset));
    content: "";
    z-index: -1;
    background: repeating-linear-gradient(
      var(--stripe-deg),
      var(--stripe-color-1) 0 var(--stripe-offset-1),
      var(--stripe-color-2) 0 var(--stripe-offset-2)
    );
    border-radius: var(--stripe-radius);
  }
}

Чтобы обеспечить возможность повторного использования, он абстрагируется здесь какborder-stripeКлассы, значения которых могут быть динамически изменены с помощью переменных CSS.

демонстрационный адрес:Stripe Border

глянцевый эффект

Когда вы видите блеск, я думаю, вы можете подумать о ключевой роли - радиальном градиенте, с помощью которого мы можем создавать радиальные узоры, и блеск также бывает радиальным, а затем в соответствии с характеристиками фона, который может быть наложен, эффект блеска может быть легко достигнут

<div class="flex flex-col space-y-4">
  <span class="btn btn-primary btn-round inline-flex">
    <span class="font-bold text-grad">Shine Button 1</span>
  </span>
  <span class="btn btn-info btn-round btn-depth inline-flex">
    <span class="font-bold">Shine Button 2</span>
  </span>
</div>

:root {
  --blue-color-1: #08123d;
  --gold-color-1: #dcb687;
  --brown-color-1: #50301f;
  --brown-color-2: #936237;
  --gold-grad-1: radial-gradient(
      circle at 50% 5%,
      #{transparentize(white, 0.5)},
      #eba262
    ),
    #eba262;
  --gold-grad-2: linear-gradient(88deg, #e7924e 0%, #f8ffee 50%, #e7924e 100%);
  --blue-grad-1: radial-gradient(
      circle at 50% 5%,
      #{transparentize(white, 0.8)},
      #091344
    ),
    #091344;
  --primary-color: var(--blue-grad-1);
  --info-color: var(--gold-grad-1);
}

.btn {
  &-primary {
    border: 4px solid var(--gold-color-1);

    span {
      background-image: var(--gold-grad-2);
    }
  }

  &-info {
    color: var(--brown-color-1);
    border: none;
  }

  &-depth {
    box-shadow: 0 -5px 0 var(--brown-color-2);
  }
}

демонстрационный адрес:Shine Button

неправильная форма

Во-первых, давайте посмотрим, из каких основных фигур состоит форма ленты на картинке выше: прямоугольник посередине, 2 треугольника под прямоугольником и обрезанный прямоугольник слева и справа. Когда вы упоминаете резку, вы можете думать об этомclip-pathЭто свойство, поэтому проблема решается очень хорошо

<div class="ribbon">
  Pure CSS Ribbon
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

.ribbon {
  --ribbon-color-1: var(--yellow-color-1);
  --ribbon-color-2: var(--yellow-color-2);
  --ribbon-color-3: var(--yellow-color-3);

  position: relative;
  padding: 0.5rem 1rem;
  color: white;
  background: var(--ribbon-color-1);

  .block {
    &:nth-child(1),
    &:nth-child(2) {
      position: absolute;
      bottom: -20%;
      width: 20%;
      height: 20%;
      background: var(--ribbon-color-2);
      clip-path: polygon(0 0, 100% 100%, 100% 0);
    }

    &:nth-child(1) {
      left: 0;
    }

    &:nth-child(2) {
      right: 0;
      transform: scaleX(-1);
    }

    &:nth-child(3),
    &:nth-child(4) {
      position: absolute;
      z-index: -1;
      top: 20%;
      width: 40%;
      height: 100%;
      background: var(--ribbon-color-3);
      clip-path: polygon(0 0, 25% 50%, 0 100%, 100% 100%, 100% 0);
    }

    &:nth-child(3) {
      left: -20%;
    }

    &:nth-child(4) {
      right: -20%;
      transform: scaleX(-1);
    }
  }
}

Обратите внимание, что есть строка кодаtransform: scaleX(-1);, который действует как горизонтальное отражение, что предотвращает его повторную записьclip-path

демонстрационный адрес:Ribbon

Рельефный эффект

При внимательном наблюдении вы обнаружите, что он состоит из 2 концентрических элементов, поэтому он естественным образом приходит на ум.insetЭто Миксин.

После того, как 2 концентрических элемента созданы, пришло время выяснить, как создать их рельефный блеск. Здесь можно использовать блескbox-shadowДля достижения путем наложения нескольких теней мы можем имитировать эффект рельефа.

<div class="px-6 py-2 text-xl embossed cursor-pointer" data-text="浮雕按钮" style="--emboss-radius: 1.5rem">
  浮雕按钮
</div>

:root {
  --red-color-1: #af2222;
  --red-color-2: #c1423e;
  --red-color-3: #c62a2a;
  --red-color-4: #951110;
  --green-color-1: #486433;
  --green-color-2: #2b361a;
  --red-grad-1: linear-gradient(
    to right,
    var(--red-color-1) 50%,
    var(--red-color-2) 0
  );
}

.embossed {
  --emboss-radius: 1rem;
  --emboss-out: 6px;
  --emboss-out-minus: calc(var(--emboss-out) * -1);
  --emboss-inset: 2px;
  --emboss-inset-minus: calc(var(--emboss-inset) * -1);
  --emboss-blur: 1px;
  --emboss-bg-1: var(--red-color-3);
  --emboss-bg-2: var(--green-color-1);
  --emboss-color-1: white;
  --emboss-color-2: var(--red-color-4);
  --emboss-color-3: var(--green-color-2);

  position: relative;
  box-sizing: border-box;
  white-space: nowrap;

  &::before {
    @include inset(var(--emboss-out-minus));
    content: "";
    background: var(--emboss-bg-1);
    box-shadow: inset var(--emboss-inset-minus) var(--emboss-inset-minus)
        var(--emboss-blur) var(--emboss-color-1),
      inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)
        var(--emboss-color-2);
    border-radius: calc(var(--emboss-radius) + var(--emboss-out));
  }

  &::after {
    @include inset;
    @include flex-center;
    content: attr(data-text);
    color: white;
    font-weight: bold;
    background: var(--emboss-bg-2);
    box-shadow: inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)
        var(--emboss-color-1),
      inset var(--emboss-inset-minus) var(--emboss-inset-minus)
        var(--emboss-blur) var(--emboss-color-3);
    border-radius: var(--emboss-radius);
  }
}

демонстрационный адрес:Emboss Button

домашнее задание после уроков

Попробуйте использовать чистый CSS для достижения эффекта картинки ниже, не обрезайте картинку~

Мой план:Нажмите, когда закончите