3D Layered Textual content: The Fundamentals

On this instance, we'll go together with the inline strategy. It provides us full management, retains issues simple to know, and avoids dependency between the markup and the stylesheet. It additionally makes the examples copy pleasant, which is nice if you wish to strive issues out shortly or tweak the markup straight.

Professional tip: In the event you’re working in an IDE with Emmet help, you'll be able to generate all of your layers directly by typing .layer*24[style="--i: $;"] and urgent Tab. The .layer is your class, *24 is the variety of components, attributes go in sq. brackets [ ], and $ is the incrementing quantity. However, In the event you’re studying this within the not-so-distant future, you may have the ability to use sibling-index() and never even want these methods. In that case, you received’t want so as to add variables to your components in any respect, simply swap out var(--i) for sibling-index() within the subsequent code examples.

Including Content material

Now allow us to speak about including content material to the layers. Every layer must comprise the unique textual content. There are a number of methods to do that. Within the subsequent chapter, we'll see how one can deal with this with JavaScript, however if you're on the lookout for a CSS-only dynamic resolution, you'll be able to add the textual content because the content material of one of many layer’s pseudo components. This manner, you solely must outline the textual content in a single variable, which makes it a terrific match for titles, brief labels, or something which may change dynamically.

.layer {
  --text: "Lorem ipsum";
  
  &::earlier than {
    content material: var(--text);
  }
}

The draw back, in fact, is that we're creating further components, and I personally desire to avoid wasting pseudo components for ornamental functions, just like the border impact we noticed earlier. We are going to take a look at extra examples of that within the subsequent chapter.

A greater, extra easy strategy is to easily place the textual content inside every layer. The draw back to this technique is that if you wish to change the textual content, you'll have to replace it in each single layer. However since on this case the instance is static and I don't plan on altering the textual content, we'll merely use Emmet, placing the textual content inside curly braces {}.

So, we'll kind .layers*24[style="--i: $;"]{Lorem ipsum} and press Tab to generate the layers.

  Lorem ipsum
  

    
Lorem ipsum
    
Lorem ipsum
    
Lorem ipsum
    
  

Let’s Place

Now we are able to begin engaged on the styling and positioning. The very first thing we have to do is make sure that all of the layers are stacked in the identical place. There are a number of methods to do that as properly , however I feel the simplest strategy is to make use of place: absolute with inset: 0 on the .layers and on every .layer, ensuring each layer matches the container’s measurement precisely. In fact, we’ll set the container to place: relative so that every one the layers are positioned relative to it.

.textual content {
  place: relative;

  .layers, .layer {
    place: absolute;
    inset: 0;
  }
}

Including Depth

Now comes the half that journeys some folks up, including perspective. To present the textual content some depth, we’re going to maneuver every layer alongside the z-axis, and to really see this impact, we have to add a little bit of perspective.

As with every little thing to this point, there are a number of methods to do that. You would give perspective to every layer individually utilizing the perspective() perform, however my advice is at all times to use perspective on the guardian degree. Simply wrap the aspect (or components) you need to carry into the 3D world inside a wrapper div (right here I’m utilizing .scene) and apply the attitude to that wrapper.

After setting the attitude on the guardian, you’ll additionally want to make use of transform-style: preserve-3d; on every baby of the .scene. With out this, browsers flatten all reworked youngsters right into a single aircraft, inflicting any z-axis motion to be ignored and every little thing to look flat. Setting preserve-3d; ensures that every layer’s 3D place is maintained contained in the guardian’s 3D context, which is essential for the depth impact to return via.

.scene {
  perspective: 400px;
  
  * {
    transform-style: preserve-3d;
  }
}

On this instance, I’m utilizing a reasonably low worth for the perspective, however it is best to undoubtedly mess around with it to fit your personal design. This worth represents the space between the viewer and the thing, which straight impacts how a lot depth we see within the reworked layers. A smaller worth creates a stronger, extra exaggerated 3D impact, whereas a bigger worth makes the scene seem flatter. This property is what lets us really see the z-axis motion in motion.

Layer Separation

Now we are able to transfer the layers alongside the z-axis, and that is the place we begin utilizing the index values we outlined earlier. Let’s begin by defining two customized properties that we’ll use in a second: --layers-count, which holds the variety of layers, and --layer-offset, which is the spacing between every layer.

.textual content {
  --layers-count: 24;
  --layer-offset: 1px;
}

Now let’s set the translateZ worth for every layer. We have already got the layer’s index and the spacing between layers, so all we have to do is multiply them collectively contained in the rework property.

.layer {  
  rework: translateZ(calc(var(--i) * var(--layer-offset)));
}

This looks like an excellent second to cease and take a look at what we've to this point. We created the layers, stacked them on high of one another, added some content material, and moved them alongside the z-axis to present them depth. And that is the place we’re at:

In the event you actually strive, and focus onerous sufficient, you may see one thing that form of appears like 3D. However let’s be sincere, it doesn't look good. To create an actual sense of depth, we have to usher in some colour, add a little bit of shadow, and possibly rotate issues a bit for a extra dynamic perspective.

Forging Shadows

Generally we'd need (or want) to make use of the worth of --i as is, like within the final snippet, however for some calculations, it’s usually higher to normalize the worth. This implies dividing the index by the full variety of layers, so we find yourself with a price that ranges from 0 to 1. By normalizing, we preserve our calculations versatile and proportional, so the impact stays balanced even when the variety of layers adjustments.

.layer {
  --n: calc(var(--i) / var(--layers-count));
}

Now we are able to alter the colour for every layer, or extra exactly, the brightness of the colour. We’ll use the normalized worth on the ‘mild’ of a easy HSL perform, and add a contact of saturation with a bluish hue.

.layer {
  colour: hsl(200 30% calc(var(--n) * 100%));
}

Step by step altering the brightness between layers helps create a stronger sense of depth within the textual content. And with out it, you threat shedding among the finer particulars

Second, do not forget that we wrapped the unique textual content in a span so we may fashion it? Now's the time to make use of it. Since this textual content sits on the underside layer, we need to give it a darker colour than the remaining. Black works properly right here, and typically, though within the subsequent chapter we'll take a look at examples the place it really must be clear.

span {
  colour: black;
  text-shadow: 0 0 0.1em #003;
}

Ultimate Touches

Earlier than we wrap this up, allow us to change the font. That is in fact a matter of non-public style or model pointers. In my case, I'm going with a daring, chunky font that works properly for a lot of the examples. It's best to be at liberty to make use of no matter font suits your fashion.

Allow us to additionally add a slight rotation to the textual content, possibly on the x-axis, so the lettering seems at a greater angle:

.textual content {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  rework: rotateX(30deg);
}

And there you have got it, combining all the weather we’ve coated to this point: the layers, indexes, content material, perspective, positioning, and lighting. The result's an exquisite, three-dimensional textual content impact. It could be static for now, however we’ll deal with that quickly.

Wrapping Up

At this level, we've a strong 3D textual content impact constructed solely with HTML and CSS. We coated every little thing from construction and indexing to layering, depth, and colour. It could nonetheless be static, however the basis is powerful and prepared for extra.

Within the subsequent chapters, we're going to flip issues up. We are going to add movement, introduce transitions, and discover artistic methods to push this impact additional. That is the place it actually begins to return alive.