How to Design Switch UI with CSS Mask

radio buttons

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

back to menu ↑

Step 2. Add skins to the switch

In this step we add two

tags for the two skins underneath the radio buttons in our HTML file and a background image for each skin in our CSS.

I use “Day” and “Night” as the two switch modes, inspired by a Dribbble recording by Minh Killy Le.

switch day skinDay skinswitch between night skinNight 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

tags also work. They will be the skins for the two switch states

switch with backgroundScreenshot of switch with chrome skins

back to menu ↑

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.

switch with left maskScreenshot of switch with selected Night Skinswitch with right maskScreenshot 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

after the skins in the shape of a circle (the same size as the mask circle) with a box shadow. The shadow hides the rough edges of the circle mask.

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;}switch with button shadowScreenshot of switch with hidden edges of the mask circle

back to menu ↑

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.

SVG image (white rectangle and black circle for the mask)

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.

back to menu ↑

Faq

Tutorial summary of How to Design Switch UI with CSS Mask

In this guide, we told you about the How to Design Switch UI with CSS Mask; please read all steps so that you understand How to Design Switch UI with CSS Mask in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Design Switch UI with CSS Mask, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Design Switch UI with CSS Mask tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


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.

Compsmag
Logo
Shopping cart