Pure CSS implements common UI effects

This article has been authorized to be exclusively used by the public account of the Nuggets Developer community, including but not limited to editing and marking original rights

preface

Hello, this is CSS magic – Alphardex.

Chetto boy is a self-deprecating term used by most front-end users. I believe that many people usually write pages, most of the time in the cutting and layout, and so on. This is not to deny Chetu itself, but to question: what is the benefit of playing chetu on earth for his ability to grow? Imagine the UI throwing you a beautiful interface, and you can fix it with an IMG tag or a background-image property, but then somewhere else you need to change the look (color, text, etc.), don’t you want the UI to change the image and replace it? You’re completely at the mercy of the UI, and you can’t do anything about it.

So how to break the logjam? Is very simple, if you are the CSS to play enough to slip, you will no longer work for that to be cut figure, the interface, elements are personally created by your hands together, although they may take some time, but the reward is huge, you can not only created by the free control of your elements, and can significantly improve their CSS capability.

Before this

Before implementing these effects with pure CSS, I’ll introduce you to a few common SCSS mixins and a powerful weapon that will help you create with less effort

Cover to cover

@mixin cover($top: 0.$left: 0.$width: 100%.$height: 100%) {
  position: absolute;
  top: $top;
  left: $left;
  width: $width;
  height: $height;
}
Copy the code

This is used when you want to “copy” an element and overlay it on top of the original

Demo address: Blob Button

Embedded – an inset

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

Again, this is a copy of the original element, but the location of the element is the same as the original element, the size of the original element will increase or decrease.

For example, this Mixin would be helpful if you wanted to create multiple concentric circles with different radii

aqua.css

Aqua.css is an elegant and lightweight CSS framework that I open source. It has a lot of common components and common style classes, and it’s a great experience to write CSS with

On Codepen, I have prepared an Aqua. CSS template that you can use to create CSS

Common UI Effects

Stripe effect

First, let’s grab the word “border.” How do you create a special border? If normal CSS properties don’t work, you can use fake elements. The idea is to create a fake element with a striped background underneath the original element, and make sure the original element covers it. This mimics the border effect.

So how do you create a striped background? Here we’ll use repeating-Linear-gradient to do it

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

.border-stripe {
  --stripe-width: 0.5 rem;
  --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); }}Copy the code

To ensure reusability, it is abstracted into a border-stripe class, where values can be dynamically adjusted using CSS variables

Demo address: Stripe Border

Gloss effect

When you look at the gloss, you may think of a key role – radial gradient, through which we can create a radial pattern, which happens to be radial, and depending on the background can be superimposed, the gloss effect can be easily achieved

<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>
Copy the code

:root {
  --blue-color1:#08123d;
  --gold-color1:#dcb687;
  --brown-color1:#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); }}Copy the code

Demo address: Shine Button

Irregular shape

First, let’s take a look at the basic shapes that make up the ribbon shape above: there is a rectangle in the middle, two triangles below the rectangle, and a cut rectangle on each side. The clip-path property comes to mind when you think of clipping, and the problem is easily solved

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

.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.5 rem 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); }}}Copy the code

Notice a line of code transform: scaleX(-1); “, which acts as a horizontal flip, preventing the clip-path from being written again

Demo address: Ribbon

Anaglyph effect

Through careful observation, you will find that it is composed of two concentric elements, so the natural idea of the Mixin inset comes to mind.

Once you’ve created the two concentric elements, it’s time to find a way to create their emboss shine. The gloss here can be achieved with box-shadow. By adding multiple shadows, we can simulate the effect of emboss

<div class="px-6 py-2 text-xl embossed cursor-pointer" data-text="Embossed button" style="- emboss - radius: 1.5 rem." ">Embossed button</div>
Copy the code

:root {
  --red-color1:#af2222;
  --red-color- 2:#c1423e;
  --red-color- 3:#c62a2a;
  --red-color- 4:# 951110;
  --green-color1:# 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); }}Copy the code

Demo address: Emboss Button

Homework after class

Try to use pure CSS to achieve the effect below, do not cut the graph oh ~

My solution: Order when you’re done