253

Crea tu planeador semanal con CSS Grid, Flexbox y Glassmorphism

7416Puntos

hace 4 meses

Curso de CSS Grid Layout
Curso de CSS Grid Layout

Curso de CSS Grid Layout

Aprende CSS Grid Layout para maquetar sitios web complejos sin complicaciones. Analiza tus diseños, divide tu aplicación en cuadrículas y conviértelas en estilos CSS. Integra CSS Grid con Flexbox y el modelo de caja para alinear tus elementos exactamente donde deben estar. Descifra todos los misterios de CSS Grid Layout para convertirte en frontend developer profesional con tu profesora Estefany Aguilar.

Glassmorphism es una tendencia de diseño que combina efectos de vidrio con colores muy vivos y elementos translúcidos flotando por la interfaz.

En este tutorial te enseñaré cómo maquetar un planeador semanal con CSS Grid, Flexbox y este estilo visual tan bello.

Los cursos de Platzi que te recomiendo antes o después de completar este tutorial son los siguientes:

Paso 0: planeación

Siempre que empiezo un proyecto me encanta planear muy bien cada paso, así tengo una visión más clara de lo que quiero lograr y sé más o menos cuánto tiempo me va a llevar hacerlo.

En este caso, realizaremos los siguientes 5 pasos:

  1. Creación de un wireframe
  2. Selección de la paleta de colores, fuentes e íconos
  3. Identificación de elementos padres e hijos
  4. Elaboración del efecto Glassmorphism con CSS
  5. Creación de los diferentes elementos con HTML y CSS
  6. Reto: responsive design

⚠️ Recomendación
Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento. Solo de esta forma podrás convertirte en experta o experto maquetando con CSS.​

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: diseña el primer wireframe


​Lo primero que debes hacer es diseñar el layout de tu planeador.

Un wireframe es un boceto donde definimos de forma muy sencilla y esquemática el contenido y la posición de los diversos bloques de nuestro proyecto. Esto lo hacemos con el fin de tener una idea clara antes de comenzar a escribir código.

Te recomiendo que antes de empezar escribas una lista de requerimientos, problemas y soluciones que buscas resolver con tu planeador. Siéntete libre de expresar toda tu creatividad.

Este es mi wireframe:

Wireframe calendario CSS Grid
  • Selectores básicos, combinadores y pseudoclases.
  • CSS Grid Layout.
  • Flexbox.
  • Modelo de caja.
  • Positions.
  • Contexto de apilamiento.

Los cursos de Platzi que te recomiendo, son:

Paso 2: añade colores, fuentes e iconos


Ahora que tienes tu wireframe, puedes usar tus herramientas y plataformas favoritas para añadir los detalles restantes de tu diseño. Yo voy a usar las siguientes:

Gracias a estas herramientas pude detallar un poco más el diseño de mi planeador personal:

CSS Grid

Paso 3: identifica los elementos padres e hijos


Aún no vamos a maquetar (escribir código HTML y CSS), solo vamos a identificar los elementos y contenedores que necesitará nuestra aplicación para funcionar.

Identificar los elementos padres e hijos de nuestro wireframe nos va a permitir trabajar muchísimo mejor con las diferentes propiedades y valores tanto de CSS Grid como de Flexbox. Lo más recomendado es comenzar desde los elementos más externos hasta los elementos más internos. Podemos hacer algo como lo siguiente:

CSS Grid

Este ejercicio es extremadamente útil y necesario al desarrollar el frontend de una aplicación web. Puedo asegurarte que le sacarás mucho provecho.

Recordemos que los elementos hijos que también son padres pueden usar propiedades tanto de padre como de hijos, es decir, que pueden alinear (o ubicar) a sus hijos, pero también se pueden alinear (o ubicar) a sí mismos. Caso contrario con los elementos que son solo padres (pueden alinear o ubicar a otros pero no a sí mismos) o que son solo hijos (pueden alinearse o ubicarse a sí mismos únicamente).

En estas dos siguientes guías de Flexbox y de CSS Grid vas a encontrar las propiedades tanto de elementos padre (lado izquierdo) como de elementos hijos (lado derecho) para tener más claridad sobre ese tema. Sin embargo, te recomiendo mucho que hagas los cursos que te mencioné anteriormente.

Paso 4: conseguir el efecto Glassmorphism con CSS


Glassmorphism es una tendencia de UI que se está volviendo cada vez más popular entre los diseñadores, y se caracteriza por:

  • Tener un efecto de vidrio con blur en los objetos que estén en el fondo.
  • Varias capas con objetos flotando en el espacio.
  • Colores vivos para resaltar la transparencia borrosa.
  • Un borde ligero y sutil en los objetos translúcidos.

Fuente y lectura recomendada: Glassmorphism in user interfaces

Algunos de nuestros elementos de HTML van a tener un estilo Glassmorphism. Para esto debemos crear una clase de CSS única y agregarla a cada elemento cada vez que necesitemos este aspecto vidrioso.

Para crear este estilo podemos usar generadores como Glassmorphism CSS Generator. Interactúa con los valores blue y transparency para lograr el efecto que más te guste. Luego de eso, copia y pega el código resultante en una clase de CSS como la siguiente:

.glassmorphism-effect {
    background: rgba( 255, 255, 255, 0.10 );
    box-shadow: 08px32px0rgba( 31, 38, 135, 0.37 );
    -webkit-backdrop-filter: blur( 4px );
            backdrop-filter: blur( 4px );
    border-radius: 16px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

Para profundizar, te recomiendo buscar en internet acerca de cada una de estas propiedades: background, box-shadow, backdrop-filter, border-radius y border. También, sobre los diferentes valores que pueden recibir.

Paso 5: crea el esqueleto en HTML


¡Ahora sí! ¡Vamos a escribir código!

Teniendo en cuenta la identificación de elementos padres e hijos que hicimos anteriormente, vamos a empezar a crear nuestras estructuras de HTML y posteriormente de CSS.

A mi me gusta mucho trabajar en editores en línea como CodePen, pero tú puedes trabajar en tu editor de preferencia (Visual Studio Code, Atom, Brackets, etc).

Lo que haremos será:

  • Estilizar nuestro body y agregar importaciones necesarias.
  • Estructurar HTML y CSS del contenedor.
  • Estructurar HTML y CSS de la sección del lado izquierdo (Objetivos).
  • Estructurar HTML y CSS de la sección del lado derecho (planeador semanal).

☾ Estilizar nuestro body y agregar importaciones necesarias

La fuente que escogí se llama Nunito con un weight de 200 y 600. Así que Google Fonts me provee el siguente código que se agrega en la parte superior del archivo de CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:[email protected];600&display=swap');

Y, también se debe agregar font-family: 'Nunito', sans-serif; a los estilos del body o del elemento deseado.

Adicionalmente, en la página que te recomendé para escoger el color degradado, escogí el color que se muestra por defecto:

background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);

Teniendo en cuenta lo anterior, el código CSS inicial quedaría de la siguiente manera:

@import url('https://fonts.googleapis.com/css2?family=Nunito:[email protected];600&display=swap');

body {
    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    display: grid;
    font-family: 'Nunito', sans-serif;
    height: 100vh;
    margin: 0;
    place-items: center;
}

Donde:

  • display: grid → Hará que nuestro valor interno de visualización tenga características de cuadrícula. En nuestro caso, para centar todo el contenido vertical y horizontalmente.
  • height: 100vh → Nos dará un alto relativo al 100% de la pantalla que tenga el usuario en ese momento.
  • margin: 0 → Quitará el margin que viene por defecto.
  • place-items: center → Centrará el contenedor principal tanto vertical como horizontalmente.

☾ Estructura HTML y CSS del contenedor

Como ya vimos en nuestro wireframe, nuestro contenedor tiene dos hijos: la sección del lado izquierdo donde están los objetivos y la sección del lado derecho donde está el planeador semanal. Esto, se traduciría en HTML de la siguiente manera:

Para el código CSS, debemos hacer 3 cosas:

  • Añadir una clase .container para el
    padre con el formato de cuadrícula.
  • Añadir la clase .glassmorphism-effect (que ya creamos) al
    padre y a los elementos hijos
    .
  • Añadir una clase .padding-box para crear un espacio al interior de cada cajita.

El código CSS para el contenedor sería:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
    height: 90%;
    width: 80%;
}

Donde:

  • display: grid → Hará que nuestro valor interno de visualización tenga características de cuadrícula. En nuestro caso, queremos crear dos columnas para ambos hijos.
  • grid-template-columns: 1fr 3fr; → Nos crea las dos columnas. En este caso, es como si dividieramos el espacio total disponible en 4 partes y para la columna 1 solo obtuviéramos una parte y para la columna 2 obtuvieramos las 3 partes restantes.
  • grid-gap: 20px; → Crea un espacio entre las columnas (y filas si tuviéramos) de 20px. Esto es para que no se vean apretaditas.
  • height: 90%; y width: 80%; → Nos da los tamaños de alto y ancho respectivamente.

Para la clase .padding-box tendríamos el siguiente código CSS:

.padding-box {
    box-sizing: border-box;
    padding: 24px;
}

Tareita: Investiga qué efecto tiene la propiedad y valor box-sizing: border-box; y por qué es útil incluirla en esta clase donde sólo tenemos una propiedad padding.

☾ Estructura HTML y CSS de la sección del lado izquierdo (Objetivos)

Como ya vimos en nuestro wireframe, esta sección del lado izquierdo tiene 6 hijos: El título y 5 objetivos. Esto, se traduciría en HTML de la siguiente manera:

<section><div>div><div>div><div>div><div>div><div>div><div>div>section>

Ahora, empecemos a estilizar elemento por elemento.

→ Contenedor ✨

Código HTML:

class="glassmorphism-effect padding-box">section>

Donde:

  • glassmorphism-effect y padding-box → Son clases que ya tenemos definidas, así que bastará sólo con agregarlas al HTML.

→ Título ✨

Código HTML:

<divclass="title"><p>Objetivosp><p>Lo que quiero lograrp>div>

Código CSS:

.titlep:first-child {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}

.titlep:last-child {
    font-size: 16px;
    margin-bottom: 30px;
}

Donde:

  • .title p:first-child → Significa que va a seleccionar únicamente el primer hijo

    que esté dentro de .title y le aplicará las reglas CSS definidas.

  • .title p:last-child → Significa que va a seleccionar únicamente el último hijo

    que esté dentro de .title y le aplicará las reglas CSS definidas.

  • font-size y font-weight → Darán tamaño de fuente y grosor respectivamente.
  • margin: 0 → Quitará el margin por defecto que tiene los elementos

    .

  • margin: 30px → Agregará un márgen abajo del texto para dar espacio a los objetivos.

Si te preguntaste: “En vez de .title p:first-child y .title p:first-child puedo colocar clases a los elementos

y ya ?”. La respuesta es: “pos sí”. Aquí lo único que estamos haciendo es practicar pseudoclases, pero, estás en toda la libertad de usar cualquier metodología de CSS para el nombramiento de tus elementos.

→ Objetivos ✨

Código HTML:

class="goals"><divclass="glassmorphism-effect"><imgsrc="https://img.icons8.com/nolan/64/love-book.png"alt="libro"/>div><p>Leer másp>div>

Código CSS:

.goals {
    align-items: center;
    display: flex;
}

.goalsdiv {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    margin-right: 10px;
    width: 40px;
}

.goalsimg {
    width: 30px;
}

Donde:

  • display: flex → Hará que nuestro valor interno de visualización tenga características flexibles. En nuestro caso, queremos centrar los elementos verticalmente y por eso la propiedad y valor align-items: center.
  • .goals div → Significa que van a seleccionar los
    que estén dentro de .goals y les aplicará las reglas CSS definidas. Así mismo con .goals img.
  • display: flex, align-items: center y justify-content: center → Hará que nuestros elementos estén centrados vertical y horizontalmente. En este caso lo necesitamos para centrar el ícono.
  • border-radius: 50% → Hará que el
    tenga forma de bolita.

☾ Estructura HTML y CSS de la sección del lado derecho (Planeador semanal)

Como ya vimos en nuestro wireframe, esta sección del lado izquierdo tiene 2 hijos: El título y el contenedor de los días de la semana que a su vez tiene 5 hijos que serían las columnas para cada día de la semana de lunes a viernes. Esto, se traduciría en HTML de la siguiente manera:

<section><div>div><div><div>div><div>div><div>div><div>div><div>div>div>section>

Ahora, empecemos a estilizar elemento por elemento.

→ Contenedor ✨

Código HTML:

<sectionclass="main-content glassmorphism-effect padding-box"><div>div><div><div>div><div>div><div>div><div>div><div>div>div>section>

Donde:

  • glassmorphism-effect y padding-box → Son clases que ya tenemos definidas, así que bastará sólo con agregarlas al HTML.

Código CSS:

.main-content >div:nth-child(2) {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(5, 1fr);
}

Donde:

  • .main-content > div:nth-child(2) → Significa que va a seleccionar únicamente el segundo
    que sea hijo directo de .main-content (Es decir, el contendor que genera la cuadrícula de los días de la semana) y le aplicará las reglas CSS definidas.
  • display: grid → Hará que nuestro valor interno de visualización tenga características de cuadrícula. En nuestro caso, queremos crear dos columnas para ambos hijos.
  • grid-gap: 20px → Crea un espacio entre las columnas (y filas si tuviéramos) de 20px. Esto es para que no se vean apretaditas.
  • grid-template-columns: repeat(5, 1fr) → Nos va a crear 5 columnas del mismo tamaño.

→ Título ✨

Código HTML:

<divclass="title"><p>Objetivosp><p>Lo que quiero lograrp>div>

El código CSS es el mismo que usamos para la sección del lado izquierdo, así que no es necesario volverlo a escribir en nuestro CSS. lo podemos reusar al tener las mismas clases de CSS.

→ Días de la semana ✨

Código HTML:

<div><p>Lunesp><div>div>div>

Este código HTML sería el mismo para cada uno de los días de la semana, así:

<div><div><p>Lunesp><div>div>div><div><p>Martesp><div>div>div><div><p>Miércolesp><div>div>div><div><p>Juevesp><div>div>div><div><p>Viernesp><div>div>div><div>

→ Cards ✨

Código HTML:

<div><div><p>Ejerciciop>div><div><p>7:00amp><p>Cardiop>div>div>

Añadiéndole las clases de CSS para aplicarle los estilos, nos quedaría así:

<divclass="card"><divclass="glassmorphism-effect"><p>Ejerciciop>div><divclass="glassmorphism-effect"><p>7:00amp><p>Cardiop>div>div>

Código CSS:

.card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    height: 100px;
    position: relative;
    width: 100%;
}

.card >div:first-child {
    align-items: center;
    border-radius: 16px;
    display: flex;
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    z-index: 1;
}

.card >div:first-childp {
    color: white;
    margin: 0;
    padding-right: 7px;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}

.card >div:last-child {
    border-radius: 16px;
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1 / 2;
    justify-content: center;
    z-index: 2;
}

.card >div:last-childp:first-child {
    font-size: 24px;
    font-weight: 600; 
    margin: 18px0 -8px0;
}

.card >div:last-childp:last-child {
    margin: 0;
}

.margin-bottom-card {
  margin-bottom: 20px;
}

Donde:

  • grid-template-rows: 1fr → Nos va a crear 1 única fila de todo el tamaño disponible.
  • grid-column: 1 / 5 y grid-row: 1 / 2 → Van a ubicar la parte izquierda de la card en las 4 columnas (recuerda que se cuentan las líneas, es decir, de la línea 1 a la 5) y en la única fila.
  • z-index: 1 → Colocará el lado izquierdo de la card debajo del lado derecho.
  • z-index: 2 → Colocará el lado derecho de la card encima del lado izquierdo.
  • transform: rotate(180deg) y writing-mode: vertical-rl → Harán rotar el texto del lado izquierdo de la card.

Tareita: Revisar muy cuidadosamente cada propiedad y valor, como también, las pseudoclases. Te puedes apoyar de las explicaciones dadas en el transcurso de la guía.

☾ Detalles adicionales: Burbujas

Código HTML de la estructura general de las 4 burbujas + el contenedor del planeador que ya tenemos hecho:

<divclass="bubble bubble-one glassmorphism-effect">div><divclass="bubble bubble-two glassmorphism-effect">div><divclass="bubble bubble-three glassmorphism-effect">div><divclass="bubble bubble-four glassmorphism-effect">div><divclass="container glassmorphism-effect padding-box">div>

Nota: Las burbujas deben ser hermanos del contenedor principal debido a un concepto fundamental llamado “contexto de apilamiento”. Te dejo este documento donde puedes revisar más a detalle este tema, sin embargo, también lo explicamos en la clase de “Posicionamiento + Dinámica: ¿Cómo se vería?” del “Curso de Diseño Web con CSS Grid y Flexbox”).

Código CSS:

.bubble {
    border-radius: 50%;
    position: absolute;
}

.bubble-one {
    height: 80px;
    left: 300px;
    top: 10px;
    width: 80px;
}

.bubble-two {
    height: 230px;
    right: 200px;
    top: -50px;
    width: 230px;
}

.bubble-three {
    height: 50px;
    right: 450px;
    top: -20px;
    width: 50px;
}

.bubble-four {
    bottom: 40px;
    height: 100px;
    left: -30px;
    width: 100px;
}

Donde:

  • position: absolute → Nos permitirá mover nuestras burbujas en todo el elemento relativo más cercano (que en este caso es todo el viewport) usando las propiedades top, right, bottom y left.

Paso 6 (reto): maqueta tu planeador con responsive design

¡Este último paso es tu reto final!

Debes volver a realizar todos los pasos anteriores para diseñar y maquetar tu planeador personal, pero esta vez asegurándote de que es responsive (que funciona bien en dispositivos móviles).

¡No olvides dejar tu solución en los comentarios! También recuerda contarnos cuál fue tu paso favorito de este reto. Y te espero en el próximo reto de desarrollo web.

#NuncaParesDeAprender

Curso de CSS Grid Layout
Curso de CSS Grid Layout

Curso de CSS Grid Layout

Aprende CSS Grid Layout para maquetar sitios web complejos sin complicaciones. Analiza tus diseños, divide tu aplicación en cuadrículas y conviértelas en estilos CSS. Integra CSS Grid con Flexbox y el modelo de caja para alinear tus elementos exactamente donde deben estar. Descifra todos los misterios de CSS Grid Layout para convertirte en frontend developer profesional con tu profesora Estefany Aguilar.
Estefany
Estefany
teffcode

7416Puntos

hace 4 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
9
6515Puntos

Justamente quiero hacer algo así para dejar de procrastinar.

2
7416Puntos
4 meses

Maravilloso !!! Feliz de ver tu resultadoooo 😍💚

8
11922Puntos

muy Genial ese efecto, super recomendado el curso.
Les dejo el link del que yo hice aquí
y el repositorio en GitHub por si quieren ver el código aquí
Sin título.png

5
7416Puntos
4 meses

Me encantó Jhonatan !!! Te quedó espectaculaaaar 😍💚

8
9226Puntos

Los diseños más increibles y los mejores tutoriales sobre CSS. Comparto mi resultado y mi códigoschedule.png

3
7416Puntos
4 meses

Wow !!! Te quedó espectaculaaaar 😍 Felicitacionessss 💚

5

Con este tipo de retos paso con css del amor al odio en un segundo, esta increíble y hermoso el proyecto.

2
7416Puntos
4 meses

Hahah excelente Camilo !!!

2
5441Puntos

Me encanto esta tecnica!!!

2
31942Puntos

Me encanto el efecto, probare con chakra-ui a ver que tal 😃

2
4992Puntos

Se ve genial, intentare imitarlo 😃

2
7416Puntos
4 meses

Esooooo 💚 Por aquí quedo pendiente de ver tu resultado 👀

2
7862Puntos

Reto aceptado, ¡lo intentaré!

2
7416Puntos
4 meses

Esoooo !!! Feliz de ver tu resultadoooo… Con todaaa 💪🏼💚

2
8068Puntos

Justo terminé un curso de CSS y HTM. Dios! es todo un mundo de conocimiento : , ) genial tu trabajo, Estefany.

2
7416Puntos
4 meses

Súper Carlos !!! Esta es una señal para que puedas poner en práctica todos esos conocimientos adquiridosss 😍 Quedo pendiente de ver tu resultadooo 💚

2
27060Puntos

Todo proyecto que hace @teffcode es bellisimo

2
7416Puntos
4 meses

Aww !!! Gracias Rusbel !!! 💚

2
4390Puntos

Hermoso diseño! No estoy a este nivel aún pero ya llegaré!

2
7416Puntos
4 meses

Con toda Bruno !!! Por aquí tienes a tu comunidad para apoyarte y alcanzar las metas que te propongas !!! 💚

2
24656Puntos

no me funciona el codigo, pueden publicar el codigo por favor

2
7416Puntos
4 meses

Ya te funciona ? 🙈

0
24656Puntos
4 meses

Ya no le moví, voy a tomar de ejemplo el que otro usuario ya comentó, gracias.

2
13104Puntos

Great! Tengo que hacer este reto para desafiar mis capacidades y demostrar que puedo. Se ve espectacular el diseño. 😃

3
7416Puntos
4 meses

Completamente Gerard !!! Con toda a desafiarte, estoy 100% segura de que lo harás e incluso que quedará mejoooor 😍 Por aquí quedo atenta a tu resultadooo 💚

2
5317Puntos

Super TOP, Genial el post 🤩

2
573Puntos

Muy interesante, creo que lo tomare como modelo y reto, hare primero el template en Figma y luego aplicamos el vanilla Css

3
7416Puntos
4 meses

Ufffff !!! Súper excelente esa ideaaa 😍💚 Me muestrasssss !!! Soy fan de ver todo lo que ustedes hacennn 😍💚

1
1968Puntos

Me encanto la forma visual que tiene, sin embargo me gustaría verlo ya programado, es un gran aporte a al comunidad, saludos.

1
10374Puntos

Queda muy limpio, excelente para hacerlo en el tiempo libre.

2
7416Puntos
4 meses

Eso David !!! En cuanto tengas tiempito, lo haces y nos muestrasss 😍 Yo feliz de ver tu resultado !!! 💚

1
3231Puntos

Me encanto!!! Muchas gracias, espero llegar a ese nivel de codigo, por el momento es como un idioma japones para mi… Gracias, te quedo espectacular

2
7416Puntos
4 meses

Hahahha ! Por aquí nos tienes para que puedas llegar al nivel que deseas Helena 💚 Un abrazoooo 😘

1
3799Puntos

Wow me ayudo mucho para entender las pseudo clases 😄

2
7416Puntos
4 meses

Genial !!! Me alegra mucho saber esooo 💚

1
3469Puntos

¡Esta increíble el resultado final!

2
7416Puntos
4 meses

🎉🎉🎉🎉🎉

0
3009Puntos

Que buen tutorial!!

0
7812Puntos

Muchas gracias por el ejemplo, me ayudó mucho a practicar!

image