Cómo crear una interfaz de usuario de conmutador utilizando la máscara CSS

En procesamiento de imagen, enmascaramiento Es una técnica que te permite ocultar una imagen con otro. Se usa una máscara para hacer una porción de una imagen. transparente. Puede realizar el enmascaramiento utilizando CSS con la ayuda de propiedades de enmascaramiento.

En la publicación de hoy, crearemos una imagen enmascarada utilizando dos imágenes PNG y técnicas de enmascaramiento de CSS, y permitiremos a los usuarios manejar los dos estados de la imagen (día y noche) con la ayuda de un interruptor de interfaz de usuario.

Debido a algunos problemas de compatibilidad del navegador, no todas las propiedades de enmascaramiento son compatibles con todos los navegadores (a partir de junio de 2016). Mostraré Dos técnicas para añadir máscaras., Uno para los navegadores basados ​​en Webkit, y uno para Firefox. Los dos primeros pasos en este tutorial de tres pasos son los mismos para cada navegador, pero habrá una diferencia en el tercer paso.

Paso 1. Crear un interruptor básico

Dado que un interruptor típico tiene dos estados con solo uno habilitado a la vez, puedes usar un grupo de botones de radio de dos para crear los componentes de trabajo del interruptor. Coloque cada botón de opción en los extremos izquierdo y derecho de su elemento principal.

Los grupos de botones de radio se crean dando a cada botón de radio lo mismo nombre atributo. En un grupo de botones de radio, solo un botón de radio se puede comprobar a la vez.

Comenzamos con los siguientes HTML y CSS:

HTML

CSS

En el CSS a continuación, usé el posicionamiento absoluto para colocar los botones de radio en la pantalla exactamente donde quiero.

#outerWrapper width: 450px; altura: 90px; relleno: 10px; margen: 100px auto 0 auto; radio del borde: 55px; box-shadow: 0 0 10px 6px #EAEBED; fondo: #fff;  #innerWrapper altura: 100%; radio del borde: 45px; desbordamiento: oculto; posición: relativa;  .radio ancho: 90px; altura: 100%; posición: absoluta; margen: 0; opacidad: 0;  #rightRadio derecha: 0;  .radio: no (: marcado) cursor: puntero;  

Agregué el opacidad: 0 gobernar a la .radio clase para ocultar los botones de radio. La última regla en el bloque de código de abajo, cursor: puntero; muestra el cursor de puntero para el botón de opción sin marcar, para que los usuarios sepan qué botón hacer clic para cambiar el estado del interruptor.

Paso 2. Añadir Skins al Switch

En este paso, añadiremos dos.

etiquetas para las dos máscaras debajo de los botones de radio en nuestro archivo HTML, y una imagen de fondo para cada máscara en nuestro CSS.

Estoy usando "Día" y "Noche" como los dos estados del interruptor, inspirados en un tiro de Dribbble de Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin ancho: 100%; altura: 100%; punteros-eventos: ninguno; posición: absoluta; margen: 0; 

los punteros-eventos: ninguno; La regla se agrega a las máscaras para que los eventos de clic en el interruptor puedan pasar a través de ellos, y llegar a los botones de radio.

Con la propiedad CSS de punteros-eventos puede establecer las circunstancias bajo las cuales un elemento gráfico puede ser dirigido por eventos del mouse.

Como alternativa al código anterior, dos etiquetas (con imágenes de origen) dentro de la

Las etiquetas también pueden funcionar. Serán los pieles para los dos estados de cambio.

Paso 3a. Añadir máscara (versión Webkit)

Para Chrome y otros navegadores basados ​​en Webkit, usaré el imagen de máscara Propiedad CSS, que a partir de la redacción de esta publicación solo funciona con el -webkit Prefijo en los navegadores webkit. los imagen de máscara la propiedad te permite especifique la imagen para ser utilizado como el máscara.

En general, hay dos tipos de enmascaramiento: luminancia y alfa.

• En enmascaramiento de luminancia, la parte oscura de la imagen de la máscara oculta la imagen que está ocultando: la parte más oscura está en la imagen de la máscara, cuanto más oculta está esa porción en la imagen enmascarada.
• En enmascaramiento alfa, la parte transparente de la imagen de la máscara oculta la imagen que está ocultando: cuanto más transparente esté una parte en la imagen de la máscara, más oculta estará la parte en la imagen que está enmascarada.

En Chrome (a partir de la versión 51.0.2704.103, Win10), solo alfa parece funcionar actualmente.

En CSS, alfa y luminancia son los valores de la tipo de máscara propiedad.

Aquí está el CSS que añade una máscara a las imágenes de fondo en los navegadores webkit:

CSS

#nightSkin background-image: url ('night.png'); tipo de máscara: alfa; / * círculo transparente con la parte restante opaca * / -webkit-mask-image: gradiente radial (círculo a 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Cuando se seleccionó la máscara de día * / #leftRadio: marcado ~ # nightSkin mask-type: alpha; / * círculo opaco con la porción restante transparente * / -webkit-mask-image: gradiente radial (círculo a 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

Usé el -webkit-máscara-imagen propiedad para crear la imagen de la máscara inicial. Su valor utiliza la gradiente radial () Función CSS que se utiliza para crear una imagen a partir de una forma predefinida, un degradado radial y el centro del degradado.

Para la piel de la noche, creé un círculo transparente e hice opaca la parte restante del recipiente. Para la piel del día, hice lo contrario: creé un círculo opaco con el gradiente radial () Función, e hizo la porción restante transparente..

Aunque todavía no es compatible con los navegadores Webkit, agregué el tipo de máscara Propiedad del CSS para futuras referencias..

Como puede ver arriba, el borde del círculo no es muy suave. A ocultar los bordes ásperos, Agrega un

después de las pieles en forma de círculo (del mismo tamaño que el círculo de máscara) con una sombra de cuadro. La sombra ocultará los bordes ásperos de la máscara de círculo..

HTML

CSS

#switchBtnOutline width: 90px; altura: 100%; radio del borde: 45px; caja-sombra: 0 0 2px 2px gris, 0 0 10px gris; punteros-eventos: ninguno; posición: absoluta; margen: 0;  / * Coloque #switchBtnOutline en el extremo derecho cuando se selecciona la máscara del día * / #leftRadio: marcado ~ # switchBtnOutline derecha: 0; 

Paso 3b. Añadir máscara (versión Firefox)

los imagen de máscara Propiedad CSS es en realidad un propiedad a mano, y es parte de la propiedad taquigrafía máscara que le permite especificar la imagen que se utilizará como máscara también. Mientras imagen de máscara no es compatible con Firefox todavía, máscara es.

Aunque el máscara propiedad debe aceptar una imagen creada con el gradiente radial () La función CSS como un valor, al igual que el imagen de máscara propiedad hizo, no hay soporte para eso en Firefox todavía.

Entonces, en lugar de una gradiente radial () imagen, vamos a usar una imagen SVG como la imagen de máscara con el tipo de máscara luminancia.

La imagen SVG de arriba parece una combinación de rectángulo blanco y un circulo negro. Añade esto, y otro con una rectángulo negro y un circulo blanco Como máscaras al HTML que usamos en la versión Webkit..

HTML

Reemplace (o combine con) el código CSS para #noche de piel Lo usamos en la versión Webkit con el siguiente código. Y tu estas listo.

Ahora tenemos dos imágenes de máscaras diferentes (gradiente de CSS y SVG), dos tipos de máscaras diferentes (Alfa y luminancia) y compatibilidad con Webkit y Firefox.

CSS

#nightSkin background-image: url ('night.png'); tipo de máscara: luminancia; máscara: url (#leftSwitchMask);  #leftRadio: check ~ # nightSkin mask-type: luminance; máscara: url (#rightSwitchMask); 

Echa un vistazo a la demostración

• Manifestación
• Descargar fuente

Cómo crear un punto de restauración del sistema en Windows 7

Cómo crear un punto de restauración del sistema manualmente en XP

Cómo crear una contraseña segura (y recordarla)