CSS: Wallet

rybson — Sun, 19 Jun 2022 16:22:16 +0000

<div class="wallet">
    <div class="rectangle">
      <div class="rectangle__front"></div>
      <div class="closure"></div>
    </div>

    <div class="card">
      <div></div>
      <div></div>
    </div>
  </div>

.wallet {
  --width: 400px;
  position: relative;
}

.rectangle {
  width: var(--width);
  height: calc(var(--width) * 0.72);
  position: relative;
  background-color: hsl(63, 74%, 35%);
  border-radius: calc(var(--width) * 0.06);
  z-index: 1;

  &__front {
    width: calc(var(--width) * 0.92);
    height: calc(var(--width) * 0.72);
    position: absolute;
    right: 0;
    background-color: hsl(62, 65%, 43%);
    border-radius: calc(var(--width) * 0.06);
    overflow: hidden;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      clip-path: polygon(100% 0, 0 100%, 100% 100%);
      background-color: hsla(0, 0%, 0%, 0.035);
    }
  }
}

.closure {
  width: calc(var(--width) * 0.4);
  height: calc(var(--width) * 0.26);
  position: absolute;
  left: calc(var(--width) * -0.04);
  top: 50%;
  transform: translateY(-50%);
  background-color: lighten(hsl(62, 65%, 43%), 8%);
  border-radius: calc(var(--width) * 0.12) calc(var(--width) * 0.6)
    calc(var(--width) * 0.6) calc(var(--width) * 0.12);
  overflow: hidden;
  box-shadow: 8px 8px 22px -10px hsla(0, 0%, 0%, 0.2);

  &::after {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: hsla(0, 0%, 0%, 0.035);
  }

  &::before {
    content: "";
    width: calc(var(--width) * 0.12);
    height: calc(var(--width) * 0.12);
    position: absolute;
    right: calc(var(--width) * 0.06);
    top: 50%;
    transform: translateY(-50%);
    background-color: hsl(0, 0%, 100%);
    border-radius: 100rem;
  }
}

.card {
  width: calc(var(--width) * 0.72);
  height: calc(var(--width) * 0.4);
  position: absolute;
  top: calc(var(--width) * -0.18);
  left: calc(var(--width) * 0.06);
  background-color: hsl(0, 0%, 45%);
  border-radius: calc(var(--width) * 0.04);
  transform: rotate(-12deg);
  overflow: hidden;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: hsla(0, 0%, 0%, 0.035);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }

  div {
    height: calc(var(--width) * 0.12);
    width: calc(var(--width) * 0.12);
    position: absolute;
    right: calc(var(--width) * 0.04);
    border-radius: calc(var(--width) * 0.04);

    &:first-child {
      top: calc(var(--width) * 0.04);
      background-color: hsl(41, 97%, 55%);
    }

    &:last-child {
      top: calc(var(--width) * 0.2);
      background-color: hsl(0, 0%, 100%);
    }
  }
}

CSS: Untitled UI logo

rybson — Sat, 18 Jun 2022 15:03:56 +0000

While looking for inspiration for a new project, I came across the Untitled UI logo and decided to write it in CSS.

<div class="logo" style="--width: 20rem"></div>

.logo {
  width: var(--width);
  height: calc(var(--width) / 2);
  background-color: hsl(258, 51%, 50%);
  border-radius: 100vmin 100vmin 0 0;
  position: relative;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    transform: rotate(180deg);
    background-color: hsl(258, 51%, 50%);
    border-radius: 100vmin 100vmin 0 0;
  }

  &::after {
    content: "";
    width: 150%;
    height: 150%;
    position: absolute;
    bottom: -150%;
    left: -25%;
    border-radius: 100vmin 100vmin 0 0;
    transform: rotate(180deg);
    background-color: hsla(228, 26%, 96%, 0.1);
    backdrop-filter: blur(calc(var(--width) / 10));
  }
}

DEV Community: rybson

CSS: Wallet

CSS: Untitled UI logo