Fun with CSS Morphism trends - Silkmorphism

What even is silkmorphism?

We have Skeu-, Neu- and Glassmorphism. So why not Silkmorphism with stitched content?

Bonus: It stretches on hover! 😃

This is my take on Handmade textures in UI for this weeks codepen challenge.

(Also, I'm more than willing to donate a goldstar sticker for any examples on a genuine usecase. 🤔⭐)

The how - for those interested

I would put this into 5 parts:

First - The rip off

Using the base of a CSS Glassmorphism element: `border`, `border-radius`, `backdrop-filter: blur()`, `box-shadow` and a `background` with an alpha.

.fabric {
  background-image: hsla(37, 20%, 90%, 0.3);

  border-radius: 10px;
  border: 1px solid hsla(37, 20%, 10%, 0.1);

  box-shadow: 2px 8px 20px hsla(37, 0%, 60%, 0.7);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

}

Though I've done this code plenty of times, I'm not ashamed to admit I used a glassmorphism generator in this case.

This is the silk base.

Second - The shape

A piece of fabric rarely lies flat and stretched. So using a percentage border-radius value give and not all rounded border, adding to the fabric effect. In this case I used `border-radius:20%;`.

Adding a `transform: skew(3deg) rotate(3deg);` to the silk base will add to the effect of it laying draped on the background rather than glued flat.

.fabric {
  background-image: hsla(37, 20%, 90%, 0.3);

  /* Just adding some padding and alignment as well*/
  padding: clamp(3em, 4vw, 6em);
  text-align: center;

  border-radius: 20%;
  border: 1px solid hsla(37, 20%, 10%, 0.1);

  transform: skew(-3deg) rotate(2deg);

  box-shadow: 2px 8px 20px hsla(37, 0%, 60%, 0.7);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

}

Third - The background

To get the draped effect we need pleats. This is obtained by using a `background: linear-gradient(20deg, ...);`. For the full rundown on how gradients work I'll suggest looking into the documentation. I know I had to look it up again during this coding session.

.fabric {
  background-image: linear-gradient(
    20deg,
    hsla(37, 20%, 40%, 0.3) 0%,
    hsla(37, 20%, 90%, 0.3) 10%,
    hsla(37, 20%, 40%, 0.3) 33%,
    hsla(37, 20%, 90%, 0.3) 70%,
    hsla(37, 20%, 40%, 0.3) 90%,
    hsla(37, 20%, 90%, 0.3) 100%
  );

  padding: clamp(3em, 4vw, 6em);
  text-align: center;

   border-radius: 20%;
  border: 1px solid hsla(37, 20%, 10%, 0.1);

  transform: skew(-3deg) rotate(2deg);

  box-shadow: 2px 8px 20px hsla(37, 0%, 60%, 0.7);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

}

The 20 degrees angle on the gradient is what I thought looked most realistic as it lined up with the corners. I used 3 groups of gradient colors of dark and light to get the highlighted effect. I played around with the percentage values to get a spacing that I thought looked good.

I absolutely love hsl() color codes as they are extremely intuitive for me to use. However you can use any colorcoding that allows for an alpha setting as the gradient colors still needs some transparency to get retain the glass-effect from the base. This is a delicate see-through-silk mind you.

Fourth - The stretch

To get a realistic stretch effect on hover, physics play a role. Gravity/Tension, fabric amount and light reflections are all big words for a simple change: subtract what you add to existing shape and background values.

This means that when I want the corners to stretch by subtracting 2% the the other corners need to add 2% as there is only a limited amount of fabric to manipulate. So I ended up with: `border-radius: 18% 22%;`.

.fabric {
  background-image: linear-gradient(
    20deg,
    hsla(37, 20%, 40%, 0.3) 0%,
    hsla(37, 20%, 90%, 0.3) 10%,
    hsla(37, 20%, 40%, 0.3) 33%,
    hsla(37, 20%, 90%, 0.3) 70%,
    hsla(37, 20%, 40%, 0.3) 90%,
    hsla(37, 20%, 90%, 0.3) 100%
  );

  padding: clamp(3em, 4vw, 6em);
  text-align: center;

   border-radius: 20%;
  border: 1px solid hsla(37, 20%, 10%, 0.1);

  transform: skew(-3deg) rotate(2deg);

  box-shadow: 2px 8px 20px hsla(37, 0%, 60%, 0.7);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: border-radius 0.1s ease, transform 0.1s ease,
    background-image 0.1s ease;

  animation: intro 1s ease forwards;

}

.fabric:hover {
  cursor:pointer;
  border-radius: 18% 22%;
  transform: skew(3deg) rotate(3deg);
  background-image: linear-gradient(
    18deg,
    hsla(37, 20%, 40%, 0.3) 0%,
    hsla(37, 20%, 90%, 0.3) 10%,
    hsla(37, 20%, 40%, 0.3) 34%,
    hsla(37, 20%, 90%, 0.3) 69%,
    hsla(37, 20%, 40%, 0.3) 90%,
    hsla(37, 20%, 90%, 0.3) 100%
  );
}

I applied this to the gradient width percentage as well. If I added 2% on the dark side I wuld subtract 2% on the light side. It's a balancing act. As a pleat stretces it becomes thinner. This also meant that the degree of gradient was changed to accomendate for the new corners.

Another important change is the skew that was doubled in the opposite direction to really get the sensation of the corners being pulled. So when stretched the skew was set to: `transform: skew(-3deg);` I made some small opositional changes to the rotate as well.

Fifth - The Stitch

By using `color:transparent;` I can then use text-shadow to create a 3D effect on the text making it look like thread. I used 2 shadows a light (the text color I wanted) and a dark (a sligthly darker version of the light color). By setting a small offset and blur the text gets the subtle thread effect. Chosing a font with rounded tips adds to the effect. I ended up with: `text-shadow: -0.5px -0.5ps 2px light, 0.5px 0.5px 2px dark;`.

.thread {
  text-shadow: -0.2px -0.2px 1px hsl(200, 35%, 55%),
    0.2px 0.2px 1px hsl(200, 35%, 20%);
  color: transparent;
}

The disclaimer

I really like ranting in math, but don't get discouraged on that account. My real process was actual a lot of trial and error playing around with values and my scarf. The math epiphany was an afterthought.

I haven't really thought of any actual usecase of this yet. Though I had a blast making it as a tribute to the morphism trends.

Also.. have fun 🤘

When it comes to practice or generally just growing my skills as a developer. I tend to end up in a mix of decision paralysis and imposter syndrome.

I want to pick a project that will challenge me, show my skills, be impressive and relevant. Should I make a UI conponent, a full website? What about content (I really have a hard time here), about design trends? You see where this is going? 🤦

Though after an extremely stressfull period I finally got the time and motivation to code for challenges and fun in general. Though I couldn't muster up the energy to be very serious.

So I had fun. I started playing around and making stuff I thought was fun rather than useful. Turns out that did the trick.

The pens I did with the least practical application in regard to user experience turned out to be the most popular.🤷

So, what is the point of this rant? Well, remember to be less serious, be silly and be creative. It does wonder for the mood, stress level and humans are weird and love useless fun stuff, I know I do. So if you are stuck like me at times, A tip is to just have fun.