Front-end daily combat: # 158 video demonstrates how to create a pure CSS umbrella toggle control

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/pxLbjv

Interactive video

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/cMV8euJ

Source code download

Daily front-end combat series full source code can be downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Reading

Defined dom, the container .umbrallacontains two elements, .canopyrepresentative of the umbrella cover, .shaftumbrellas:

<figure class="umbralla">
    <div class="canopy"></div>
    <div class="shaft"></div>
</figure>

Centered:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(skyblue, lightblue);
}

Setting common attributes of pseudo-elements:

.umbrella *::before,
.umbrella *::after {
    content: '';
    position: absolute;
}

To draw up an umbrella open look.
Size of the container is provided, wherein the font-sizeattribute values have to use the back, so the definition of a variable:

:root {
    --font-size: 10px;
}

.umbrella {
    position: relative;
    width: 25em;
    height: 26em;
    font-size: var(--font-size);
}

Define the size of the canopy:

.umbrella .canopy {
    position: absolute;
    width: inherit;
    height: 5.5em;
    top: 2.5em;
}

Used ::beforeto draw the canopy upper part of the dummy elements, a method to draw a semicircle, and then it is compressed in the vertical direction:

.umbrella .canopy::before {
    width: inherit;
    height: 12.5em;
    background: rgb(100, 100, 100);
    border-radius: 12.5em 12.5em 0 0;
    transform: scaleY(0.4);
    top: -4em;
}

Used ::afterto draw the lower half canopy pseudo-element:

.umbrella .canopy::after {
    width: inherit;
    height: 1.5em;
    background-color: #333;
    top: 4em;
    border-radius: 50%;
}

Draw the pole umbrellas:

.umbrella .shaft {
    position: absolute;
    width: 0.8em;
    height: 18em;
    background-color: rgba(100, 100, 100, 0.7);
    top: 5.5em;
    left: calc((100% - 0.8em) / 2);
}

Pseudo elements shown umbrella canopy top of the rod tip is exposed, and a method similar to the upper part of the canopy Videos, semicircular first draw, then it is compressed in the horizontal direction:

.umbrella .shaft::before {
    width: 6em;
    height: 3em;
    background-color: rgba(100, 100, 100, 0.7);
    left: calc((100% - 6em) / 2);
    top: -5.5em;
    border-radius: 6em 6em 0 0;
    transform: scaleX(0.1);
}

Draw hook umbrella handle:

.umbrella .shaft::after {
    box-sizing: border-box;
    width: 4em;
    height: 2.5em;
    border: 1em solid #333;
    top: 100%;
    left: calc(50% - 4em + 1em / 2);
    border-radius: 0 0 2.5em 2.5em;
    border-top: none;
}

This completes the umbrella open, the way followed by deformation of the draw looks when closed umbrella.
First engagement on the canopy, is compressed in the horizontal direction, the stretching in the vertical direction:

.umbrella .canopy {
    transform-origin: top;
    transform: scale(0.08, 4);
}

Hide the lower half of the canopy:

.umbrella .canopy::after {
    transform: scaleY(0);
}

Let the wing tilt, because bristling umbrella a little stiff, so add a little change:

.umbrella {
    transform: rotate(-30deg);
}

At this point, like when closing the umbrella also completed, then we put it into a toggle control.
In a dom increase in checkboxcontrols:

<input type="checkbox" class="toggle">
<figure class="umbrella">
    <!-- 略 -->
</figure>

Set the controls as large umbrella, umbrella and placed in the upper layer:

.toggle {
    position: absolute;
    filter: opacity(0);
    width: 25em;
    height: 26em;
    font-size: var(--font-size);
    cursor: pointer;
    z-index: 2;
}

checkboxUnchecked control of correspondence like when closing the umbrella, which is currently umbrella like, so long as the specified control is selected corresponding to a state like when it opened umbrella. Because the umbrella is closed deformation obtained several elements, it is converted to an open state umbrella canceled deformed.
Let umbrella positive over:

.toggle:checked ~ .umbrella {
    transform: rotate(0deg);
}

Then open the canopy:

.toggle:checked ~ .umbrella .canopy {
    transform: scale(1, 1);
}

Again shows the lower half of the canopy:

.toggle:checked ~ .umbrella .canopy::after {
    transform: scaleY(1);
}

Finally, set the easing effect more than a few elements:

.umbrella,
.umbrella .canopy,
.umbrella .canopy::after {
    transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
}

We're done!