{"id":26691,"date":"2016-06-27T21:01:30","date_gmt":"2016-06-27T13:01:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26691"},"modified":"2025-04-24T17:03:41","modified_gmt":"2025-04-24T09:03:41","slug":"css-mask-switch","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-mask-switch\/","title":{"rendered":"How to Create a Switch UI Using CSS Mask"},"content":{"rendered":"

In image processing, masking<\/em> is a technique that allows you to hide an image<\/strong> with another. A mask is used to make a portion of an image see-through<\/strong>. You can perform masking using CSS with the help of masking properties<\/a>.<\/p>\n

In today\u2019s post, we\u2019ll create a masked image using two PNG images and CSS masking techniques, and allow users to handle the two states of the image (day<\/em> and night<\/em>) with the help of a switch UI.<\/p>\n

Because of some browser-compatibility issues \u2014 not all masking properties are supported in every browser (as of June 2016) \u2014 I will show two techniques for adding masks<\/strong>, one for Webkit-based browsers and one for Firefox. The first two steps in this three-step tutorial are the same for every browser, but there will be a difference in the third step.<\/p>\n

Read more: <\/strong>Clipping and masking with CSS<\/a><\/p>\n

Step 1. Create A Basic Switch<\/h2>\n

Since a typical switch has two states with only one enabled<\/em><\/strong> at a time, you can use a radio button group of two<\/strong> to create the working components of the switch. Place each radio button at the left and right ends of their parent element.<\/p>\n

Radio button groups are created by giving each radio button the same name<\/code> attribute. In a radio button group, only one radio button<\/strong> can be checked at a time.<\/p>\n

We start with the following HTML and CSS:<\/p>\n

HTML<\/strong><\/p>\n

\n<div id=\"outerWrapper\">\n    <div id=\"innerWrapper\">\n        <input type=\"radio\" id=\"leftRadio\" class=\"radio\" name=\"radio\" \/>\n        <input type=\"radio\" id=\"rightRadio\" class=\"radio\" name=\"radio\" checked \/>\n    <\/div>\n<\/div>\n<\/pre>\n
CSS<\/strong><\/p>\n
In the CSS below, I used absolute positioning<\/a> to place the radio buttons on the screen exactly where I want.<\/p>\n
#outerWrapper {\n    width: 450px;\n    height: 90px;\n    padding: 10px;\n    margin: 100px auto 0 auto;\n    border-radius: 55px;\n    box-shadow: 0 0 10px 6px #EAEBED;\n    background: #fff;\n}\n\n#innerWrapper {\n    height: 100%;\n    border-radius: 45px;\n    overflow: hidden;\n    position: relative;\n}\n\n.radio {\n    width: 90px;\n    height: 100%;\n    position: absolute;\n    margin: 0;\n    opacity: 0;\n}\n\n#rightRadio {\n    right: 0;\n}\n\n.radio:not(:checked) {\n    cursor: pointer;\n}<\/pre>\n
I added the opacity:0<\/code> rule to the .radio<\/code> class to hide the radio buttons<\/strong>. The last rule in the code block below, cursor: pointer;<\/code> shows the pointer cursor for the unchecked radio button, so users know which button to click to toggle the switch state.<\/p>\n
\"Switch
Screenshot of the switch UI with radio buttons in the Chrome browser<\/figcaption><\/figure>\n
Step 2. Add Skins to the Switch<\/h2>\n
In this step, we\u2019ll add two <div><\/code> tags for the two skins below the radio buttons in our HTML file, and a background image to each skin in our CSS.<\/p>\n
I\u2019m using \u201cDay\u201d and \u201cNight\u201d as the two states of the switch, inspired by a Dribbble shot<\/a> by Minh Killy Le<\/a>.<\/p>\n
\"CSS
Day Skin<\/figcaption><\/figure>\n
\"CSS
Night Skin<\/figcaption><\/figure>\n
HTML<\/strong><\/p>\n
\n    <div id=\"daySkin\" class=\"skin\"><\/div>\n    <div id=\"nightSkin\" class=\"skin\"><\/div>\n<\/pre>\n
CSS<\/strong><\/p>\n
#daySkin {\n    background-image: url('day.png');\n}\n\n#nightSkin {\n    background-image: url('night.png');\n}\n\n.skin {\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    position: absolute;\n    margin: 0;\n}<\/pre>\n
The pointer-events: none;<\/code> rule is added to the skins so that click events on the switch can pass through them<\/strong> and reach the radio buttons<\/strong>.<\/p>\n
With the pointer-events<\/a> CSS property, you can set the circumstances under which a graphic element can be targeted by mouse events<\/strong>.<\/p>\n
As an alternative for the code above, two <img><\/code> tags (with source images) inside the <div><\/code> tags can also work. They will be the skins for the two switch states<\/strong>.<\/p>\n
\"CSS
Screenshot of switch with skins in chrome<\/figcaption><\/figure>\n
Step 3a. Add Mask (Webkit version)<\/h2>\n
For Chrome and other Webkit-based browsers, I will use the mask-image<\/code> CSS property, which \u2014 as of the writing of this post \u2014 only works with the -webkit<\/code> prefix in Webkit browsers. The mask-image<\/a><\/code> property lets you specify the image<\/strong> to be used as the mask<\/em><\/strong>.<\/p>\n
In general, there are two kinds of masking: luminance<\/strong> and alpha<\/strong>.<\/p>\n