Grace Samson 
Hello friends today we gonna learn about How to Design Switch UI with CSS Mask. So read this article, How to Design Switch UI with CSS Mask step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:
Guide: How to Design Switch UI with CSS Mask
In image processing, masking is a technique that allows you to do that hide an image with someone else. A mask is used to create part of an image transparentYou can mask using CSS using masking properties.
In today’s post, we create a masked image using two PNG images and CSS masking techniques, and allow users to handle the two states of the image (day and night) using a toggle UI .
Due to some browser compatibility issues – not all masking properties are supported in every browser (as of January) – I’ll show you two techniques for adding masks, one for Webkit-based browsers and one for Firefox. The first two steps in these three steps tutorial are the same for every browser, but there will be a difference in the third step.
back to menu ↑Step 1. Make a basic switch
Because a typical switch has two states with only one enabled at a time you can add one radio button group of two to create the working components of the switch. Place any radio button to the left and right of their parent element.
Radio button groups are created by each radio button same name attribute. In a radio button group, only one radio button can be checked at a time.
We start with the following HTML and CSS:
HTML
Step 2. Add skins to the switch
In this step we add two
I use “Day” and “Night” as the two switch modes, inspired by a Dribbble recording by Minh Killy Le.
Day skin
Night skin
HTML
C.S.S
#daySkin {background image: url (‘day.png’);} # nightSkin {background image: url (‘night.png’);}. skin {width: 100%; height: 100%; pointer events: none; position: absolute; margin: 0;}
The pointer events: none; rule is added to the skins so that the click events on the switch can pass, and reach the radio buttons
With the pointer-events CSS property you can set the conditions under which a graphic element can be target of mouse events
As an alternative to the above code, two tags (with source images) within the
Screenshot of switch with chrome skins
Step 3a. Add mask (Webkit version)
For Chrome and other Webkit-based browsers, I’ll be using the mask-image CSS property, which – as of the writing of this post – only works with the -webkit prefix in Webkit browsers. The mask-image property allows you to specify the image to be used like the mask
In general, there are two types of masking: luminance and alpha
- In luminance masking, the dark part of the mask image hides the image that is being masked: the darker a part in the mask image, the more hidden that part is in the image being masked.
- In alpha maskthe transparent part of the mask image hides the image being masked: the more transparent a part in the mask image, the more that part is hidden in the image to be masked.
In Chrome (from version 51.0.2704.103, Win10) only alpha seems to work at the moment.
In CSS, alpha and luminance are the values of the mask-type property.
Here’s the CSS that adds a mask to background images in Webkit browsers:
C.S.S
#nightSkin {background-image: url (‘night.png’); mask-type: alpha; / * transparent circle with remaining part opaque * / – webkit-mask-image: radial-gradient (circle at 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px);}
/ * When day skin selected * / # leftRadio: checked ~ # nightSkin {mask-type: alpha; / * opaque circle with remaining part transparent * / – webkit-mask-image: radial-gradient (circle at 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px );}
I used the -webkit-mask-image property to create the first mask image. Its value uses the CSS radial-gradient () function which is used to create an image of a predefined shape, radial gradient, and the center of the gradient.
For the night skin, I made a transparent circle and made the remaining part of the container opaque. For the day skin, I did the opposite: created an opaque circle with the radial-gradient () function and made the remaining part transparent.
Although it is not yet supported in Webkit browsers, I have added the mask-type property to the CSS for future reference.
Screenshot of switch with selected Night Skin
Screenshot of switch with selected day skin
As you can see above, the edge of the circle is not very smooth. To hide the rough edges, add one
HTML
C.S.S
#switchBtnOutline {width: 90px; height: 100%; border radius: 45px; box-shadow: 0 0 2px 2px gray inset, 0 0 10px gray; pointer events: none; position: absolute; margin: 0;} / * Place #switchBtnOutline on the right side if day skin is selected * / # leftRadio: checked ~ # switchBtnOutline {right: 0;}
Screenshot of switch with hidden edges of the mask circle
Step 3b. Add mask (Firefox version)
The mask-image CSS property is actually a hold by hand, and it is part of the shorthand property mask that allows you to specify the image to also be used as a mask. While mask image is not yet supported in Firefox, mask is.
Although the mask property should accept an image created with the CSS radial-gradient () function as a value, just as the mask-image property did, it is not yet supported in Firefox.
So, instead of a radial gradient image (), let’s use an SVG image as a mask image with luminance of the mask type.
HTML
Replace (or combine with) the CSS code for #nightSkin that we used in the Webkit version with the following code. And you’re done.
We now have two different mask images (CSS gradient and SVG), two different mask types (Alpha & Luminance), and both Webkit and Firefox support.
C.S.S
#nightSkin {background image: url (‘night.png’); mask type: luminance; mask: url (#leftSwitchMask);} # leftRadio: checked ~ # nightSkin {mask-type: luminance; mask: url (# rightSwitchMask);}
back to menu ↑Watch the demo
back to menu ↑How to Design Switch UI with CSS Mask: benefits
- The How to Design Switch UI with CSS Mask tutorial is free .
- This guide already helps so many users follow up with interest in a timely manner.
- The price of the How to Design Switch UI with CSS Mask guide is free.
Faq
Tutorial summary of How to Design Switch UI with CSS Mask
How this tutorial helping you?
What is actual time in which this method complete?
What are the supported Device?
back to menu ↑
Final note
I hope you like the guide How to Design Switch UI with CSS Mask. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.
For our visitors: If you have any queries regards the How to Design Switch UI with CSS Mask, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Design Switch UI with CSS Mask”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Design Switch UI with CSS Mask, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
