How do I make this realistic red switch (pure CSS)

How do I make this realistic red switch (pure CSS)


In the production process, I used a variety of different CSS techniques, including gradients, 3D transformations, animations and transitions. In this tutorial, I will explore some of these techniques in depth.

Demo address: haiyongcsdn.gitee.io/realistic-r...

Simulation state

The switch has 2 states-on and off, but CSS cannot maintain this state.

To solve this problem, we can use one of the native HTML elements. Since we only need to maintain 2 states, the checkbox element is a good choice. We can use

:checked
The CSS selector applies CSS based on whether the check box is checked.

We wrap the whole content in

<label/>
, To link the click event of the entire element to the check box , and then use CSS to hide the check box itself.

< label class = "switch" > < input type = "checkbox" checked/> </label > Copy code
.switch { input { display : none; } } Copy code

One problem is that we can t apply CSS to

<label/>
In itself, because there is no "ancestor selector" in CSS. Therefore, I placed all the switch elements after the checkboxes and used the adjacent sibling selector (+) to apply CSS to them.

< label class = "switch" > < input type = "checkbox" checked/> < div class = "button" > </div > </label > Copy code
.switch { input { display : none; & :checked + .button { //Apply some CSS to .button when the checkbox is checked } } } Copy code

If you need to simulate an element with more than two states, you can use other HTML elements, such as radio buttons (

<input type="radio"/>
). Some people have taken this technology to a new level, creating an entire game using only CSS! Check out this collection of pure CSS games on CodePen for some inspiration.

Make black frame


I use

box-shadow
Frame of mock buttons.
box-shadow
It is a very powerful CSS property because it allows you to stack multiple shadow effects separated by commas.

I used a set of 5 shadow effects to create the frame and used one

border-radius
Attribute to make the shadow rounded at the corners. The breakdown is as follows:

.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 } Copy code

Make a 3D button shape

I use CSS transformations and transformations to make the buttons appear in 3 dimensions.

The button itself consists of 3 divs (1 div and 2 pseudo-elements to be precise), as shown below:

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

I then rotated the entire button 25 degrees and used it

transform-origin
Set the pivot point away from the div so that the button appears to be around a deeper point inside the button instead of rotating 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- 3 d; } } Copy code

Make animation

I use CSS transitions to rotate the switch back and forth. I want to make the transition appear realistic by starting slowly and ending quickly. I could use one of the native easing functions, like ease-in, but that didn t produce the correct animation, so I switched to a custom

cubic-bezier()
Easing function:

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


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

Make I/O characters


I could have used multiple techniques to create I/O characters. I could use real letters and apply styles to them, or use special fonts. But since these are very simple drawing characters, I decided to use gradients to make them.

CSS gradients are great, but I didn't know how powerful they are until I read this excellent article on CSS Drawings .

The true function of gradients comes from the fact that CSS is considered an "image" and therefore can benefit from the function of the background property. The background in CSS can not only be stacked (such as shadow), but also can have a custom position and size!

This means you can do almost all CSS gradients. If you want to know the distance you can take, please check a.singlediv.com/ (all artworks on this website are made by one div).

The syntax is very simple:

background : <Image> <position>/<size> copy the code

You can stack multiple gradients using commas and add

background-repeat: no-repeat
To prevent the gradient from repeating:

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

I made the character using a background with 2 gradients.
For the "I" character, I used all white

linear-gradient()
, And make it narrower and longer. For the "O" character, I used
radial-gradient()
A with 4 color scales, 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 is% 25% ;//White Circle ( "O") copy the code

If you take a look

radial-gradient()
, You will notice that 2% has a gap between each color scale:

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

This allows different colors to blend together instead of having a clear pixelated transition. To illustrate this point, please look at the picture below:


This is the inherent gradient behavior of CSS-when there are gaps between the color stops, it creates a smooth blend between colors.

Make the "LED" fade

As shown in the image above, I stacked 2 gradients to get the appearance of an LED bulb hidden behind translucent red plastic, with small round bumps on it.

I have to use 2 elements, one for each gradient, because the first gradient must be non-repetitive, and the second gradient must be repeated. In addition, I wanted to make the lights "flicker", so I had to separate them.

The first element is the .light element, here I use

aradial-gradient()
To illustrate the red LED light, its center is brighter (the center is orange, and the surrounding environment is red).

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

Don't be

adjust-hue()
with
lighten()
Feeling helpless, I will introduce these in the next part. Now, just think of them as hexadecimal colors.

The second element is

.dots
Element, I used a
radial-gradient()
Repeats with transparent centers to create a matrix of round bumps.

Finally, I use 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 } } Copy code

Control color through variables

With the popularity of this pen, some people asked to view it in different colors. Initially, I hard-coded the color throughout the CSS, so I changed it to a SASS variable for simple configuration.

However, I want the main color to be easy to configure, so having multiple color variants is not good enough. I need to control all colors and shadows through a variable.

In order to achieve this goal, I use SASS's built-in color function:

lighten()
,
darken()
with
adjust-hue()
(SassMe is a good tool for visualizing the output of these functions).

The purpose of lighten() and darken() is self-explanatory. They make a given color lighter or darker according to a given percentage. For example, lighten(black, 50%) mixes black with 50% white to produce gray.


However, for LED lights, lighten() and darken() are not enough, because the center of the light is orange and the surroundings are red. It is not a different color shade, but a completely different color.

That is

adjust-hue()
Where it comes in handy. It allows you to change the hue attribute of a color to a given degree.

The hue of a color is the position of the color on the color wheel, which can be represented by a single value, usually in degrees (0-360).

Therefore, I am used to

adjust-hue()
"Rotate" the hue attribute of the color to 35 degrees to the right:

Hue-ADJUST ($ Color , 35 ) copy the code

Produces this:

Therefore, if the color is red, the color to be rotated will be orange. However, if the color is green, the rotated color will become blue!
So now, you can control all the colors in the switch through a variable

$color
:

General summary

It turns out that this tutorial is a bit longer than I expected, and at first glance, it may be a little overwhelming to understand all the different techniques and techniques used to make this switch. However, when you break it down into basic elements, these techniques are easy to understand.

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

Project address: gitee.com/haiyongcsdn...

Welcome to follow the author's WeChat public account

La la la I really want to order something
Save the identification, you can also report the problems encountered to me on the official account, and I will reply in time when you see it.

In the future, I will continue to update similar free and fun H5 mini games, Java mini games, fun and useful projects and software, etc.

related information

Thank you for reading to the end This is your medal

Finally, don t forget to support it or