Accentsconagua
Share
En este tutorial vamos a construir un calendario de adviento estacional utilizando CSS Grid, SVG y un puñado de alegría festiva. Comencemos echando un vistazo a lo que haremos: haga clic en los días para ver lo que hay debajo:
En realidad, no necesita mucho para este tutorial, solo un editor de código (confíe en CodePen para facilitar las cosas) y algunos conocimientos básicos de HTML y CSS. Tú será Sin embargo, necesito algunos visuales festivos. Tomé ilustraciones del muy talentoso masastarus de Envato Elements (son vectoriales y absolutamente perfectos para esto):
Niños felices celebrando la navidad
Grupo de niños y árbol de navidadPara nuestro calendario de Adviento usaremos 25 elementos de cuadrícula; uno para cada uno de los días previos a la Navidad y otro para llevar un gráfico del título. Se verá algo así en pantallas pequeñas:
Y esto en pantallas más grandes:
El elemento de la rejilla turquesa tendrá nuestro gráfico del título..
Para comenzar, necesitaremos 25 elementos en un contenedor, así que pongamos algo de HTML juntos:
Propina: Dada la naturaleza repetitiva de este marcado, es posible que prefieras usar un lenguaje de plantillas como HAML. HAML te permitirá hacer un bucle de más de 24 elementos para que no tengas que escribir cada uno. El siguiente fragmento de código recopila exactamente lo que ves arriba:
% section.grid-1% div.title - (1… 24) .each do | i | % div : class => "day - # i"
Cuando anidamos aún más elementos dentro de estos divs, apreciará el tiempo que HAML le ahorra.!
Ahora agreguemos algunos estilos básicos para establecer nuestra red. Comenzamos asignando pantalla: rejilla; a nuestro elemento contenedor. Luego, después de algunas dimensiones, definimos los elementos de la cuadrícula..
/ * primer diseño de cuadrícula móvil * / .grid-1 display: grid; ancho: 96%; ancho máximo: 900px; margen: 2% automático; cuadrícula-plantilla-columnas: repetir (3, 1fr); rejilla-plantilla-filas: auto; rejilla: 25px;
Hemos empezado con "móvil primero", así que verás que estamos definiendo solo tres columnas para comenzar; Usaremos una consulta de medios en un momento para permitir pantallas más grandes.
cuadrícula-plantilla-columnas: repetir (3, 1fr); nos da tres columnas, cada una de ancho igual (1 unidad)rejilla-plantilla-filas: auto; En realidad, es el valor predeterminado, pero establece que las filas no tendrán una altura específica que se les atribuya. Podemos agregar tantas como queramos y crecerán con el contenido..rejilla: 25px; define nuestros canalones.Eso es realmente todo lo que necesitamos, Grid puede manejar las cosas desde aquí si lo dejamos, pero queremos ser más específicos acerca de dónde colocamos cada elemento de la cuadrícula. Por eso usaremos Áreas de Grid..
Podemos asignar un nombre a cada área de la cuadrícula que definimos, y también podemos escribirlo de una manera realmente visual:
cuadrícula-áreas-plantilla: "t t t" "d23 d20 d12" "d2 d14 d4" "d5 d22 d16" "d1 d7 d9" "d10 d11 d18" "d13 d3 d15" "d6 d17 d8" "d19 d24 d21";
Aquí nombramos la primera área, que abarca tres columnas en la primera fila t (donde vamos a colocar el título). Puede que este no sea el nombre más útil, pero hará el trabajo por ahora. Cada una de las otras áreas recibe un nombre de acuerdo con los números del día y, como puede ver, podemos ponerlas donde queramos. La capacidad de colocar las cosas "al azar" de esta manera es perfecta para un calendario de adviento.
Con la adición de una consulta de medios, podemos (realmente fácilmente) cambiar el diseño para pantallas más grandes.
/ * consulta de medios * / pantalla solo @media y (min-width: 500px) .grid-1 grid-template-columns: repetir (6, 1fr); cuadrícula-áreas-plantilla: "t t t d2 d7 d8" "t t t d4 d11 d12" "t t t d19 d9 d13" "d6 d1 d24 d24 d20" "d17 d18 d24 d24 d5 d22 d22" d3 d23 d14 d10 d15 ";
Con esta consulta de medios, estamos indicando que para las vistas más amplias que 500px (figura arbitraria) cambiaremos la cuadrícula para que tenga seis columnas: cuadrícula-plantilla-columnas: repetir (6, 1fr);.
Y podemos redefinir completamente la disposición de los artículos, colocando los días donde nos plazca. Notará que el bloque de título ahora ocupa tres columnas y tres filas en la parte superior izquierda, y d24 ocupa un área de 2 × 2, para darle más importancia. Esto quedará claro cuando asignemos nuestros elementos de cuadrícula a las áreas de cuadrícula en el siguiente paso.
Por ahora, no podemos ver nada de lo que hemos hecho, así que agreguemos algunos estilos provisionales a los elementos de la cuadrícula para hacer que las cosas sean visibles..
sección div fondo: # 2e313d; relleno: 40px;
Echar un vistazo:
¿Necesita una cartilla en las áreas de la red? Aprende más sobre todo en este tutorial para principiantes:
Ahora debemos asignar nuestros elementos de cuadrícula a las áreas que hemos establecido. Hacemos esto de la siguiente manera:
/ * elementos individuales * / .title grid-area: t; .day-1 grid-area: d1; .day-2 grid-area: d2; .day-3 grid-area: d3; …
Puedes ver nuestro div.title ha sido asignado al área de la cuadrícula t, y cada día ha sido asignado a un área correspondiente. No hay nada que decir que no puedas asignar .día 3 a área de cuadrícula: d16; por supuesto, solo estamos eligiendo organizar las cosas de esta manera. Como se ve?
Esa es la estructura básica clasificada, ahora necesitamos hacer nuestras puertas CSS. Vamos a colocar dos divs dentro de cada elemento de la cuadrícula, uno para el frente de la puerta, otro para el reverso, ambos envueltos en otro div, y usaremos un truco de la casilla de verificación para voltear todo el asunto cuando sea hecho clic.
Comenzamos agregando una etiqueta, una casilla de verificación y los divs a cada elemento de la cuadrícula:
Nuevamente, debe hacer esto para los 24 elementos de la cuadrícula, que es una parte voluminosa de marcas repetitivas de 245 líneas de largo, por lo que puede encontrar HAML útil. Así es como se vería:
% div : class => "day - # i"% label% input : type => "checkbox" .door .front # i .back
Con el relleno ligeramente ajustado, esto es lo que parecen todas esas casillas de verificación ahora:
Prepárate; lo que viene es posiblemente el bit más complejo de toda esta construcción. Es una gran parte y muy pocas obras sin que todo esté presente, así que tengan paciencia. Vamos a hacer algunos cambios con transformaciones 3D.
En primer lugar, ocultamos las casillas de verificación y luego afirmamos que queremos que se aplique un cierto nivel de perspectiva a nuestras etiquetas (perspectiva: 1000px; se encarga de eso). transform-style: preserve-3d; indica que los elementos secundarios de la etiqueta se mostrarán en un espacio 3D en lugar de a lo largo de un plano. Luego usamos algunos estilos de Flexbox para asegurarnos de que la etiqueta ocupe toda el área disponible.
Algunos estilos en el .puerta El elemento (que contiene las caras frontal y posterior) luego configura el tiempo de transición y ordena las cosas aún más:
/ * estilos de puerta * / .grid-1 entrada pantalla: ninguna; etiqueta perspectiva: 1000px; transform-style: preserve-3d; cursor: puntero; pantalla: flexión; min-altura: 100%; ancho: 100%; altura: 120px; .door ancho: 100%; transform-style: preserve-3d; transición: todos los 300ms; borde: 2px discontinuo transparente;
Bien, ahora para concentrarme en las caras delantera y trasera de nuestra puerta..
.puerta div posición: absoluta; altura: 100%; ancho: 100%; Backface-visibilidad: oculto; pantalla: flexión; alinear-elementos: centro; justificar-contenido: centro; .door .back background-color: # 2e313d; transformar: rotarY (180deg);
los .puerta div El selector apunta tanto a la .frente y el .atrás divs Lo usamos para hacer de cada uno el 100% del ancho y alto de la .puerta Contenedor, y posicionado absolutamente arriba a la izquierda. Las reglas de Flexbox aseguran que el contenido (el número) esté alineado centralmente y que Backface-visibilidad: oculto; La regla asegura que ninguna de las caras pueda verse cuando su reverso está frente a nosotros. Eso es importante, ya que luego nos centramos en el .atrás y configurarlo para voltear con transformar: rotarY (180deg);.
Todo esto ha conducido a lo que en realidad es un efecto bastante bueno. Vamos a utilizar el estado marcado de la casilla de verificación para la transición de las caras. Cuando hacemos clic en la etiqueta (que ocupa toda el área de la cuadrícula), se activa y desactiva la casilla de verificación, aunque no se muestra. Dependiendo de ese estado, alteramos de qué manera la .puerta se enfrenta a.
etiqueta: hover .door border-color: # 385052; : marcado + .door transform: rotateY (180deg);
La primera regla nos da un estado flotante. La segunda regla utiliza un selector adyacente, por lo que cuando un .puerta El elemento es precedido inmediatamente por una :comprobado El elemento lo giramos 180 grados en el eje Y (lo volteamos). Todo eso nos da nuestra funcionalidad de puerta fundamental.!
Vamos a hacer que las cosas se vean bonitas. La primera imagen visual que vamos a insertar es nuestro gráfico del título. Con los niños felices celebrando la ilustración de Navidad, tomé el título, cambié los detalles y guardé un archivo SVG.
Propina: para vectores detallados como estos, en Illustrator vaya a Objeto> Ruta> Simplificar ... Y puedes reducir la complejidad. Al recortar el número de curvas y puntos, puede reducir significativamente el tamaño del archivo sin perder demasiado el efecto general.
Hay algunas maneras en que podríamos agregar esta imagen a la página, pero acabo de colocar un img etiqueta en nuestro marcado:
Algunos estilos dan fluidez a nuestra imagen y la alinean centralmente dentro del área de la cuadrícula:
.título pantalla: flexión; alinear-elementos: centro; justificar-contenido: centro; .title img ancho: 90%; altura: auto;
Para mejorar el fondo en blanco, agregamos otro SVG (nevadas y nubes) al cuerpo a través de CSS:
cuerpo fondo: url (snow-bg.svg) no repetir el centro superior # 82d8cb; tamaño de fondo: cubierta;
Cada una de nuestras 24 puertas también debe tener una imagen oculta detrás de ellas. Nuevamente, podríamos hacer esto de diferentes maneras, pero en este caso guardaremos un montón de archivos SVG y los agregaremos como fondos a través del CSS. Para cada puerta, después de definir su área de cuadrícula, tendremos una regla para la .atrás cara:
.día 6 área de cuadrícula: d6; .day-6 .back background: url (snowflake.svg);
Esto es lo que nos da:
¡Bastante bueno! Ahora solo necesitamos ordenar esas imágenes con algunas reglas generales.
En primer lugar, esas imágenes de fondo deben aparecer una sola vez, así que agregaremos un no-repetir. También necesitan ser centrales y escaladas adecuadamente..
.door .back background-size: contener; posición de fondo: centro centro; repetición de fondo: no repetición; color de fondo: # 2e313d; transformar: rotarY (180deg);
Algunos radio del borde añadido a .puerta y .puerta div Nos da una estética más amigable. Y finalmente, enlazamos a la fuente Kalam en las fuentes de Google para pulir ese último detalle tipográfico:
Estilos:
/ * añadido a .door div * / font-family: 'Kalam', cursivo; color: # 385052; tamaño de letra: 2em; font-weight: negrita; text-shadow: 1px 1px 0 rgba (255, 255, 255, 0.2);
Eso de todo envuelve las cosas! Por supuesto, esto es realmente solo por un valor novedoso y por la práctica de CSS Grid (el estado de cada puerta no se guarda para la próxima sesión del navegador o algo así), pero hemos avanzado mucho con solo algunas marcas y algunos estilos.
El apoyo es un último punto a mencionar; Hay algunos aspectos de este tutorial que aún no cuentan con soporte completo para el navegador. Para obtener algunos consejos sobre cómo lidiar con esto, consulte los recursos vinculados a continuación..
Espero que disfrutes el tutorial y disfrutes la cuenta regresiva.!
