I knew that I wanted to code out the Dribbble shot END by Catt as a single element. I planned on using the main element for the text and pseudo elements to create the tails of the ribbon.
In making all of this happen, I was presented with of couple challenges.
- Give the ribbon tail a shadow without adding extra elements.
- Preserve the stacking order on transform.
Give the ribbon tail a shadow
First, I created a triangle by manipulating the
border properties to recreate the shadow effect of the ribbon. It worked, but it didn’t match up perfectly.
And then, it came to me… a trapezoid!
The trapezoid fit perfectly. I also used a variable
$ribbonSize to keep the ribbon tails in proportion with the shadow. In doing so, the ribbon became scalable!
Preserve the stacking order on transform
Prior to this project, I noticed issues in preserving the stacking order,
z-index, of elements once a
transform is introduced. Until now, I didn’t know how to remedy it, so I avoided it.
Once I added
transform to the main element, the pseudo elements appeared to disregard the
z-index: -1 rule and sat on top of the main element.
Through research, I dove into the situation of what takes place between stacking orders and transforms. I learned that once transformed, an element needs to play by 3D rules. Without specifying the
transform-style, I was technically still in flat mode.
If flattened, the children will not exist on their own in the 3D-space. – transform-style by MDN
To allow the children to exist on their own, I needed to pepper in a couple more properties. First, I told my main element to
Next, I controlled the stacking order of the pseudo elements through
translateZ. Think of
translateZ as the 3D version of
After adding these properties, my ribbon tails popped back into place behind the ribbon.
Below is a playground I created to test