Capítulo 13 Ejercicios de CSS 3

13.1 Capítulo 2

13.1.1 Ejercicio 1

Dado el siguiente código HTML, y utilizando las pseudo-clases first-child, first-of-type, nth-of-type, nth-last-of-type, last-of-type y last-child conseguir el siguiente resultado:

<html>
<head>
    <title>Ejercicio de pseudo-clases</title>
    <style type="text/css">
 
    </style>
</head>
<body>
    <ul>
        <li>Primero</li>
        <li>Segundo</li>
        <li>Tercero</li>
        <li>Cuarto</li>
        <li>Quinto</li>
    </ul>
</body>
</html>
Aspecto tras aplicar los estilos utilizando las pseudo-clases

Figura 13.1 Aspecto tras aplicar los estilos utilizando las pseudo-clases

13.2 Capítulo 5

13.2.1 Ejercicio 2

Dados el siguiente código HTML y CSS base, aplicar las reglas CSS necesarias para conseguir el siguiente aspecto:

Estado final tras aplicar los estilos de borde

Figura 13.2 Estado final tras aplicar los estilos de borde

Descargar los ficheros fuente

13.2.2 Ejercicio 3

Dados el siguiente código HTML y CSS base, aplicar las reglas CSS necesarias para conseguir el siguiente aspecto:

Estado final tras aplicar los estilos de sombra

Figura 13.3 Estado final tras aplicar los estilos de sombra

Descargar los ficheros fuente

13.2.3 Ejercicio 4

Dados el siguiente código HTML y CSS base, aplicar las reglas CSS necesarias para conseguir el siguiente aspecto:

Estado final tras definir fondos múltiples

Figura 13.4 Estado final tras definir fondos múltiples

Descargar los ficheros fuente

13.3 Capítulo 7

13.3.1 Ejercicio 5

Dados el siguiente código HTML y CSS base, aplicar las reglas CSS necesarias para conseguir el siguiente aspecto:

Estado final tras aplicar efectos de fuentes

Figura 13.5 Estado final tras aplicar efectos de fuentes

Descargar los ficheros fuente

13.4 Capítulo 9

13.4.1 Ejercicio 6

Dados el siguiente código HTML y CSS base, aplicar los Media Query necesarios para obtener el comportamiento mostrado en las imágenes.

Aspecto de la web a pantalla completa

Figura 13.6 Aspecto de la web a pantalla completa

Aspecto de la web en una pantalla de 1000px

Figura 13.7 Aspecto de la web en una pantalla de 1000px

Aspecto de la web en una pantalla de 480px

Figura 13.8 Aspecto de la web en una pantalla de 480px

Descargar los ficheros fuente

13.5 Capítulo 10

13.5.1 Ejercicio 7

Dados el siguiente código HTML y CSS base, crear y aplicar las siguientes transformaciones. Utilizar únicamente selectores específicos de CSS 3:

  • Desplazar la primera caja 100px hacia la derecha, y 50px hacia debajo desde su posición original.
  • Incrementar el tamaño de la segunda caja, haciéndola el doble de grande.
  • Rotar la tercera caja en 45º, tanto desde su centro de coordenadas como desde la esquina superior izquierda.
  • Crear un paralelogramo con la cuarta caja, cuyo ángulo de inclinación sea de 25º.

Descargar los ficheros fuente

13.6 Capítulo 11

13.6.1 Ejercicio 8

Dados el siguiente código HTML y CSS base, crear las transiciones necesarias para pasar del estado inicial al final, aplicando las siguientes transformaciones:

  • Rotar los elementos 270º.
  • Intercambiar las posiciones de las cajas 1 y 2, 3 y 4.
  • Cambiar el tamaño de 100px a 50px.
  • Cambiar el color de fondo de azul a rojo.
  • Cambiar el color del texto de negro a amarillo.
  • Cambiar el tamaño de letra de 20px a 18px.

Utilizar en cada caso, una duración y función de tiempo diferentes.

Estado inicial antes de la transición

Figura 13.9 Estado inicial antes de la transición

Estado final tras la transición

Figura 13.10 Estado final tras la transición

Descargar los ficheros fuente

13.7 Capítulo 12

13.7.1 Ejercicio 9

Dados el siguiente código HTML y CSS base, crear las animaciones necesarias para simular un efecto de nieve. Utilizad al menos dos animaciones:

  • La primera para simular la caida de los copos de nieve.
  • La segunda para hacer desaparecer los copos según van llegando al suelo, utilizando la propiedad opacity.

La animación debe ejecutarse de manera infinita.

Copos de nieve en movimiento

Figura 13.11 Copos de nieve en movimiento

Descargar los ficheros fuente

13.8 Ejercicios finales

13.8.1 Ejercicio final 1

Dados el siguiente código HTML y CSS base, aplicar las animaciones y transformaciones necesarias para conseguir el siguiente efecto:

  • Al cargarse la página, únicamente se mostrarán los recuadros con las imágenes, ocultando el título, texto, enlace a "Leer más" y el fondo naranja.
  • Al pasar con el ratón sobre la imagen, debe ocurrir lo siguiente:
    • La imagen de fondo aumentará su tamaño, dando la impresión de que se acerca.
    • Se mostrará el fondo naranja, de manera progresiva.
    • El título aparecerá por la parte superior de la imagen, hasta colocarse en su lugar.
    • El párrafo aparecerá por la parte inferior de la imagen, hasta colocarse en su lugar.
    • Se mostrará el enlace "Leer más", de manera proresiva.
Estado final tras realizar las aminaciones y transformaciones

Figura 13.12 Estado final tras realizar las aminaciones y transformaciones

Descargar los ficheros fuente

13.8.2 Ejercicio final 2

Dados el siguiente código HTML y CSS base, simular el comportamiento de un reloj de aguja:

Reloj marcando las horas, minutos y segundos

Figura 13.13 Reloj marcando las horas, minutos y segundos

Descargar los ficheros fuente