Ejercicios prácticos CSS Intermedio

Una vez realizado el tutorial de CSS intermedio, te proporcionamos una colección de ejercicios prácticos resueltos. En esta sección, encontrarás desafíos prácticos que te permitirán aplicar tus habilidades y conocimientos de CSS en situaciones del mundo real.

Contenidos del artículo

Puedes encontrar más ejercicios resueltos aquí: ejercicios de nivel básico y ejercicios de nivel avanzado.

Ejercicios prácticos CSS Intermedio

1. Uso de la Propiedad Overflow en CSS

Crea un documento HTML que incluya una caja de contenido con un texto largo. Tu tarea es utilizar la propiedad overflow en CSS para controlar cómo se muestra el contenido de la caja. Sigue estos pasos:

Crea un archivo HTML con la siguiente estructura:

<div class="content-box">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in tincidunt libero. Nullam sit amet risus sed elit bibendum tincidunt. Cras consequat ligula id metus hendrerit, id accumsan odio fermentum. Integer non feugiat orci. Donec eu tristique lectus. Fusce in viverra arcu. Proin condimentum, odio nec auctor tempor, justo elit vestibulum nunc, vel laoreet nunc est vel dolor. Aenean tempus, erat at vulputate consequat, velit lectus sollicitudin dui, ac dignissim est eros at erat. Sed congue posuere diam, vel vehicula metus viverra in. Vestibulum laoreet ex quis euismod. Aenean eu ex eget turpis congue interdum eu in erat.</p>
</div>

En un archivo CSS (llamado styles.css en este caso), agrega estilos a la caja de contenido (content-box) de la siguiente manera:

Establece un ancho y un alto fijo para la caja (width y height).
Utiliza la propiedad correspondiente para incluir una barra de scroll en el eje vertical.

Solución:

.content-box {
    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
    overflow-y: scroll; /* Agregar desplazamiento vertical si el contenido desborda */
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

2. Contenedor Fijo y Variable con `calc()`

Crea un documento HTML que incluya dos contenedores, uno de ancho fijo y otro de ancho variable utilizando la función calc() en CSS. Además, agrega colores de fondo y estilos CSS específicos. Sigue estos pasos:

Crea un archivo HTML con la siguiente estructura:

<div class="fixed-container">
    <p>Contenedor Fijo</p>
</div>
<div class="variable-container">
    <p>Contenedor Variable</p>
</div>

Agrega estilos para los contenedores:

El primer contenedor (fixed-container) debe tener un ancho fijo de 300px, un color de fondo diferente (por ejemplo, #3498db), y utilizar box-sizing: border-box para que el relleno (padding) no afecte el ancho total.
El segundo contenedor (variable-container) debe tener un ancho variable utilizando la función calc(). Su ancho será igual al 100% del ancho del contenedor principal (body) menos el ancho del contenedor fijo, debe tener un color de fondo diferente (por ejemplo, #e74c3c), y también debe utilizar box-sizing: border-box para que el relleno (padding) no afecte el ancho total.

Solución:

.fixed-container {
    width: 300px;
    background-color: #3498db;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}
.variable-container {
    width: calc(100% - 300px);
    background-color: #e74c3c;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

3. Botones Personalizados con distintos cursores

Crea botones personalizados utilizando CSS. Cada botón tendrá un estilo único y un cursor específico. Sigue los siguientes pasos para completar el ejercicio:

Crea un archivo HTML con la siguiente estructura:

 <button class="btn-normal">Botón Normal</button>
 <button class="btn-outline">Botón Outline</button>
 <button class="btn-alert">Botón Alerta</button>

Agrega los estilos necesarios para los botones:

Estilo General de los Botones:
- Establece un relleno (padding) de 10px en la parte superior y inferior y 20px en los lados.
- Elimina el borde utilizando border: none.
- Agrega un margen de 10px alrededor de los botones.
- Usa border-radius para redondear las esquinas de los botones en 5px.
Botón Normal (btn-normal):
- Fondo de color de fondo #3498db.
- Texto en color blanco.
Botón de Tipo Outline (btn-outline):
- Establece un borde sólido de 2px de color #3498db.
- Fondo transparente (background: transparent).
- Texto en color #3498db.
Botón de Alerta (btn-alert):
- Fondo de color de fondo #e74c3c.
- Texto en color blanco.
Estilos Hover y Active:
- Cuando el cursor esté sobre un botón (:hover), aplícale una transformación de escala de 1.1 para agrandarlo ligeramente.
Cursores Personalizados:
- El botón normal (btn-normal) debe tener un cursor de tipo crosshair.
- El botón de tipo outline (btn-outline) debe tener un cursor de tipo pointer.
- El botón de alerta (btn-alert) debe tener un cursor de tipo help.

Solución:

button {
    padding: 10px 20px;
    border: none;
    margin: 10px;
    border-radius: 5px;
    font-size: 16px;
}
.btn-normal {
    background-color: #3498db;
    color: white;
}
.btn-outline {
    border: 2px solid #3498db;
    background: transparent;
    color: #3498db;
}
.btn-alert {
    background-color: #e74c3c;
    color: white;
}
.btn-normal:hover,
.btn-outline:hover,
.btn-alert:hover {
    transform: scale(1.1);
}
.btn-normal {
    cursor: crosshair;
}
.btn-outline {
    cursor: pointer;
}
.btn-alert {
    cursor: help;
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

4. Propiedades Personalizadas en CSS con Colores Específicos

Crea propiedades personalizadas en CSS con nombres específicos y colores personalizados para reutilizar estilos comunes en tu sitio web. Sigue los siguientes pasos:

Crea un archivo HTML con la siguiente estructura:

<h1>Usando Propiedades Personalizadas</h1>
<div class="custom-box">
     <p class="custom-text">Este es un párrafo con estilos personalizados.</p>
</div>

Define propiedades personalizadas con nombres específicos y colores personalizados, y aplícalas a elementos HTML:

Define la propiedad --primary-color con el valor #3498db (color azul) para representar el color principal.
Define la propiedad --secondary-color con el valor white (color blanco) como el segundo color.
Define la propiedad --rounded-border con el valor 10px para especificar el radio de esquina de los elementos.
Define los siguientes estilos para .custom-box y .custom-text:
.custom-box:
- background-color: Debes aplicar la propiedad background-color y usar la variable personalizada var(--primary-color) para establecer el color de fondo.
- border-radius: Debes aplicar la propiedad border-radius y usar la variable personalizada var(--rounded-border) para establecer el radio de esquina de la caja.
- Define el espacio de relleno dentro del elemento .custom-box en 20px.
.custom-text:
- color: Debes aplicar la propiedad color y usar la variable personalizada var(--secondary-color) para establecer el color del texto.
- Aplica un tamaño de fuente de 18px.

Solución:

/* Definición de propiedades personalizadas */
:root {
    --primary-color: #3498db; /* Color principal (azul) */
    --secondary-color: white; /* Segundo color (blanco) */
    --rounded-border: 10px; /* Radio de esquina para elementos */
}
/* Estilos para .custom-box */
.custom-box {
    background-color: var(--primary-color);
    border-radius: var(--rounded-border);
    padding: 20px;
}
/* Estilos para .custom-text */
.custom-text {
    color: var(--secondary-color);
    font-size: 18px;
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

5. Uso de Selectores de Atributos en CSS

Crea un documento HTML simple que contenga una lista de elementos con atributos personalizados. Luego, utiliza selectores de atributos en CSS para aplicar estilos a los elementos que cumplan con ciertos criterios de atributos. Sigue los pasos a continuación:

Crea un archivo HTML con la siguiente estructura:

<ul>
  <li data-type="fruta">Manzana</li>
  <li data-type="fruta">Plátano</li>
  <li data-type="verdura">Lechuga</li>
  <li data-type="verdura">Zanahoria</li>
  <li data-type="carne">Pollo</li>
</ul>

Crea estilos para los elementos de la lista:
- Utiliza un selector de atributos para seleccionar todos los elementos (<li>) que tengan el atributo data-type igual a «fruta». Estiliza estos elementos con un fondo de color verde claro y un texto de color blanco.
- Utiliza otro selector de atributos para seleccionar todos los elementos que tengan el atributo data-type igual a «verdura». Estiliza estos elementos con un fondo de color naranja y un texto de color negro.

Solución:

/* Estiliza elementos con data-type="fruta" */
li[data-type="fruta"] {
    background-color: lightgreen;
    color: white;
}
/* Estiliza elementos con data-type="verdura" */
li[data-type="verdura"] {
    background-color: orange;
    color: black;
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

6. Menú con Transiciones y Transformaciones

Crea un menú de navegación utilizando transiciones y transformaciones en CSS. A continuación, se presenta el código HTML y las especificaciones CSS que debes implementar:

Código HTML:

<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

Instrucciones:

Utiliza el código HTML proporcionado como base para tu página.
Quitar viñetas de la lista: Elimina las viñetas del listado.
Aplicar márgenes horizontales: Añade márgenes horizontales de 5px a los enlaces del menú para separarlos ligeramente.
Eliminar subrayado: Elimina el subrayado de los enlaces en el menú.
Definir color de texto: Establece el color de texto en blanco (#fff) para que los enlaces se muestren en color blanco.
Establecer relleno: Define un relleno de 10px en la parte superior y inferior y 15px en los lados para dar espacio a los enlaces del menú.
Agregar transiciones suaves: Implementa una transición suave de 0.3 segundos en todas las propiedades para que los cambios de estilo sean fluidos.
Color de fondo predeterminado: Define un color de fondo predeterminado para los enlaces en el menú. Puedes usar el color #3498db.
Bordes redondeados: Aplica bordes redondeados (border-radius) con un valor de 5px a los enlaces.
Alinear en línea horizontalmente: Utiliza float: left para alinear los enlaces horizontalmente en el menú.
Estilos al pasar el mouse: Personaliza los estilos para los enlaces cuando el mouse pasa sobre ellos. Cambia el color de fondo a #1f587d y escala ligeramente los enlaces utilizando transformaciones.

Solución:

ul {
  list-style-type: none; /*También list-style*/
}
a {
  margin: 0 5px;
  text-decoration: none;
  color: #fff;
  padding: 10px 15px;
  transition: all 0.3s ease;
  background-color: #3498db;
  border-radius: 5px;
  float: left;
}
a:hover {
  background-color: #1f587d;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

7. Sombras, Gradientes, Filtros en Imágenes y Tooltips

A continuación, se presenta el código HTML y las especificaciones CSS que debes implementar:

<div class="card card-shadow">
  <h3>Ejemplo de Sombra</h3>
  <p>Esta tarjeta tiene una sombra.</p>
</div>
<div class="card card-gradient">
  <h3>Ejemplo de Gradiente</h3>
  <p>Este es un fondo con gradiente.</p>
</div>
<h3>Ejemplo de imagen con filtro y sin filtro</h3>
<img src="https://cdn-icons-png.flaticon.com/256/4193/4193347.png" alt="Imagen sin filtro">
<img src="https://cdn-icons-png.flaticon.com/256/4193/4193347.png" alt="Imagen con filtro" class="filtered-image">
<h3>Ejemplo con tooltip</h3>
<div class="tooltip-container">
  <span class="tooltip-text">Mensaje del tooltip</span>
  <p>Este elemento tiene un tooltip</p>
</div>

Instrucciones:

1. Tarjeta con Sombra

Agrega una sombra a la tarjeta.
Establece un borde sólido de 1px de color gris alrededor de la tarjeta.
Ancho de la tarjeta: 300px.
Relleno de 20px.
Radio de borde de 10px.
Margen de 20px.
La sombra debe ser de 5px de desplazamiento en horizontal y vertical, con un desenfoque de 10px y un color RGBA de negro con una opacidad del 30%.

2. Tarjeta con Gradiente

Establece un fondo con gradiente para la tarjeta.
El gradiente debe ser de color #3498db en la parte superior y #1f587d en la parte inferior.
El texto dentro de la tarjeta debe ser de color blanco.

3. Imagen con Filtro y Sin Filtro

Utiliza una imagen (puedes usar esta URL: https://cdn-icons-png.flaticon.com/256/4193/4193347.png).
Agrega una versión de la imagen sin filtro y una versión con filtro.
La versión con filtro debe tener un 80% de brillo y un 120% de contraste.

4. Elemento con Tooltip

Crea un elemento contenedor para el tooltip.
Este elemento debe incluir un texto que dice «Mensaje del tooltip».
Debe haber un párrafo que diga «Este elemento tiene un tooltip».
Cuando se pasa el cursor sobre el elemento contenedor, se debe mostrar el tooltip.
El tooltip debe tener un fondo marrón, texto blanco y un ancho de 120px.
Debe estar centrado horizontalmente en relación al elemento padre.
Debe tener un borde redondeado de 6px y un relleno de 5px.
La posición del tooltip debe estar justo debajo del elemento contenedor con una distancia de 125% y centrada horizontalmente.
La transición debe suavizar la aparición y desaparición del tooltip con una duración de 0.3s.

Solución:

* {
   font-family: Arial, sans-serif;
}
.card{
  width: 300px;
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
  display: inline-block;
  border: 1px solid grey;
}
/* Ejemplo de sombra en una tarjeta */
.card-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* Ejemplo de gradiente de fondo */
.card-gradient {
  background: linear-gradient(to bottom, #3498db, #1f587d);
  color: white;
}
/* Ejemplo de filtro en imagen */
.filtered-image {
  filter: brightness(80%) contrast(120%);
}
/* Estilo para tooltips */
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: brown;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 125%; /* Posiciona el tooltip bajo del elemento */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

Ejercicios prácticos CSS Intermedio

1. Uso de la Propiedad Overflow en CSS

2. Contenedor Fijo y Variable con calc()

3. Botones Personalizados con distintos cursores

4. Propiedades Personalizadas en CSS con Colores Específicos

5. Uso de Selectores de Atributos en CSS

6. Menú con Transiciones y Transformaciones

7. Sombras, Gradientes, Filtros en Imágenes y Tooltips

2. Contenedor Fijo y Variable con `calc()`