Chinese Window Lattice And CSS
谁向云端着此亭,檐前树木映窗棂。
-- 释绍嵩《陪赵知府登桃岭山亭》
(image from 中国窗棂)
The traditional Chinese window lattice has a symmetrical beauty, as well as a very beautiful formal name -- 窗棂.
As a CSS lover, I've always wanted to draw them with CSS by hand. But that's never being easy. I thought using SVG might be much straightforward until I learned how to apply the -webkit-box-reflect
property.
The property
Unfortunately, -webkit-box-reflect
is non-standard. The standard way is to use element()
function, which has been implemented in Firefox already.
Honestly the -webkit-box-reflect
property seems much elegant to me because it has a better name and it doesn't rely on an extra id
like element()
does. I don't get why it wasn't accepted by the CSS WG.
There's also an article in detail about reflection in CSS along with several demos by Ana Tudor back from 2016.
Directions
The -webkit-box-reflect
property provides four directions of reflection:above
, below
, left
and right
. This is how to use it:
.box {
-webkit-box-reflect: above|below|left|right;
}
Perhaps because it's just an experimental property from the very beginning, there's no way yet to add multiple reflections to an element at once.
I think it would be much cooler to have multiple reflections and reflections in various degrees other than only 4 of them.
It's still exciting
Let's start with a single div
element and its reflection on the right side.
<div>△</div>
<style>
div {
-webkit-box-reflect: right;
}
</div>
How to add another reflection?
Not long ago Chris Coyier introduced a trick in this article, about how to add shadows to a clipped element by applying drop-shadow
to its parent node.
Yes, we can do something similar by adding a parent node and setting reflection to it.
<div class="parent">
<div class="box">△</div>
</div>
<style>
.box {
-webkit-box-reflect: right;
}
.parent {
-webkit-box-reflect: below;
}
</style>
It's like unfolding a sheet of paper, first in half from left to right and then top to bottom. However, the order doesn't really matter.
Although it's not the exact result we wanted, it's so exciting to find a way to add multiple reflections.
Going deep
The total number of elements grows exponentially in this way, which is dependent on the depth of the nested divs
.
So given 2 nested divs
like the above, there will be 2^2 = 4 elements (including all the reflections). Given 7 of them will be 2^7 = 128 elements.
Seed
The innermost div
can be treated as a seed. Since the whole graph composed with reflections will change with it.
For example, rotate it with -45 degree:
...
<div>
<div>
<div class="seed">△</div>
</div>
</div>
...
<style>
/* ... */
.seed {
/* ... */
transform: rotate(-45deg);
}
</style>
Or combine with any other properties and some old methods. It seems another different way to build Unicode Patterns as well.
Chinese Window Lattice
So with the -webkit-box-reflect
property and the technique described above, we can finally draw those symmetrical window lattices in CSS with very few lines of code.
I want to take the picture at the beginning of the article as an example. Let's see how to draw them step by step.
1. The seed element
First, find out the smallest part that can't be divided any further. Here we start from the part in the upper left corner as the seed element.
And then draw these lines with background linear-gradient
. Using :empty
selector to target the seed element for simplicity.
<div></div>
<style>
div:empty {
width: 72px; height: 72px;
--g: linear-gradient(#000, #000);
--gs: linear-gradient(-45deg,
transparent calc(50% - 1px), #000 calc(50% - 1px),
#000 calc(50% + 1px), transparent calc(50% + 1px)
);
background:
var(--g) 0 0 / 100% 2px, var(--g) 100% 0 / 2px 48px,
var(--g) 100% 48px / 24px 2px, var(--g) 48px 100% / 2px 24px,
var(--g) 0 100% / 48px 2px, var(--g) 0 0 / 2px 100%,
var(--g) 0 46px / 24px 2px, var(--g) 24px 100% / 2px 26px,
var(--g) 100% 24px / 26px 2px, var(--g) 46px 0 / 2px 24px,
var(--gs) 50% 50% / 24px 24px, var(--gs) 0 0 / 40px 40px;
background-repeat: no-repeat;
}
</style>
2. Add reflection
The reflection begins with the seed element itself. We pick "right" as an initial direction and use custom property to make it more intuitive.
<div style="--reflect: right -3px"></div>
<style>
div {
-webkit-box-reflect: var(--reflect);
}
div:empty {
/* ... */
}
</style>
3. Continue unfolding
So we're going to add parent nodes for more reflections. It really helps to understand if you think of it as unfolding a sheet of paper.
<div style="--reflect: below -2px"></div>
<div style="--reflect: right -3px"></div>
</div>
Add another one.
<div style="--reflect: below calc(200% - 6px)"></div>
<div style="--reflect: below -2px"></div>
<div style="--reflect: right -3px"></div>
</div>
</div>
Repeat the process until we get the desired result.
<div style="--reflect: right calc(600% - 14px)">
<div style="--reflect: right calc(200% - 6px)">
<div style="--reflect: below calc(400% - 10px)">
<div style="--reflect: below calc(200% - 6px)">
<div style="--reflect: below -2px">
<div style="--reflect: right -2px"></div>
</div>
</div>
</div>
</div>
</div>
That's it.
You can see the result and the complete source code on CodePen. But you know it works only in Chrome and Safari.
Conclusion
The solution using -webkit-box-reflect
property is beautiful in some way. I really wish it had been accepted as a standard and can even do reflections in various directions. So that it may be possible to do JianZhi (Chinese Paper-cutting Art) in CSS.
from:https://yuanchuan.dev/2019/05/15/window-lattice-and-css.html