DEV Community: Yoav Kadosh

Gradient.art - Designing and Inspecting Complex CSS Gradients

Yoav Kadosh — Thu, 02 Sep 2021 13:12:46 +0000

I've recently launched gra.dient.art - an advanced online CSS gradient editor that has support for background layering, design tools, free cloud storage, and a growing list of examples. And the best part - it's totally free!

With this editor, you can create your own unique designs, from basic patterns and icons to more complex illustrations and art, all using pure CSS. You can also explore the various different projects on the site if you're looking to use some existing designs, or just learn how it's done.

The editor

The editor was designed to provide a photoshop-like experience, with a toolbar on the left, and panels on the right.

The Toolbar

In the left toolbar, you can find tools for moving, scaling and rotating a gradient background:

You can move a gradient:

Scale it:

And rotate it (only for conic/linear gradients):

The Panels

On the right of the editor you can find a few panels. Each panel is dedicated for a different aspect of the project.

The Gradients Panel

The Gradients panel is where you can see all of your gradients, and add/remove/rename/reorder them.

The Properties Panel

The Properties panel is where you can modify the selected gradient. All of the CSS properties for all the 3 gradient types are supported.

The Code Panel

The Code panel displays the generated CSS code for your project.

The Document Panel

The document panel is used for configuring project-wide things like canvas size, title, description & keywords. Good title & description will help other users find your project when they search for examples on the site. You can use special keywords if you want your project to be featured on one of the project pages. For example, use the pattern keyword if you want your project to appear under gra.dient.art/explore/patterns

Resizing the panels

The panels are resizable, so you can change the layout to your convenience. As a side note, getting the panels to stack when they resize beyond their siblings was a bit of a challenge, but I love the result 😎. You can see how it looks below:

Examples

Below are some projects you can find on gra.dient.art. Click on any of the images to open it in the editor and inspect it. You can find many more projects here.

Roadmap

In the near future, and depending on the popularity and demand, I plan to add support for the following features:

Variables - defining and using variables for colors and units, using CSS custom properties.
Elements - currently, the CSS is applied to a single element, and the most you can do is stack multiple backgrounds to it. This feature will allow the user to create a tree of elements for more complex designs.
Transformations - Once elements are fully supported, this feature will add support for CSS transforms on the elements - rotate, scale, skew, and translate.
Open sourcing - I would like to expose some of the components as open source, so that other developers can use them and contribute back.

Technology

Under the hood, Gradient.art uses the following libraries/services, and I would like to express my gratitude to the people behind those projects:

React
Next.js
NextAuth.js
Recoil.js
Webrix.js (disclosure - i'm the developer behind this library)
Vercel
MongoDB

Conclusion

I hope you find this tool useful, and i'm looking forward to seeing your designs on gra.dient.art! If you encounter any issue, or would like to request some new features, feel free to contact us or file a bug.

Generative Linear Gradients Background

Yoav Kadosh — Wed, 30 Jun 2021 06:42:47 +0000

This background is made from a set of linear gradients that are stacked on top of each other, and are applied to a single div element.

The gradients are made by generating a random color within the given hue range, and generating a set of random color stops, from transparent to the selected color and back.

Being made of gradients, this background is infinitely scalable.

Finally, the gradients are animated by changing the angle of each gradient, using the new CSS Houdini @property syntax.

You can click on the button to generate a new background.

How I Created These Generative Underline Pen Strokes

Yoav Kadosh — Wed, 23 Jun 2021 19:02:23 +0000

(Scroll down to see a live demo, or see it on CodePen)

I created a small React component that adds a randomly generated pen stroke underline to a given word.

The strokes are rendered using an SVG <path/> element. They vary in thickness and shape, and they take the width of the text that they underline.

Rendering The Strokes

I used an SVG element with a single <path/> to render the strokes. The <path/> has a d attribute specifying a series of commands and coordinates, defining the shape of the path. The path element is the most powerful SVG element, and I use it often when creating SVG graphics. You can learn more about it in this great MDN tutorial.

I'm using the Q command, which is a simple command for generating curves. I'm randomly generating a series of 2-4 curves alternating from left to right, each of which is angled a bit differently, and placed a bit lower that the previous one.

Here's the code:

// Draw the lines
while (line++ < lines) {
  const y = line * (height / lines); // Draw every line lower than the previous one
  d += ` Q ${random(30, 70)}` + // The x coordinate of the curve's center
       ` ${random(y - 5, y + 5)}` + // The y coordinate of the curve's center
       ` ${line % 2 === 0 ? random(-5, 15) : random(85, 105)}` + // The x coordinate of the curve's end, alternating between right to left based on the current line number
       ` ${random(y - 2, y + 2)}`; // The y coordinate of the curve's end
}

Maintaining Stroke Width Consistency

SVG elements can scale up/down, but they maintain the ratio given by their viewBox attribute. That includes the stroke width.

For example, if our viewBox is defined to be a 100x100 square (i.e. viewBox="0 0 100 100"), and we set the width and height of the element to be 200x200, everything inside the SVG will scale by a factor of 2. A stroke-width of 10px will be rendered as 20px.

Since the SVG element takes the width of the given word, the stroke width can scale up or down based on the word's length. To avoid that, i'm using the following CSS rule:

vector-effect: non-scaling-stroke;

Maintaining Stroke Height Consistency

The issue described above can also affect the coordinates of the <path/> itself, not just the width of the stroke.

In my case, I wanted the SVG's height to remain consistent, and let the width change based on the word's length instead of maintaining the ratio given in viewBox.

To do that, I used the following attribute:

<svg preserveAspectRatio="none">

See it live on CodePen:

Color Picker (React + Webrix)

Yoav Kadosh — Tue, 27 Apr 2021 10:41:31 +0000

I made this color picker component using React, Webrix.js, and a nice color utility library called color-convert.

It's a stateless component that supports 2-way data binding, so it is able to take a color prop, and update that color via an onChange handler.

There are 2 slider components here, one for the shade (2-axis slider) and one for the hue (x-axis slider).

The shade slider is made of 3 stacked linear gradients, and the hue slider is made of a single linear gradient with multiple stops.

Initially, I was using canvas.getImageData() to get the color of the pixel based on the mouse position, but that proved to be problematic. For example, although getting the color based on coordinates is rather easy, getting the coordinates based on color is difficult and CPU intensive.

Luckily, it turns out that there's a color format that is perfect for this case - HSV. In that format, the 2 first elements are roughly the x/y coordinates of the <ShadePicker/>, and the 3rd element is the x coordinate of the <HuePicker/>.

See it live on CodePen:

Isometric Floating Layers (SVG)

Yoav Kadosh — Mon, 05 Apr 2021 13:02:11 +0000

I made this SVG animated illustration for a piece I was writing about Webrix.js (you can find it here: https://webrix.amdocs.com/motivation).

I've made a <Layer/> component that is completely configurable (size, color, position, text), and you can stack as many as you need together and create your own illustration.

I'm using 3 <path/> elements internally to draw each layers and make it appear 3-dimensional: one for the shadow, one for the highlight, and one for the body.

How I Made This Realistic Red Switch (Pure CSS)

Yoav Kadosh — Mon, 22 Mar 2021 09:12:59 +0000

I created this pen last week after stumbling across this 3D Red Switch design on Dribble. Since then it gained a lot of popularity (much more than I have anticipated!), and a few people have asked me to write a tutorial about how I made it.

I've used various different CSS techniques in the making of this, including gradients, 3D transformations, animations, and transitions. In this tutorial, I will go over some of these techniques in depth.

Simulating a State

This is probably the oldest trick in the book. A switch has 2 states - on and off, but CSS has no way of maintaining such a state.

To solve this, we can use one of the native HTML elements. Since we only need to maintain 2 states, a checkbox element is a great choice. We can use the :checked CSS selector to apply CSS based on whether the checkbox is checked or not.

We wrap the whole thing in a <label/> to link the click event of the entire element to the checkbox, and we hide the checkbox itself using CSS.

<label class="switch">
  <input type="checkbox" checked/>
</label>

.switch {
  input {
    display: none;
  }
}

One issue with this is that we can't apply CSS to the <label/> itself based on the checkbox state, since there's no "ancestor selector" in CSS. Because of that, I placed all the switch elements after the checkbox and used the adjacent sibling selector (+) to apply CSS to them.

<label class="switch">
  <input type="checkbox" checked/>
  <div class="button"></div>
</label>

.switch {
  input {
    display: none;

    &:checked + .button {
      // Apply some CSS to .button when the checkbox is checked
    }
  }
}

If you need to simulate an element with more than 2 states, you can use other HTML elements like radio buttons (<input type="radio"/>). Some people take this technique to the next level and create an entire game using CSS only! Check out this collection of pure CSS games on CodePen for some inspiration.

Making The Black Frame

I used box-shadow to simulate the button's frame. box-shadow is a very powerful CSS property, because it allows you to stack multiple shadow effects separated by a comma.

I used a set of 5 shadow effects to create the frame, and a border-radius property to make the shadow round in the corners. Here's the breakdown:

.switch {
  border-radius: 5px;
  box-shadow: 
    0 0 10px 2px rgba(black, 0.2), // The surrounding shadow (first layer)
    0 0 1px 2px black, // The surrounding shadow (second layer)
    inset 0 2px 2px -2px white, // The top white "shine"
    inset 0 0 2px 15px #47434c, // The light gray frame
    inset 0 0 2px 22px black; // The internal black shadow
}

Making The 3D Button Shape

I used CSS transformations and transitions to make the button appear 3-dimensional.

The button itself is made of 3 divs (1 div and 2 pseudo-elements to be precise), that are perpendicular to each other, as illustrated below:

.button {
  &::before {
    height: 50px;
    width: 100%;
    transform: rotateX(-90deg);
  }
  &::after {
    height: 50px;
    width: 100%;
    transform: translateY(50px) rotateX(-90deg);
  }
}

Then, I rotated the entire button 25 degrees, and used transform-origin to set the pivot point away from the div, to make the button appear as if it is rotating around some point deeper inside the button, rather than around the div:

.switch {
  perspective: 700px;

  .button {
    $rotation: 25deg;
    $pivot-distance: 20px;
    transform-origin: center center -#{$pivot-distance};
     transform: translateZ($pivot-distance) rotateX(-$rotation);
    transform-style: preserve-3d;
  }
}

Making The Animation

I used CSS transitions to rotate the switch back and forth. I wanted the transition to appear realistic, by starting slowly and ending quickly. I could've used one of the native easing functions, like ease-in, but that wasn't producing the right animation, so I used a custom cubic-bezier() easing function instead:

transition: all 0.3s cubic-bezier(1, 0, 1, 1);

This curve means that the transition starts slowly, and ends quickly, just like a real switch that slowly turns until it "clicks" towards the end.

Making The I/O Characters

There are multiple tricks I could've used to create the I/O characters. I could've used real letters and apply styling to them, or use a special font. But since those are pretty simple characters to draw, I decided to use gradients to make them.

CSS gradients are amazing, but I had no idea how powerful they are until I came across this great article about CSS Drawings.

The true power of gradients comes from the fact that they are considered as "images" by CSS, and therefore can benefit from the power of the background property. backgrounds in CSS can not only be stacked (like shadows), but they can also have custom position and size!

This means that you can do pretty much everything with CSS gradients. If you want to understand just how far you can take it, check out https://a.singlediv.com/ (every art piece on that site is made with a single div).

The syntax is pretty simple:

background: <image> <position> / <size>

You can stack multiple gradients with commas, and add background-repeat: no-repeat to prevent the gradients from repeating:

.image {
  background:
    <image> <position> / <size>,
    <image> <position> / <size>,
    <image> <position> / <size>;
  background-repeat: no-repeat;
}

I made the characters using a background with 2 gradients.
For the "I" character, I used an all-white linear-gradient(), and made it narrow and long. For the "O" character I used a radial-gradient() with 4 color stops, from transparent to white and back to transparent.

background:
  linear-gradient(white, white) 50% 20% / 5% 20%, // White vertical line ("I")
  radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80% / 33% 25%; // White circle ("O")

If you take a look at the radial-gradient(), you'll notice that there's a 2% gap between each color stop:

radial-gradient(
  transparent 50%, 
  white 52%, 
  white 70%, 
  transparent 72%
)

This makes the different colors blend together, instead of having a crisp, pixelated transition. To illustrate this, take a look at the image below:

This is an inherent CSS gradient behavior - it creates a smooth blend between the colors when there's a gap between the color stops.

Making The "LED" Gradient

As seen in the picture above, I stacked 2 gradients to achieve a look of an LED bulb hidden behind a semi-transparent red plastic with small round bumps on it.

I had to use 2 elements, one for each gradient, since the first gradient had to be none-repeating, and the second one had to be repeating. Additionally, I wanted to make the light "flicker", so I had to separate them.

The first element is the .light element, where I used a radial-gradient() to illustrate a red LED light, with a brighter center (the center is orange, while the surroundings are red).

.light {
  background-image: radial-gradient(
    adjust-hue(lighten($color, 20%), 35), // Orange
    $color 40%, // Red
    transparent 70%
  );
}

Don't be alarmed by adjust-hue() and lighten(), I will cover those in the next part. For now, just consider them as hex colors.

The second element is the .dots element, where I used a repeating radial-gradient() with a transparent center to create a matrix of round-shaped bumps.

.dots {
  background-image: 
    radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
    background-size: 10px 10px;
}

Finally, I used animation to create the flickering effect:

.light {
  animation: flicker 0.2s infinite 0.3s;
}

@keyframes flicker {
  0% {opacity: 1}
  80% {opacity: 0.8}
  100% {opacity: 1}
}

Controlling The Color Through A Variable

As this pen gained popularity, some people asked to see it in different colors. Initially, I had hardcoded colors throughout my CSS, so I changed those to SASS variables for simple configuration.

However, I wanted the main color to be easily configurable, so having multiple color variables wasn't good enough. I needed to control all of the colors & shading through a single variable.

In order to achieve that, I used SASS's built-in color functions: lighten(), darken() and adjust-hue() (SassMe is a nice tool for visualizing the output of these functions).

lighten() and darken() are pretty self-explanatory. They make a given color lighter or darker based on the given percentage. For example, lighten(black, 50%) will mix black with 50% white, producing a gray color.

However, for the LED light, lighten() and darken() were not enough, since the center of the light was orange, while the surroundings were red. That's not a different color shade, it's a different color altogether.

That's where adjust-hue() comes in handy. It lets you change the color's hue property by a given degree.

A color's hue is the color's position on the color wheel and can be represented by a single numerical value, usually in degrees (0 - 360).

So I used adjust-hue() to "rotate" the color's hue property 35 degrees to the right:

adjust-hue($color, 35)

Producing this:

So if the color is red, to rotated color will be orange. But if the color is green the rotated color becomes blue!

So now, you can control all the colors in the switch via a single variable $color:

Summary

This tutorial turned out to be a bit longer than I anticipated, and it may appear a bit overwhelming at first to see all the different techniques and tricks that were used for making this switch. But when you break it down to its basic elements, these techniques are pretty simple to comprehend.

I hope I was able to provide some insight into the development process, and I hope you learned some new CSS techniques.

Realistic Red Switch (Pure CSS)

Yoav Kadosh — Mon, 15 Mar 2021 13:27:37 +0000

This is my attempt at making a realistic switch using CSS only. I'm using multiple CSS techniques here, including gradients, 3D transformations, animations, and transitions.

Making realistic 3D elements in CSS is kind of like making a very low-poly version of a high-poly model. In this example, I made the button out of 3 "polygons" (3 divs) that are all at 90 degrees from each other (creating like a square U shape).

Interested in a tutorial on how I made this? Let me know!

This pen is based on this beautiful Dribbble shot by Voicu Apostol https://dribbble.com/shots/14172039-3D-Red-Switch

Webrix.js - Building Blocks for Interactive React Apps

Yoav Kadosh — Wed, 17 Feb 2021 12:34:40 +0000

For the past 3 years, I've been working with a great team of UI developers on one of Amdocs' flagship products, and in the process, we've faced many challenges.

To solve these challenges, we developed a set of React components and hooks, each dedicated to solving a single UI challenge.

Recently, we decided to release these components and hooks as an open-source library, called webrix.js.

Unlike many other component banks out there that provide feature-packed, fully-branded end-user components, we decided to take a different approach and develop a set of small, single-purpose, unbranded components. This gives you more freedom to develop your own component bank with the UX that best matches your domain.

Below are some of the components you can find in Webrix.js:

Movable

The <Movable/> component can be used to create movable elements, with optional constraints. We use <Movable/> to create things like sliders, resizers, movable modals, scrollbar handles, and more. See more <Movable/> examples here.

Resizable

The <Resizable/> component can be used to create resizable elements, with optional constraints. We use <Resizable/> for creating resizable modals, image editing tools, and resizable layouts. See more <Resizable/> examples here.

Poppable

The <Poppable/> component can be used to create elements that "pop out" of the screen. We use <Poppable/> for creating popups, menus, tooltips, dropdowns, and more. The <Poppable/> has a built-in mechanism for overflow avoidance and dynamic z-index calculations. See more <Poppable/> examples here.

Scrollable

The <Scrollable/> component can be used to create elements with scrollable content and fully-customizable scrollbars. The elements behave just like a natively scrollable element, so working with them is pretty straightforward, and requires no CSS hacks. See more <Scrollable/> examples here.

Collapsible

The <Collapsible/> component allows you to collapse/expand an element with arbitrary content height and apply a nice transition to it. This is a challenge to achieve with CSS only, so we use a mix of JS & CSS to overcome this (we discuss the solution further in the documentation). See more <Collapsible/> examples here.

These are just a few of the available components in Webrix.js

Since these components are already used by some of Amdocs' products, they are field-tested and have reached a certain maturity level.

I invite you to visit our documentation and take a look at some of the examples that were created using Webrix.js.

Also, starring our project on GitHub will help us a lot! 😁