Interruptor de palanca CSS
Ejemplo 1
Escribiremos algún código HTML para crear y diseñar interruptores de palanca en CSS. Para demostrar los ejemplos dados, estamos utilizando el código Visual Studio. Como resultado, abriremos el nuevo archivo y elegiremos el idioma "HTML", que sigue creando un archivo HTML. Luego comenzamos a escribir el código en el archivo creado aquí. Tenemos que guardar este código cuando esté terminado y el ".La extensión del archivo HTML "se agrega automáticamente al nombre del archivo. También creamos algún texto que queremos presentar en negrita, por lo que estamos usando ""Y escribe la línea dentro de estos""Etiquetas de apertura y cierre. Después de esto, crearemos un interruptor de palanca aquí en este código que representa fuera o encendido. Nos permitirá apagar o en el interruptor. Ahora, nos estamos moviendo hacia el código CSS para dar algo de estilo a este interruptor de alternativa.
Primero, alineamos todos los elementos del cuerpo utilizando "Alineación de texto" al "centro" y aplicamos esta propiedad al "cuerpo."Entonces, cambie el" color "del encabezado a" verde "para hacerlo atractivo. Ahora tenemos que diseñar el "Toggle."Usamos" alternar "y luego usamos las propiedades de estilo aquí. La "pantalla" que estamos usando aquí es "bloque en línea."También establecemos su" ancho "y" altura "en" 100px "y" 52px ", respectivamente. El "color de fondo" de esta palanca es "rojo", y su "radio fronterizo" es "30px", por lo que sus bordes son curvos.
Luego también establecemos un "borde" alrededor de este botón de palanca de ancho "2px" en tipo "sólido" y también en color "gris". Después de diseñar esto, vamos a usar el selector "After" con esta "palanca", y como sabemos que debemos tener "contenido" cuando usamos este selector de "después" en CSS. Después de este contenido, estamos configurando su "posición" aquí en "Absoluto", y el "ancho" y la "altura" son "50px" cada uno. Esta vez el "color de fondo" es "gris."También establecemos su" superior "y" izquierda "en" 1px "para cada uno de ellos. Estamos aplicando la "transición" en esta palanca de "0.5s ". El estilo para el "Toggle: After" se completa aquí, y peinaremos el párrafo un poco usando dos propiedades dentro de los aparatos ortopédicos de "P."
Simplemente cambiamos su "Fuente-Familia" a "Argelina" y luego "en negrita" este párrafo usando la propiedad "Font-Weight". Estamos configurando la "izquierda" en "45px" para que se mueva "45px" cuando se verifica esta palanca. Y su color cambia a "verde."Además, configure esta" pantalla "de la" casilla de verificación "en" ninguno."
También mostramos este interruptor en la salida a continuación, y en la primera salida, puede ver que tenemos dos posibilidades aquí en este interruptor. En esta captura de pantalla, el interruptor está "apagado", y su color es "rojo."
En la segunda captura de pantalla, este interruptor está "encendido", y es de color "verde". El apagado está escrito en el lado derecho del interruptor, por lo que si queremos apagar este interruptor, entonces hacemos clic en este interruptor para moverlo al lado derecho para apagar este interruptor.
Ejemplo 2
En el segundo ejemplo, crearemos dos interruptores de palanca diferentes. Creamos dos interruptores Un Switch se llama "Suscripción", y el otro Switch se llama "Boletín" aquí. Luego peinaremos estos interruptores en el archivo CSS.
Estamos diseñando el "cuerpo" del HTML, por lo que establecemos su "margen" y "relleno" en "0", y el color de fondo para esto es "negro", como aquí, "#151515" es el código para el negro."Estamos estableciendo el Div, que se llama" Centro ", al centro" absoluto "de" posición ", por lo que todos los elementos dentro de este div en el" centro "de la página. La "superior" e "inferior" del centro de posición absoluta se establece como "50px" para cada uno, y luego usamos la propiedad "Translate-Translate" a "(-50px, -50px)".
Cuando usamos todos estos, todos los elementos se establecen en el centro verticalmente y horizontalmente. Luego, diseñamos la "entrada [tipo = casilla de verificación]" usando esto. El "margen" que usamos para esto es "10px" y "relativo" en "posición."El" ancho "de esta casilla de verificación es" 120px "y también" 40px "en su altura. También establecemos su "Apariencia webkit" en "Ninguno."Estamos utilizando su" fondo "en la forma de" gradiente lineal ". El "esquema" para esto también es "ninguno", y para hacer su curva de bordes, estamos utilizando la propiedad "Border-Radius" aquí y la establece en "20px". Aplicamos la "Caja de sombra" y establecemos su valor en "0 0 0 4PX". Luego diseñamos la casilla de verificación cuando se verifica y establecemos su "fondo" en "gradiente lineal", que es "0deg" y "naranja."Usamos la misma" sombra de caja "aquí que usamos anteriormente, y esto es para el" enésimo de tipo (1) ". El "enésimo de tipo" es un selector para seleccionar uno o más elementos. También diseñamos la casilla de verificación marcada para el "enésimo de tipo (2)" y establecemos su "fondo" en el "gradiente lineal" de "0deg" y "azul."También diseñamos la casilla de verificación cuando no se verifica. Entonces, aquí usamos el selector de "antes", y el selector de "después" o "antes" debe tener un "contenido."La" posición "que establecemos aquí es" absoluta ", y su" superior "es" 0 "y también lo mismo para la" izquierda."Es" 80px "en su" ancho "y" 40px "en" altura."Nuevamente usamos el" gradiente lineal "para el" fondo."Esta vez usamos color" negro "y" gris ". También usamos la propiedad "transformar" y "escala" a X, y como "0.98, 0.96 ". Establecemos su propiedad de "transición" en "0.5s ". La "izquierda" está configurada en "40px" antes de ser revisado. También usamos el selector "After" y también diseñamos esto.
Dentro de esta selección de "después", primero establecemos el "contenido" y su "posición" como "absoluta."Su" superior "se establece como" 50% - 2px "y" izquierda "es" 70px ". También establecemos su "ancho" y "altura" en "4px" cada uno. Establecemos su "fondo" y usamos "gradiente lineal" aquí nuevamente. Aquí se aplica el "50%" del "Radio fronterizo", por lo que sus bordes aparecen en forma de curva. La propiedad de "transición" también está establecida en "0.5s ", que se usa para controlar una velocidad de animación de 0.5 segundos. En el selector "After", la "izquierda" se establece en "110px".
Queremos diseñar los encabezados usando "H1" y usar algunas propiedades aquí. El "margen" es "0", y el "relleno" también es "0". Utilizamos la "familia de fuentes" "sans-serif" para estos encabezados. Además, alinee estos encabezados con el "centro."El" color "de la fuente de estos encabezados es" blanco "y" 16px "en tamaño. También configuramos el "relleno" superior en "15px" y "0px" para la izquierda y la derecha. Usamos "Case superior" para que el texto de los encabezados se convertirá en mayúsculas, y el "espacio-espacio de letras" es "4px" para todos los encabezados.
Hemos proporcionado dos capturas de pantalla aquí como salida. La primera salida se muestra antes de que se verifique este interruptor de palanca, y la segunda captura de pantalla es cuando verificamos ambos interruptores de palanca.
Conclusión
Hemos presentado esta guía para explicar el interruptor de palanca en CSS y cómo diseñar y diseñar el interruptor de palanca en CSS. Hemos discutido que usamos el interruptor de palanca cuando queremos elegir entre encendido/apagado y sí/no. Hemos explorado dos códigos aquí y hemos explicado todas las propiedades que usamos en nuestros códigos en detalle. Después de probar los códigos en esta guía, aprenderá fácilmente cómo funcionan estos interruptores de alternancia en CSS y cómo diseñará interruptores de alternancia en su sitio web o proyectos.