¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez desarrollaremos la aplicación de una casa inteligente con TailwindCSS.
Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉
Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:
Recuerda que en la segunda parte de este reto haremos las animaciones de esta casa inteligente: Animaciones con TailwindCSS.
Para este reto te propongo que realices los siguientes 8 pasos:
💡 Recomendación: Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Solo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.
ʕ•́ᴥ•̀ʔっ ¡Empecemos!
Lo primero que debemos hacer (antes de comenzar a escribir código) es tener una comprensión general del diseño y de los elementos. Para lograrlo puedes dividir el diseño en mini estructuras y darles un nombre para que te sirva de guía más adelante.
En nuestro caso, la división del diseño en mini estructuras a nivel general quedaría de la siguiente forma:
💡 Esta división no tiene que ser algo muy elaborado, simplemente es una guía para identificar visualmente los elementos y saber por donde arrancar.
Normalmente comenzamos con la maquetación de los elementos más grandes (como layouts y contenedores) y luego se abordan los elementos más pequeños (como botones, íconos, textos, etc). Además de facilitar muchísimo la maquetación de sitios web, esto también permite que nuestro código sea escalable a futuro.
Lo que te propongo, teniendo en cuenta lo anterior, es comenzar creando la maquetación de afuera hacia adentro, es decir, primero el layout (el componente principal que va a contener el modal), luego el contenedor del modal y luego los elementos dentro del modal. Así organizaremos bien nuestras estructuras de HTML y también se nos facilitará muchísimo trabajar con la versión del diseño en mobile.
La maquetación de nuestra aplicación inteligente la haremos con TailwindCSS, un framework de CSS que nos brinda una gran cantidad de clases de CSS para poder hacer nuestros sitios web de una forma mucho más rápida. Esto quiere decir que no tendemos que escribir código CSS (solo en algunos casos), sino únicamente añadir las clases de CSS que Tailwind ya tiene disponibles a nuestro HTML y listo.
Para comenzar a trabajar con TailwindCSS debemos seguir algunos pasos para su instalación. Para ello, te recomiendo tomar la clase sobre Creación del proyecto e instalación de Tailwind del Curso Básico de Tailwind donde nuestra profe Ana nos enseña paso a paso cómo realizar esta configuración. También pueds seguir los pasos de instalación de la documentación oficial de TailwindCSS.
💡 Si solamente quieres explorar TailwindCSS y saber cómo funciona, te recomiendo utilizar Tailwind Play, una herramienta que te permite usar TailwindCSS de forma online.
Una vez tengas toda la configuración lista, podemos comenzar con la maquetación de nuestra aplicación.
Antes de comenzar con la maquetación del layout principal, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:
Para construir este layout hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Centrar vertical y horizontalmente el modal en un futuro | display: grid y place-items: center |
Tener una imagen de fondo | background-image: url('../image.png') |
Centrar la imagen de fondo | background-position: center |
Hacer que la imagen ocupe todo el tamaño disponible sin dañar sus proporciones | background-size: cover |
Añadir un espacio entre él y el modal del futuro en mobile | padding: 2rem |
Quitar el espacio entre el layout y el modal en desktop | padding: 0 dentro de un media query como @media (min-width: 1024px) |
Evitar que al añadir el espacio entre él y el modal no aumente las dimensiones del layout y nos genere scoll horizontal y vertical | box-sizing: border-box |
Darle un ancho del 100% | width: 100% |
Darle un alto mínimo que tenga el mismo alto de la pantalla del usuario | min-height: 100vh |
Una vez conocemos cuáles son las propiedades que nos ayudarán a conseguir el resultado que necesitamos en nuestro layout principal, debemos hacer una analogía entre esas propiedades y valores vs. las clases de CSS que TailwindCSS nos provee.
Por ejemplo, si quiero usar padding: 2rem
, lo ideal es que no escribamos esto en CSS (es decir, que no tengamos un archivo de estilos en donde tengamos que poner div { padding: 2rem }
) sino que busquemos en la documentación de TailwindCSS, cuál sería la clase equivalente a padding: 2rem
para poder añadirla en nuestro HMTL.
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
display: grid | grid |
place-items: center | place-items-center |
background-position: center | bg-center |
background-size: cover | bg-cover |
box-sizing: border-box | box-border |
min-height: 100vh | min-h-screen |
width: 100% | w-full |
padding: 2rem | p-8 |
@media (min-width: 1024px) { padding: 0 } | lg:p-0 |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<div class="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0">
<!-- Aquí va el modal --></div>
Para este caso, lo único que nos hace falta es la imagen de fondo de la clase bg-plant
. Para ello, debemos modificar la configuración de TailwindCSS (ya que es una imagen que no provee TailwindCSS por defecto) para añadir una clase propia (custom), así:
module.exports = {
content: ['./public/index.html', './src/**/*.{html,js}'],
theme: {
extend: {
backgroundImage: {
'plant': "url('https://images.pexels.com/photos/916339/pexels-photo-916339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')",
}
}
},
plugins: [],
}
La imagen de la planta la tomé de Pexels.
Y para decirle a nuestro body que no tenga margin y que tenga la fuente Popins podemos añadir CSS así:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
También podemos agregar la clase
m-0
en la etiqueta body y añadir la fuente a la configuración de TailwindCSS. 😉
Revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:
Hagamos nuevamente una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Ubicar los elementos futuros (textos y contenedor del plano y cards) de forma vertical | display: flex y flex-direction: column |
Añadir un espacio entre el modal y el contenedor de los elementos del futuro | padding: 2rem |
Quitar el espacio entre el modal y el contenedor en mobile ya que el espacio es más pequeño | padding: 0 dentro de un media query como @media (min-width: 1024px) |
Evitar que al añadir el espacio entre el modal y el contenedor no aumente las dimensiones del layout y nos genere scoll horizontal y vertical | box-sizing: border-box |
Darle un ancho máximo de 1024px | max-width: 1024px |
Darle un ancho del 100% del tamaño del contenedor en desktop | width: 100% |
Darle un ancho de un poco más de la mitad del tamaño del contenedor en mobile | width: 66.666667% |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
display: flex | flex |
flex-direction: column | flex-col |
padding: 2rem | p-8 |
@media (min-width: 1024px) { padding: 4rem } | lg:p-16 |
box-sizing: border-box | box-border |
max-width: 1024px | max-w-screen-lg |
width: 100% | w-full |
width: 66.666667% | w-8/12 |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<div class="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12">
<!-- Aquí van los elementos del modal --></div>
Nuestro anterior HTML junto con el HTML del layout principal, se vería de la siguiente manera:
<divclass="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0"><divclass="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12"><!-- Aquí van los elementos del modal --></div></div>
Como puedes notar, hay una clase de CSS llamada glassmorphism
que no corresponde a TailwindCSS, sino que la creamos nosotros para añadir el efecto de vidrio al modal.
Este efecto de vidrio lo podemos conseguir con el generador de efecto glassmorphism en donde puedes cambiar el valor del blur y la transparencia hasta lograr el efecto que más te guste.
En mi caso, usé los valores por defecto del generador, así:
.glassmorphism {
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 08px32px0rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
En este tutorial puedes aprender un poco más sobre el efecto Glassmorphism con CSS: # Crea tu planeador semanal con CSS Grid, Flexbox y Glassmorphism 💪
Revisemos el resultado final:
Hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían construir el primer texto:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Un tamaño de fuente de 1rem en mobile | font-size: 1rem |
Un tamaño de fuente de 1.25rem en dekstop | font-size: 1.25rem dentro de un media query como @media (min-width: 1024px) { ... } |
Quitarle la márgen superior que tienen los párrafos por defecto | margin-top: 0px |
Darle un espacio entre él y el texto de abajo | margin-bottom: 0.5rem |
Centrar el texto | text-align: center |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
font-size: 1rem; line-height: 1.5rem | text-base |
@media (min-width: 1024px) { … } | lg: |
font-size: 1.25rem; line-height: 1.75rem; | text-xl |
margin-top: 0px | mt-0 |
margin-bottom: 0.5rem | mb-2 |
text-align: center | text-center |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<pclass="text-base lg:text-xl mt-0 mb-2 text-center">You are controlling</p>
Para construir el segundo texto, hagamos otra lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Un tamaño de fuente de 1.5rem en mobile | font-size: 1.5rem |
Un tamaño de fuente de 2.25rem en desktop | font-size: 2.25rem dentro de un media query como @media (min-width: 1024px) { ... } |
Quitarle la márgen superior que tienen los títulos por defecto | margin-top: 0px |
Centrar el texto | text-align: center |
Darle un grosor al texto | font-weight: 700 |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
font-size: 1.5rem; line-height: 2rem | text-2xl |
@media (min-width: 1024px) { … } | lg: |
font-size: 2.25rem; line-height: 2.5rem | text-4xl |
margin-top: 0px | mt-0 |
text-align: center | text-center |
font-weight: 700 | font-bold |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<h1class="text-2xl lg:text-4xl m-0 text-center font-bold">Main Lounge & Dining Room</h1>
Nuestro anterior HTML junto con el HTML de los pasos anteriores se vería de la siguiente forma:
<divclass="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0"><divclass="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12"><pclass="text-base lg:text-xl mt-0 mb-2 text-center">You are controlling</p><h1class="text-2xl lg:text-4xl m-0 text-center font-bold">Main Lounge & Dining Room</h1><!-- Aquí va el plano y el contenedor de las cards --></div></div>
Antes de comenzar con la maquetación del plano y el contenedor de las cards, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:
Para construir el contenedor del plano y el contenedor de las cards, hagamos una lista de lo que necesitamos hacer junto con las propiedades y… sí, ya lo sabes 😅… véamos cómo queda:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Ubicar los elementos futuros (plano y contenedor de las cards) de forma horizontal en desktop | display: flex y flex-direction: row dentro de un media query como @media (min-width: 1024px) { ... } |
Ubicar los elementos futuros (plano y contenedor de las cards) de forma vertical en mobile | display: flex y flex-direction: column |
Espacio entre los hijos | gap: 1.25rem |
Centrado de los hijos vertical y horizontalmente | justify-content: center y align-items: center |
Darle un ancho del 100% del tamaño del contenedor | width: 100% |
Darle un espacio superior de 2rem en mobile | margin-top: 2rem |
Darle un espacio superior de 4rem en desktop | margin-top: 4rem dentro de un media query como @media (min-width: 1024px) { ... } |
Darle un espacio inferior de 0px en mobile | margin-bottom: 0 |
Darle un espacio inferior de 4rem en desktop | margin-bottom: 4rem dentro de un media query como @media (min-width: 1024px) { ... } |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
display: flex | flex |
flex-direction: column | flex-col |
@media (min-width: 1024px) { … } | lg: |
flex-direction: row | flex-row |
gap: 1.25rem | gap-5 |
justify-content: center | justify-center |
align-items: center | items-center |
width: 100% | w-full |
margin-top: 2rem | mt-8 |
margin-top: 4rem | mt-16 |
margin-bottom: 0px | mb-0 |
margin-top: 4rem; margin-bottom: 4rem | my-16 |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<div class="flex flex-col lg:flex-row lg:gap-5 justify-center items-center w-full mt-8 lg:mt-16 mb-0 lg:my-16">
<!-- Aquí va el plano y el contenedor de las cards --></div>
Veamos ahora la lista para construir el contenedor del plano:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Centrar vertical y horizontalmente el plano | display: grid y place-items: center |
Darle un ancho del 100% en mobile | w-full |
Darle un ancho del 66.666667% en desktop para que las cards ocupen el ancho restante | w-4/6 dentro de un media query como @media (min-width: 1024px) { ... } |
Las propiedades y las clases de TailwindCSS correspondientes:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
display: grid | grid |
place-items: center | place-items-center |
width: 100% | w-full |
@media (min-width: 1024px) { … } | lg: |
width: 66.666667% | w-4/6 |
Y las añadimos a la estructura HTML:
<div class="grid place-items-center w-full lg:w-4/6">
<imgclass="w-full'"src="https://i.ibb.co/09fmVRK/plan.png"alt="plan"></div>
Vamos ahora con el contenedor de las cards:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Centrar vertical y horizontalmente el plano | display: grid y place-items: center |
Darle un ancho del 100% en mobile | w-full |
Darle un ancho del 33.333333% en desktop (medida que se obtiene de restar el 100% del total menos el 66.66% del contenedor del plano) | w-2/6 dentro de un media query como @media (min-width: 1024px) { ... } |
Darle un espacio superior de 2rem en mobile | margin-top: 2rem |
Darle un espacio superior de 0px en desktop | margin-top: 0 dentro de un media query como @media (min-width: 1024px) { ... } |
Clases de TailwindCSS:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
display: grid | grid |
place-items: center | place-items-center |
width: 100% | w-full |
@media (min-width: 1024px) { … } | lg: |
width: 33.333333% | w-2/6 |
margin-top: 2rem | mt-8 |
margin-top: 0 | mt-0 |
HTML:
<div class="controls grid place-items-center w-full lg:w-2/6 mt-8 lg:mt-0">
<!-- Aquí va el contenedor interno de las cards --></div>
¡Muy bien! Ahora el contenedor interno de las cards (sí, otro contenedor, recuerda la revisión e identificación de elementos que hicimos al principio):
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Crear 2 columnas del mismo tamaño con espaciado en mobile y desktop | display: grid , grid-template-columns: repeat(2, minmax(0, 1fr)) y gap: 1.25rem por fuera y por dentro de un media query como @media (min-width: 1024px) { ... } |
Crear 4 columnas del mismo tamaño con espaciado en tablet | display: grid , grid-template-columns: repeat(4, minmax(0, 1fr)) y gap: 1.25rem por dentro de un media query como @media (min-width: 768px) { ... } |
Crear 2 filas del mismo tamaño con espaciado en mobile y desktop | display: grid , grid-template-rows: repeat(2, minmax(0, 1fr)) y gap: 1.25rem por fuera y por dentro de un media query como @media (min-width: 1024px) { ... } |
Crear 1 fila con espaciado en tablet | display: grid , grid-template-row: repeat(1, minmax(0, 1fr)) y gap: 1.25rem por dentro de un media query como @media (min-width: 768px) { ... } |
Darle un ancho máximo de 1024px | max-width: 1024px |
Darle un ancho del 100% en mobile | w-full |
Clases de TailwindCSS correspondientes:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
display: grid | grid |
gap: 1.25rem | gap-5 |
grid-template-columns: repeat(2, minmax(0, 1fr)) | grid-cols-2 |
grid-template-columns: repeat(4, minmax(0, 1fr)) | grid-cols-4 |
grid-template-rows: repeat(1, minmax(0, 1fr)) | grid-rows-1 |
grid-template-rows: repeat(2, minmax(0, 1fr)) | grid-rows-2 |
@media (min-width: 1024px) { … } | lg: |
@media (min-width: 768px) { … } | md: |
max-width: 1024px | max-w-screen-lg |
width: 100% | w-full |
Y añadimos las clases al HTML:
<div class="controls grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-2 grid-rows-2 md:grid-rows-1 lg:grid-rows-2 max-w-full w-full">
<!-- Aquí van las cards --></div>
La imagen del plano la tomé de Habitat Pod.
Y, para añadirle unos estilos adicionales para el responsive especialmente, escribimos el siguiente CSS:
.controls {
min-height: 300px;
}
.controlsimg {
margin: 0.5rem;
}
@media (max-width: 1024px) {
.controls {
width: 100%;
min-height: 100px;
}
}
@media (max-width: 767px) {
.controls {
max-width: 300px;
min-height: 200px;
}
}
Todo el HTML de este paso se vería de la siguiente forma:
<div class="flex flex-col lg:flex-row lg:gap-5 justify-center items-center w-full mt-8 lg:mt-16 mb-0 lg:my-16">
<divclass="grid place-items-center w-full lg:w-4/6"><imgclass="w-full'"src="https://i.ibb.co/09fmVRK/plan.png"alt="plan"></div><divclass="controls grid place-items-center w-full lg:w-2/6 mt-8 lg:mt-0"><divclass="controls grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-2 grid-rows-2 md:grid-rows-1 lg:grid-rows-2 max-w-full w-full"><!-- Aquí van las cards --></div></div></div>
Antes de comenzar con la maquetación de las cards, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:
Para construir el contenedor principal de las cards, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Posicionamiento relativo para que el input absoluto se adhiera a él | position: relative |
Centrar vertical y horizontalmente los elementos internos | display: grid y place-items: center |
Evitar que se aumenten las dimensiones de la card | box-sizing: border-box |
Darle un ancho del 100% | w-full |
Darle un alto del 100% | h-full |
Aplicarle un estilo al mouse para indicar que la card es clickeable | cursor: pointer |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
position: relative | relative |
display: grid | grid |
place-items: center | place-items-center |
box-sizing: border-box | box-border |
width: 100% | w-full |
height: 100% | w-full |
cursor: pointer | cursor-pointer |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<div class="glassmorphism relative grid place-items-center py-3 box-border w-full h-full cursor-pointer">
<!-- Aquí van los elementos de la card --></div>
Para añadir el texto a la card, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Remover las márgenes por defecto | margin: 0px |
Darle un tamaño de 0.875rem | font-size: 0.875rem |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
margin: 0px | m-0 |
font-size: 0.875rem; line-height: 1.25rem | text-sm |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<pclass="m-0 text-sm">Lights</p>
Para añadir el ícono a la card:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Un ancho de 2rem | width: 2rem |
Añadirle un espaciado de 0.5rem | margin: 0.5rem |
Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
width: 2rem | w-8 |
margin: 0.5rem | m-2 |
Y ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML:
<img class="w-8 m-2" src="https://img.icons8.com/pastel-glyph/64/000000/light--v1.png"/>
El ícono lo tomé de icons8.
Para añadir el toggle button a la card tenemos una lista enorme de las propiedades que necesitamos. Lo mejor de todo es que en este reto sobre Dark Mode con Animaciones en CSS y JavaScript escribimos todo el paso a paso para que puedas crear este toggle button como todo(a) un(a) experto(a).
Propiedades y valores en CSS | Clase en TailwindCSS |
---|---|
position: absolute | absolute |
width: 100% | w-full |
height: 100% | w-full |
opacity: 0 | opacity-0 |
display: flex | flex |
align-items: center | items-center |
background-color: rgb(156 163 175) | bg-gray-400 |
height: 1.5rem | h-6 |
width: 3rem | w-12 |
border-radius: 9999px | rounded-full |
background-color: rgb(255 255 255) | bg-white |
margin: 0.25rem | m-1 |
height: 1.25rem | h-5 |
width: 1.25rem | w-5 |
Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:
<input id="lights-toggle-button"type="checkbox"class="absolute w-full h-full opacity-0">
<label for="lights-toggle-button"class="flex items-center bg-gray-400 h-6 w-12 rounded-full">
<div class="toggle-dot bg-white m-1 h-5 w-5 rounded-full"></div>
</label>
Y el CSS correspondiente sería:
#lights-toggle-button:checked + label {
background-color: MediumSpringGreen;
}
label.toggle-dot {
transition: transform 0.3s ease;
}
#lights-toggle-button:checked + label.toggle-dot {
transform: translateX(1.3rem);
}
Más colores nativos de CSS aquí.
Antes de terminar, añadimos el JavaScript correspondiente que también aprendimos en el reto sobre Dark Mode con Animaciones en CSS y JavaScript:
const lightsToggleButton = document.getElementById('lights-toggle-button')
function addDarkStyle (toggleButton) {
toggleButton.addEventListener('change', () => {
document.body.classList.toggle('dark')
})
}
addDarkStyle(lightsToggleButton)
Finalmente el HTML de toda nuestra card quedaría de la siguiente forma:
<div class="glassmorphism relative grid place-items-center py-3 box-border w-full h-full cursor-pointer">
<p class="m-0 text-sm">Lights</p>
<img class="w-8 m-2" src="https://img.icons8.com/pastel-glyph/64/000000/light--v1.png"/>
<input id="lights-toggle-button"type="checkbox"class="absolute w-full h-full opacity-0">
<label for="lights-toggle-button"class="flex items-center bg-gray-400 h-6 w-12 rounded-full">
<div class="toggle-dot bg-white m-1 h-5 w-5 rounded-full"></div>
</label>
</div>
¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de la aplicación de una casa inteligente con TailwindCSS. 😄
Aquí te comparto:
No olvides que puedes encontrar la segunda parte de este reto en: Animaciones con TailwindCSS.
Cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.
#NuncaParesDeAprender
Gracias Teff, estos posts de CSS me guían sobre qué proyectos me puedo enfocar para mejorar mis habilidades, voy completando los cursos y te compartiré los resultados
Wow, genial esto !!! 💚 Por aquí quedo siempre atenta a que nos compartas los resultadosss 💚
Se ve genial la práctica. Ya compartiré los resultados cuando termine los cursos recomendados.
Maravilloso !!! Por aquí quedo atentaaa 👀💚
Qué interesante! No conocía este framework de CSS (Tailwind). Vamos con un nuevo #RetosPlatziCSS. 😉💪
Eso, Jhonny !!! Por aquí quedo pendiente de ver tu resultadooo 💚
WOW es super bonito e interesante, Teff.
Justo estoy con HTML, CSS y JS.
Challenge accepted!
Esooo !!! Feliz de ver tu resultadooo 🎉
Excelente
💚💚💚
Genial, me encanta💚
🎉 Súper, Sandra !!! Por aquí quedo atenta a ver tu resultadoooo 💚
Como haces para saber tanto? 😮 sos lo máximo Esteff!
Haha Gracias, Josue ! Solo mucha pasión por transmitirles lo poquito 💚
Me encanto el reto!
🎉🎉🎉
Que buen reto, es genial tener una casa asi
Hehehe es verdad !!!
Realmente, ¿qué hay sobre la aplicación? ¿Y estás seguro de que tienes una conexión a Internet estable? Cuando conecté los sensores de ajax, no tuve ningún problema solo por la aplicación y solo controlé todo con mi Teléfono. Así que creo que tienes que lidiar con esto, y espero que puedas hacerlo.
Hola ! Te refieres a que hiciste la app en tiempo real con electrónica incluida ? 💚 Me alegra que hayas podido lograr el resultado que querías ! 😊
Se alguém não está satisfeito com algo, parece-me que é mais fácil, neste caso, pegar e se mudar para outro país. Se você não sabe por onde começar, então, pessoalmente, eu recomendaria que você tentasse chamar sua atenção para o serviço onde você pode encontrar o kaga aluguel . Há muitas opções interessantes, entre as quais você pode encontrar o que você mais gosta.