El proyecto de hoy va a ser divertido. Vamos a construir una página de demostración HTML / CSS básica, luego agregaremos un botón que permita al usuario alternar el esquema de color de la página entre los estados: día y noche. A medida que los colores cambian, también lo harán otros elementos en la página.
La parte realmente sorprendente es que podemos lograr todo esto utilizando solo CSS. A lo largo del camino, aprenderemos cómo crear un evento de clic impulsado por CSS y cómo manejar pseudo elementos para manipular el contenido de la página.
Lo que estamos construyendo
Básicamente, vamos a tener una etapa muy simple que se puede alternar entre dos estados. El estado por defecto con ser un día? Tema, que utiliza un fondo claro y texto oscuro. ¿El segundo estado con ser una noche? Tema con fondo oscuro y texto claro. Con el clic de un botón, podrás cambiar entre los dos.
"El tema oscuro y claro también mostrará diferentes titulares e imágenes de fondo".No contento con simples cambios de color, quería llevar esta idea aún más lejos, así que también cambiaremos algunas otras cosas. El tema oscuro y claro también mostrará diferentes titulares e imágenes de fondo.
Una vez más, solo para presumir, vamos a realizar toda esta magia sin una sola gota de JavaScript. Empecemos.
Paso 1. Página HTML
Lo primero que vamos a hacer es construir nuestra página de prueba. No es necesario que haya mucho aquí, solo algunos elementos básicos con los que podemos jugar en nuestro CSS. Como puedes ver, utilicé un título, tres párrafos y una imagen.
¿Lo realmente extraño aquí es la imagen de cabecera vacía? div. Normalmente, solo descargo una imagen aquí, pero si queremos poder intercambiar esta imagen en nuestro CSS, tendremos que insertar la foto como imagen de fondo.
Paso 2. CSS de inicio
Antes de profundizar y comenzar a diseñar piezas específicas de nuestro marcado, tenemos mucho que hacer. Primero, vamos a utilizar tamaño de caja de borde para hacer nuestras relaciones de tamaño un poco más fáciles de manejar. Esto manipula el modelo de caja CSS para que el ancho específico de un objeto realmente incluya relleno y bordes.
A continuación, agregué una transición a todo en la página. Esto es ciertamente no recomendado para páginas web serias, pero para nuestra pequeña demostración divertida, es la manera perfecta de asegurarse de que la transición de encendido / apagado de las luces esté animada.
Para terminar, simplemente definí los tamaños y el relleno para los contenedores de la página. Tenga en cuenta que si queremos usar altura: 100% sobre el principal clase, entonces tenemos que asegurarnos de que tanto el cuerpo como el HTML también estén configurados para ocupar todo el alto de la página.
Paso 3. Encabezado CSS
Ahora es el momento de comenzar a diseñar los elementos específicos de la página. Comenzaremos con nuestro titular. Centrarlo, darle una familia de fuentes y transformarlo en mayúsculas. A continuación, aquí es donde las cosas se ponen interesantes, use un pseudo-elemento para agregar la palabra? On? Después del texto insertamos en nuestro HTML.
Los pseudo elementos parecen un poco complicados cuando empiezas, pero es importante entender exactamente lo que está sucediendo aquí. Esencialmente, nuestro HTML establece un titular con la palabra? Lights? y nuestro CSS luego salta y agrega la palabra "On".
Para una explicación completa de los pseudo elementos, echa un vistazo a "The Lowdown on: Before y: After in CSS".
Etapa 4. Párrafo CSS
Los siguientes son los tres párrafos debajo del titular. Estos deben flotar a la izquierda, establecerse en un tercio del ancho del padre y luego borrarse. También hay algunos ajustes visuales aquí, pero todo es bastante sencillo.
Paso 5 Big Photo CSS
Para finalizar la página de demostración, asigne una imagen de fondo a la imagen de cabecera Clasifica y define las dimensiones. Como de costumbre, estoy tomando una imagen de LoremPixel.
Control del progreso
En este punto, su página debe verse como la imagen de abajo. En general, no es muy impresionante? ¡todavía!
Paso 6 Interruptor de luz HTML
Ahora que tenemos una demo con la que trabajar, es hora de instalar un "interruptor de luz". que es una forma elegante de decir que vamos a lanzar un botón que cambia algunos estilos en la página. El truco para hacer esto con CSS puro se describe en gran medida en una publicación anterior, "Uso de casillas de verificación para alternar entre CSS y Crear eventos de clic".
En esa publicación, aprendimos cómo secuestrar una casilla de verificación y doblarla a nuestra voluntad.No es la técnica más semántica, pero definitivamente es una maravilla para jugar. Para comenzar esta fiesta, agregue una entrada de etiqueta y casilla de verificación en la parte superior del cuerpo en su HTML.
Paso 7 Interruptor de luz CSS
Básicamente, lo que vamos a hacer aquí es ocultar la casilla de verificación y diseñar la etiqueta para que parezca un botón. La razón por la que esto funciona es que, en HTML, se puede hacer clic en la etiqueta de una casilla de verificación como la propia casilla para alternar el estado de encendido / apagado.
Para lograr esto, configure la visualización de etiquetas en "bloque", luego establezca una altura, anchura, color de fondo, alineación de texto, fuente y margen como abajo. También tenga en cuenta que he establecido la posición en "fijo," que permite que el interruptor de luz permanezca visible a medida que se desplaza por la página. Sobre la marcha, simplemente cambiamos los colores alrededor.
Para terminar, usamos la posición absoluta en la casilla de verificación y la empujamos hacia la tierra de nadie, ocultándola de la página.
Control del progreso
Esto nos da un pequeño botón que sangra del lado izquierdo de la página. Aquí hay una foto de los dos estados que hemos creado:
Paso 8. Cambiar el color de fondo
Ahora que tenemos configurado nuestro interruptor de luz, es hora de apuntarlo en nuestro CSS y definir el?: ¿Marcado? estado. El verdadero vudú aquí es que podemos agregar otros selectores y cambiar casi cualquier cosa en nuestra página de demostración cuando se hace clic en el botón. Vamos a empezar cambiando el color de fondo de la página:
Aquí usamos el combinador de hermanos adyacentes, que está listo para agarrar cualquier? principal? Clase que sigue inmediatamente a nuestro interruptor de luz comprobado. Esto efectivamente hará que el color de fondo se vuelva oscuro cuando el interruptor está apagado.
El truco
La parte peculiar aquí es que tienes que vincular el segundo selector a la casilla de verificación de alguna manera porque realmente todo constituye un selector complicado (y probablemente bastante ineficiente). Por ejemplo, no podíamos simplemente agarrar el cuerpo, sino que tuvimos que usar un selector de hermanos que definía la relación entre la casilla de verificación y otro elemento. También puede sacar esto con la combinador de niños, que veremos en el siguiente paso.
Paso 9. ¡Cambia muchas cosas!
Ahora que sabemos cómo usar el interruptor de luz para cambiar elementos en la página, podemos volvernos locos. ¡Aquí cambio el color del texto, el color de fondo e incluso la imagen de fondo a una foto nocturna! También cambié el h2: después ¿Texto para leer? ¿Para que el titular alterne entre? Lights On? y? luces apagadas? mientras juegas con la palanca. ¡Muy genial!
Esto nos da un bonito tema oscuro que el usuario puede elegir activar.
Verlo en vivo
Todo nuestro arduo trabajo ha dado sus frutos, no es el momento de ver los frutos de nuestro trabajo. Asegúrese de hacer clic en el interruptor de la luz de la izquierda para ver el efecto. Además, bifurca la demostración en CodePen y ¡muéstranos cómo lo harías aún mejor!
Manifestación: Haga clic aquí para lanzar.
Conclusión
Hoy llevamos a cabo muchos trucos sofisticados de CSS con muy poco esfuerzo. Creamos un evento de clic mediante el secuestro de una casilla de verificación, utilizamos pseudo elementos cambiantes y cambiamos el aspecto general de una página.
Como siempre, gracias por leer. Espero que hayas aprendido algunas cosas en el camino, ¡siempre lo hago!