Cursos online y materiales digitales para estudiantes y desarrolladores web

css

Snippet: acordeón desplegable con HTML, CSS y Javascript

Publicado el por Leave a Comment

Un acordeón es un elemento web que se suele utilizar para alternar entre ocultar y mostrar una gran cantidad de contenido.

Es muy común utilizarlo para crear secciones de FAQ (Preguntas Frecuentes) en las que se visualiza la pregunta, y al hacer click sobre ella, se despliega la respuesta en la parte inferior, a modo de acordeón.

En este vídeo vamos a ver cómo crear un acordeón utilizando únicamente HTML, CSS y Javascript; es decir, sin bibliotecas externas como JQuery o Bootstrap.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo convertir un botón en la parte superior de las secciones del acordeón con CSS.
  • Cómo cambiar el fondo de esta sección al situarnos encima con el ratón.
  • Cómo dar estilo a los paneles que se muestran y ocultan de cada acordeón.
  • Cómo asignar un evento a todos los elementos del acordeón de una sola vez utilizando Javascript.
  • Cómo asignar y desasignar una clase utilizando .toggle con Javascript.
  • Cómo acceder a un elemento hermano de otro para cambiar su estilo con Javascript..
  • Cómo visualizar u ocultar un elemento mediante Javascript.

Vídeo y código fuente

¿Quieres saber cómo lo he hecho paso a paso? ¡Aquí tienes el código fuente y el vídeo de la solución!

Código fuente de la solución
¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

Y si quieres compartir tu propuesta, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto resuelto: cambiar fondo de página en función del mes

Publicado el por Leave a Comment

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

La semana pasada nos enfrentábamos a un nuevo reto: cambiar el fondo de una página de manera que tuviera una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, partiendo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Soluciones al reto

En esta ocasión os traigo dos soluciones al reto:

  • La primera, utilizando Vanilla Javascript para hacer referencia a los elementos.
  • La segunda, utilizando JQuery, lo que nos reduce sustancialmente el código.
  • Además vemos brevemente cómo trabajar con .scss para generar el .css resultante.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo utilizar variables en .scss para indicar la ruta de partida, colores e imágenes.
  • Cómo resulta el código .css transpilado.
  • Qué estilo utilizar para crear una imagen con un overlay de color.
  • Cómo ejecutar una función después de cargar el DOM de una página con Javascript puro y con jQuery.
  • Cómo crear una función que devuelva una cadena en función de un número.
  • Cómo extraer el mes actual a partir de la fecha actual.
  • Cómo seleccionar el body de una página con Javascript puro y con jQuery y aplicarle una clase en función de la fecha actual.

Vídeo y código fuente

¿Quieres saber cómo lo solucioné paso a paso? (salvando pequeñas diferencias…). ¡Aquí tienes el código fuente y el vídeo de la solución!

Código fuente de la solución
¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

Y si quieres compartir tu propuesta, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto: cambiar fondo de página en función del mes

Publicado el por 9 Comments

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

El enunciado lo dice todo: la página tiene que tener una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, de modo que dispongo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Necesito programar de algún modo que, en función del mes en el que nos encontremos, se modifique el fondo de la página y el color superpuesto.

Te dejo un par de pistas:

  • Clases CSS
  • linear-gradient

¿Te atreves a intentarlo? ¡Espero tus propuestas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…