Interruptor CSS

El conmutador en CSS se usa para permitir al usuario elegir entre dos estados: encendido y apagado. También cambiamos el interruptor hacia la izquierda o hacia la derecha. Estos interruptores se pueden encontrar en nuestros sitios web, aplicaciones móviles y software. Los interruptores se utilizan cuando necesitamos apagar algo o encender, o cuando elegimos sí o no. Podemos crear interruptores de diferentes formas y tamaños en CSS.

Ejemplo 1:

Desarrollamos algunos códigos HTML para hacer los interruptores y diseñarlos con CSS. El código de Visual Studio se utiliza para demostrar los ejemplos presentados. Como resultado, abrimos el nuevo archivo y seleccionamos el "HTML" como el idioma.Esto da como resultado la producción de un archivo HTML. Luego, comenzamos a escribir un código en el archivo que se creó. Cuando terminamos, guardamos el código con el ".Extensión del archivo HTML ". Después de eso, en este código, diseñamos un interruptor que indica o enciende. Nos permite encender o apagar el interruptor. Ahora, pasamos al código CSS para dar este interruptor con algunos diseños.

Utilizamos la propiedad "Alineación de texto" para el "cuerpo". Entonces, todo el cuerpo del HTML se representa en el "centro" de la página. También cambiamos el "color" de nuestro rumbo a "verde". Entonces, diseñamos el "Toggle". Hacemos esto usando la "alternar" y las propiedades de estilo. La "posición" de esta palanca está configurada en "relativo". Utilizamos el "bloque en línea" como la "pantalla". Su "ancho" y "altura" se establecieron de manera similar en "100px" y "52px", respectivamente. El "color de fondo" de esta palanca es "rojo" y su "radio fronterizo" es "30px", lo que indica que sus bordes son curvos.

Luego, agregamos un "borde" alrededor de este botón de palanca con un ancho de "2px" y un color "gris". Después de diseñar esto, usamos el selector "After" con este "Toggle". Como todos sabemos, al usar el selector "After" en CSS, debemos tener un "contenido."Para establecer la" posición "de este contenido en" absoluto "y el" ancho "y" altura "a" 50px "cada uno. Esta vez, el "color de fondo" está configurado como "gris".

Para cada uno de ellos, también establecemos la "superior" y la "izquierda" en "1px". Usamos la "transición" en este "0.5s ”alternar. El estilo para el "Toggle: After" ahora está completo. Usamos dos propiedades dentro de los aparatos ortopédicos rizados de "P" para diseñar el párrafo un poco más. Simplemente actualizamos la "familia de fuentes" del párrafo a "Arial" y usamos la propiedad "Font-Weight" para "Bold". Cuando se verifica esta palanca, cambiamos la propiedad "izquierda" a "49px" para que se mueva a "49px". También cambiamos su color a "verde". Además, establezca "Ninguno" para la "Pantalla" de la "casilla de verificación".

El interruptor está "apagado" y el color es "rojo" en esta captura de pantalla. Ahora, tenemos una siguiente captura de pantalla:

El interruptor está "encendido" y es de color "verde" en la segunda captura de pantalla. La palabra "apagado" se imprime en el lado izquierdo del interruptor. Si queremos apagarlo, simplemente hacemos clic en él y lo cambiamos hacia el lado derecho.

Ejemplo #2:

En este ejemplo, creamos dos interruptores. Estos son diferentes del interruptor anterior que creamos en el primer ejemplo. Hacemos dos interruptores aquí.

Estilamos el cuerpo utilizando las diferentes propiedades. Establecemos el "dimensionamiento de la caja" en "border border" y utilizamos la propiedad "fuente-familia" y usamos la fuente "Arial" para esto. También establecemos el tamaño en "100%". Usamos los selectores "*" con "después" y "antes" para que seleccione todos los elementos y aplique la propiedad dada a todos. "Heredamos" el "tamaño de caja". Y el "relleno" y el "margen" están configurados en "0". Ahora, diseñamos el "medio" utilizando la propiedad "Display" como "Flex". Utilizamos el "centro" para "alinearse" y "justificar contenido". Establecimos el tamaño de la fuente "1em" para el "contado".

Luego, diseñamos el "rockero", que es el primer interruptor. La "pantalla" para esto es "bloque en línea" y su "posición" es "relativa". El "tamaño de fuente" para el primer interruptor es "2EM" y se debe "a negrita" en su "peso de fuente". El "Text-Align" es SE a "Center" y la "transformación de texto" se establece en el "Eppercase". El "color" está configurado en "gris". El "ancho" y la "altura" se establecen en "7em" y "4em", respectivamente. El "exceso de flujo" está "oculto". El "fondo de la frontera" es "0.5em ". Y twe establece el color "blanco" al tipo "sólido".

Luego, viene el "rockero-pequeño" que es el segundo botón. Para esto, establecemos el "tamaño de la fuente" en "0.75em "y su" margen "en" 1em ". Utilizamos el selector de "antes" con nuestro primer Switch "Rocker". Y coloque el "contenido" porque es obligatorio al usar el selector "Antes" y "After". Luego, establecemos su "posición" en "Absoluto". Su "superior" está configurado en "0.5em ". La "izquierda", "derecha" y "Bottom" están configuradas en "0". Su "fondo" es "gris", el "borde" es "blanco", el ancho es "0.5em "y" sólido "en tipo. El "Bottom-Border" es "0".

Ahora, usamos la "entrada de rocker". Para esto, establecemos la "opacidad", "ancho" y "altura" en "0". Ahora, diseñamos el "Switch-Left" y "Switch-Right" en los mismos aparatos ortopédicos. Establecemos su "cursor" en "puntero" y la "posición" es "absoluta". La "pantalla" que establecemos es "Flex". El "alineado-Ítem" y el "justify-contento" están configurados en el "centro". La "altura" que establecemos aquí es "2.5em "y el" ancho "es" 3em ". Debemos establecer la "transición" para esto en "0.2s ".

Ahora, usamos por separado el "Switch-Left" y "Switch-Right" en los que usamos la propiedad "Transformar". Para esto, primero establecemos la "altura", "ancho", "izquierda" e "fondo" a "2.4em "," 2.75em "," 0.85em "y" 0.4em ”, respectivamente. Agregamos el "color de fondo" a "#DDD". Y usamos la propiedad "transformar" y "rotarlo" a "15deg" y "sesgarla" a "15deg". Ahora, tenemos el "Switch-Right" y diseñamos esto estableciendo la propiedad "correcta" en "0.5em "y establece su" fondo "en" 0 ". El "fondo" está configurado en "rojo". En el fondo "rojo", establecemos la propiedad "blanca" para la fuente "color". Usamos el selector "antes" con "Switch-Left" y "Switch-Right". Entonces, para este selector de "antes", usamos el "contenido". Su "posición" está configurada en "Absoluto".

Luego también establecemos su "ancho", "altura" y "fondo". El "color de fondo" aquí es "#CCC" y usamos la propiedad "Transformar" y "Skewy (-65deg)". Ahora, establecemos la propiedad "izquierda" en "-0.4EM "dentro usando el selector" Antes "con el" Switch-Left ". También usamos el selector "Antes" con el "Switch-Right" por separado y establecemos la propiedad "Right" en "-0.375em ". Su "color de fondo" es "transparente" y usamos la "transformación" a "skewy" a "65deg".

Ahora, creamos un efecto cuando se "verifica". El "color de fondo" es "transparente" y su ancho cuando se verifica se establece en "3.0833em ". Luego, usamos "marcado" con "Switch-Left" y "Switch-Right". Diseñamos o diseñamos esto agregando el "color de fondo" y la fuente "color" y estableciéndolos como "#DDD" y "#888". Aquí, los selectores "Bottom" y "Right" están configurados en "0.4em "y" 0.8em ". Luego, usamos las peropertias "transformar" y "rotar" y "sesgarlo" a "-15deg" para ambos. Usamos la propiedad "marcada" con "Switch-Left" y "Switch-Right". Y use el selector "Antes" dentro de los aparatos ortopédicos rizados y establezca su "color de fondo" en "#CCCC". Luego, establecemos el "color" de la fuente en "blanco" cuando se verifica y "gris" antes de que se revise.

La salida hace que dos interruptores: el primer interruptor tiene encendido/apagado y el segundo interruptor tiene sí/no. En la primera imagen, puede ver que el primer interruptor está "encendido" y su color es "verde", mientras que el segundo interruptor está en el "no" y su color es "rojo".

En la segunda imagen, verificamos el primer interruptor a "apagado" y el segundo cambio a "sí". Entonces, el primer interruptor aparece "apagado" y "rojo". El segundo interruptor es "sí" esta vez, y parece "verde".

Conclusión

Creamos este tutorial para mostrarle qué es un interruptor y cómo diseñar y diseñar un interruptor en CSS. Como se indicó anteriormente, el interruptor se usa para elegir entre encendido y apagado, así como sí/no. Miramos los dos ejemplos diferentes hasta ahora, y hemos pasado por todas las propiedades. Después de experimentar con los códigos en este tutorial, podrá comprender cómo funcionan los conmutadores en CSS y cómo construir interruptores para su sitio web o proyectos con facilidad.