CSS Avanzado

La Hoja de Estilo en Cascada o CSS (Cascading Style Sheets) es un

mecanismo que sirve para añadir estilos a un documento Web con el fin de
modificar su presentación. Esta herramienta ofrece opciones avanzadas para
mejorar el aspecto de nuestras páginas Web. En este espacio de aprendizaje nos
enfocamos en las siguientes:

 Soporte al diseño Web responsive: el diseño responsive permite que

nuestros diseños Web luzcan bien en cualquier dispositivo, sin importar su
tamaño de pantalla. Con CSS, esto lo logramos a través de: utilización de
los media queries y viewports, empleo de propiedades con valores flexibles,
en lugar de valores fijos y el uso de patrones de diseño: Tiny tweaks, Mostly
fluid, Column drop, Layout shifter y Off canvas.
 Aplicación de diversos cambios en los elementos HTML: con CSS, esto
se logra a través del uso de transformaciones (propiedad transform),
transiciones (propiedad transition), animaciones, @keyframes y los filtros
(propiedad filter).
 Uso de funciones predefinidas: una gran gama de funciones agilizan el
desarrollo de código CSS, entre ellas tenemos rotate, var y calc.
 Soporte al Modelo Flexbox y Grid Layout: estos modelos de CSS
soportan diseños Web complejos.
 Existencia de frameworks y herramientas que facilitan el desarrollo en
CSS: se han desarrollado múltiples frameworks para CSS. Nosotros
exploramos brevemente Boostrap, Foundation, Bulma y Tailwind CSS.
También tenemos herramientas para facilitar la creación de código CSS,
tales como: IntelliSense, Color Highlight, Dimensions y ColorZilla.

En esta propuesta instruccional, tendrás la oportunidad de practicar las opciones

avanzadas de CSS, a través de la construcción de códigos que resuelven diversos
retos.

Con gran entusiasmo, te damos la bienvenida a CSS Avanzado.

¿Qué es el Diseño Web Responsive?

¡Felicitaciones! Nos encanta el ritmo de trabajo e interés que has puesto en
comenzar a descubrir nuevas opciones de CSS. A continuación veremos que es
el Diseño Responsive.

En la actualidad, la gran mayoría de los usuarios acceden a las páginas web

utilizando dispositivos móviles, tales como smartphones y tabletas, por lo que
debido a las características de tamaño y recursos disponibles para estos
dispositivos, es fundamental ofrecer una buena experiencia para el usuario.
El Diseño Web Responsive es una técnica de diseño web que permite desarrollar
páginas web que adapten su estructura y los elementos que la componen a las
dimensiones y características de los dispositivos móviles que acceden a ellas.
Consiste en usar propiedades en CSS con valores flexibles, en lugar de valores
fijos, con el fin de ajustar el contenido, de tal forma que el proceso de búsqueda
sea sencillo y eficaz.

Antes de que se difundieran las técnicas de Diseño Web Responsive, era

necesario crear una página específica por cada dispositivo existente que pudiera
acceder a nuestro sitio web. En la actualidad, gracias al uso de esta técnica, basta
con desarrollar una sola página que será compatible con cualquier tipo de
dispositivo, evitando contenidos duplicados, facilitando el proceso de
mantenimiento y reduciendo los costos y el tiempo de desarrollo de nuestros
proyectos.

Para lograr que un proyecto web sea responsive, es necesario determinar el

viewport, o el área de la página web que será visible para el usuario, utilizar
tamaños proporcionales o relativos en lugar de valores fijos en píxeles,
implementar reglas en CSS y crear media queries de acuerdo con cada tamaño
de pantalla. Todo esto, estableciendo las características de los elementos para
que puedan verse correctamente en cada dispositivo.

Actualmente existe una amplia gama de frameworks CSS para diseños web de
este tipo, la cual cuenta con herramientas muy útiles al momento de desarrollar
proyectos que requieran adaptabilidad.

Esperamos que hayas disfrutado de esta píldora de conocimientos. ¡Sigue

adelante que te espera mucho más por conocer acerca de CSS!

¿Qué es el Viewport?
Bienvenido de nuevo al mundo de CSS Avanzado. Este es un excelente momento
para conocer uno de los conceptos básicos relacionados del Diseño Responsive.
En esta oportunidad te presentamos la definición de Viewport.

La era de los dispositivos móviles trajo consigo algunos problemas para los
desarrolladores y diseñadores web. A la hora de comenzar un proyecto web
aparecen preguntas como ¿Qué resolución de pantalla es la adecuada para
realizar un diseño o maquetación web?, ¿La página web será flexible o fija?,
¿Será usable en móviles?.

El viewport es un concepto que inicialmente fue pensado para que los sitios web
pudieran adaptarse a los dispositivos móviles, y se ha convertido en un estándar,
ya que está soportado por la mayoría de los dispositivos móviles en la actualidad
(ver Figura 1).
 Figura 1:
Concepto de Viewport.
Este concepto hace referencia al área disponible para renderizar una página
web, es decir, el área visible del navegador (Excluyendo la barra de búsqueda,
marcadores, pestañas y demás elementos del navegador).

El viewport se configura dentro de la etiqueta <meta> y entre los valores de

configuración que podemos especificar se encuentran: el nivel de escalado que
puede realizar el usuario, el zoom inicial que debe realizar el navegador y el área
disponible para renderizar, el ancho de virtual de la pantalla, entre otros.

Debido a la amplia cantidad de resoluciones de pantallas existentes en el mercado

para smartphones, tabletas, laptops, y otros dispositivos móviles, existe una
tendencia actual de agrupar las medidas de los dispositivos en las siguientes
(según el ancho) (ver Figura 2):

1. Pantallas extra pequeñas (XS), por debajo de 576 píxeles.

2. Pantallas pequeñas (S), a partir de 576 píxeles a 768 píxeles.
3. Pantallas medianas (MD), a partir de 768 píxeles a 992 píxeles.
4. Pantallas grandes (LG), a partir de 992 píxeles a 1399 píxeles.
5. Pantallas extra grandes (XL), a partir de 1400 píxeles.
 Figura 2:
Ejemplo de diversos tamaños de pantallas.
Esta agrupación de resoluciones puede ser muy útil, ya que la relación entre
el viewport y la resolución de la pantalla determinará cómo se visualiza el
contenido de nuestra página en la pantalla, y que el width (ancho) define la
cantidad total de píxeles horizontales disponibles.

A continuación se ve una página web en un dispositivo móvil sin viewport a la

izquierda y con viewport a la derecha (Figura 3).
 Figura 3:
Comparación de una página con o sin uso de la etiqueta viewport.
Estamos muy contentos de haber compartido este espacio contigo. Continua con
nosotros para que sigas explorando CSS Avanzado.

Ejercicio #1:

Desafío práctico
¡Saludos! Excelente momento para verificar lo visto con respecto a Viewport y
sus propiedades relacionadas.

Para este reto de programación deseamos que recrees la siguiente interfaz:

Para lograr esto debes llevar a cabo las siguientes tareas:

1. Utilizando el shortcut (!) del editor VSCode crea el código base html.
Agrega una cabecera, un cuerpo y un footer.
2. Para el body cambia el tipo de letra por Helvética y elimina el margen por
defecto.
3. En la cabecera, agrega una etiqueta h1 con el título. Cambia su color y el
fondo.
4. Agrega una etiqueta div que contenga un texto y una imagen. Aplica el
display correspondiente para que luzca como el video. Cambia el tamaño
de la letra del texto por 26px y el ancho de la imagen por 200px.
 5. Agrega dos párrafos adicionales en el cuerpo de la página utilizando
el shortcut (Lorem) del editor VSCode.
6. Agrega un footer con fondo de color azul, con texto de color blanco y en
negrita.
7. Agrega la configuración del viewport en el documento HTML y cambia
la escala máxima por 2.5.

CheatSheet (Guía Rápida de Estilos)

Para este reto puedes emplear la Guía Rápida de Estilos de CSS que hemos
preparado para ti.

Recomendaciones

 Los colores utilizados son de referencia, experimenta con tu propia paleta

de colores.
 Los shortcuts (!) y (Lorem) pueden ser muy útiles a la hora de crear
código para nuestros proyectos en menor tiempo.
Imagen y videos responsive:
 Definición de Media Queries
Te damos un caluroso saludo y te invitamos a disfrutar esta lectura, a través de la
cual nos familiarizamos con el concepto de Media Queries.

Media Queries
Los media queries son una extensión muy útil de CSS que permite detectar las
características de los dispositivos que acceden a nuestras páginas web, y a partir
de esos datos crear hojas de estilo más personalizadas, que llevan finalmente a
aumentar y mejorar la experiencia del cliente en nuestro sitio. Por lo tanto, ellas
forman parte de lasherramientas fundamentales a la hora de implementar sitios
web responsive.

Los media queries, permiten definir y mostrar contenido de manera condicional

dependiendo de las características del dispositivo y esas condiciones vienen
dadas a través de unos media types, los cuales describen las categorías
generales de los dispositivos, tales como print (destinado a material impreso),
screen (destinado a pantallas de dispositivos), speech (destinado a
sintetizadores de voz), etc.

Media Features

También es posible utilizar media features, las cuales describen características

especiales de los navegadores utilizados por los usuarios. Entre las más
comúnmente utilizadas podemos mencionar las siguientes:

 Width: Tamaño del viewport en horizontal (incluyendo el scrollbar).

 Height: Tamaño del viewport en vertical.
 Orientation: Posición en la que se encuentre el dispositivo.
 Resolution: Tamaño ocupado por el browser en píxeles.
 Color: Detecta si la pantalla en que se visualiza el sitio es a color o en
blanco y negro.
  Light-level: Densidad de la luz del dispositivo.

Dependiendo de los media types y los media features deben crearse estilos
individuales que se ajusten a las condiciones detectadas. El dispositivo renderiza
los estilos creados específicamente para cada condición. A continuación te
presentamos algunas ventajas y desventajas de la utilización de media queries:

VENTAJAS DESVENTAJAS
 Permiten ajustar el contenido
 Se requiere escribir repetidamente algunas
del sitio web a cualquier
de las reglas que deseen aplicarse por cada
dispositivo.
dispositivo agregado.
 Facilitan la implementación de
 Incrementa el tamaño de los archivos CSS.
los diseños responsive.

Esperamos que hayas disfrutado de este contenido relacionado a los media

queries.
Desafío práctico
¡Te damos la bienvenida a aplicar tus primeros conocimientos acerca de CSS! A
continuación presentamos un reto para que pruebes lo visto con respecto
a imágenes responsive y media queries.

Para lograr esto debes llevar a cabo las siguientes tareas:

1. Crea un proyecto que contenga los siguientes elementos: una cabecera con
una imagen, un texto y una imagen en la parte central y un pie de página.
2. Agrega a tu proyecto, la fuente “Dancing script” utilizando la etiqueta link. Nota
que esta fuente está disponible en Google Fonts.
3. Crea una hoja de estilo y agrégala al documento HTML, a través de la etiqueta
link.
4. Aplica los siguientes estilos por defecto:
o Para el body: cambia la font-family por “Dancing Script”.
o Para la cabecera: agrega un gradiente al fondo y una imagen alineada a la
derecha.
o Para el texto: cambia el line-height y el espaciado entre las letras.
o Para la imagen: agrega la imagen utilizando la etiqueta picture. Recuerda
agregar una imagen por defecto, una imagen para un máximo de 500px y
otra para un máximo de 768px. Adicionalmente, agrega un estilo
redondeado a las esquinas.
o Para el pie de página: agrega un color de fondo y centra el texto.
5. Para un máximo de 500px, cambia el color de fondo del pie de página.
6. Para un máximo 1024px de ancho, aplica los siguientes estilos:
o Cambia la font-family por ”Verdana”.
o Para la cabecera: oculta la imagen de la cabecera, cambia el tamaño de la
fuente y cambia el color del fondo por otro.
o Para el texto: cambia el line-height, el espaciado entre las letras y el
tamaño de la fuente.
7. Adicionalmente, agrega una media query para cuando el media type sea igual a
print, con los siguientes estilos:
o Cambia la font-family del body por “Georgia”
o Para la cabecera: cambia el tamaño de la fuente por 1em, cambia el
padding y el margin por 0 y oculta la imagen.
o Para el texto: cambia el line-height 1, el espaciado de la fuente, el tamaño
de la fuente y el color.
o Para la imagen: elimina los bordes redondeados.

CheatSheet (Guía Rápida de Estilos)

Para este reto puedes emplear la Guía Rápida de Estilos de CSS que hemos
preparado para ti.
Cápsula de conocimiento
¿Qué son los Patrones de Diseño?
Te damos la bienvenida y te invitamos a disfrutar de esta píldora de
conocimientos, a través de la cual nos familiarizamos con los patrones de diseño.

A menudo cuando desarrollamos proyectos de software nos encontramos

resolviendo problemas con características similares y en muchos casos
terminamos reutilizando las mismas soluciones una y otra vez. Esto sucede ya que
al utilizar una solución que ha sido exitosa en el pasado, tenemos más
probabilidades de poder utilizarla con éxito en el futuro, siempre y cuando existan
condiciones y contextos similares en los problemas.

Los patrones de diseño son soluciones generales a problemas recurrentes de

diseño, los cuales brindan a los desarrolladores guías para crear código flexible y
reutilizable. Algunas de las ventajas de los patrones de diseño son:

 Facilitan la creación de catálogos de soluciones reutilizables.

 Brindan la oportunidad de utilizar soluciones desarrolladas, a través de
metodologías probadas con anterioridad, en lugar de llevar a cabo el
proceso desde el principio.
 Permiten estandarizar el proceso de diseño de soluciones.
 Reducen el tiempo del proceso de desarrollo.

En el caso del diseño responsive, existen cinco patrones de diseño que facilitan
el proceso de ajuste de nuestro diseño a la pantalla del dispositivo entre los cuales
se encuentran los siguientes:

1. Tiny tweaks: es el patrón más sencillo y consiste en crear una columna

única para el contenido.
2. Mostly fluid: es uno de los patrones más utilizados y consiste en tener una
grilla de tamaño flexible que agrupa los bloques de contenido, ocupando
todo el tamaño disponible para pantallas grandes y medianas.
3. Column drop: este patrón consiste en formar columnas de contenido a
medida que aumenta el tamaño de la pantalla del dispositivo.
4. Layout shifter: consiste en cambiar totalmente el diseño de los bloques de
contenido a medida que cambia el tamaño del dispositivo.
5. Off canvas: es uno de los patrones más complejos y se utiliza ampliamente
en el diseño de aplicaciones móviles. Consiste en mostrar porciones del
contenido al realizar determinados gestos en el dispositivo.

La utilización de patrones en el diseño responsive a menudo puede llegar a

combinar más de dos patrones a la vez y lograr implementaciones más complejas,
dependiendo del proyecto.
Nos despedimos esperando que hayas disfrutado de este contenido sobre los
patrones en el diseño responsive.

Tiny tweaks y Mostly fluid:

Column Drop y Layout Shifter
Cápsula de conocimiento
Off Canvas
Estamos muy contentos de que estés con nosotros nuevamente para compartir
esta lectura acerca de Off Canvas.

Off Canvas es un patrón de diseño responsive con un concepto diferente a los

patrones estudiados anteriormente. En general, los patrones más utilizados
intentan acomodar los elementos y el contenido de cierta manera para que todos
quepan en la pantalla o cambien su disposición y ubicación verticalmente. Off
Canvas a su vez, coloca los contenidos menos usados fuera de la pantalla y
sólo los muestra cuando el tamaño de pantalla es lo suficientemente grande,
y para pantallas pequeñas accede a ellos a través de gestos especiales como tap
o swipe (ver Figura 1).

Figura 1:
Ejemplo del resultado de emplear un patrón de diseño Off Canvas.
Para aplicar este patrón en una página web usando CSS, se deben utilizar
propiedades de transformación, animación y otras que veremos más adelante en
el curso.

Este patrón se popularizó en aplicaciones móviles nativas, ya que facilita el

proceso de navegación y presenta los contenidos de una manera óptima. Sin
embargo, en páginas web es uno de los patrones que menos se utiliza, debido a
su alta complejidad y dificultad en su desarrollo.

Hasta este punto conoces lo que es el patrón de diseño Off Canvas. Sigue en
sintonía con nosotros para que continúes mejorando tus habilidades en el uso de
CSS.

Desafío Patrones de diseño ráctico

¡Te damos la bienvenida a aplicar tus conocimientos en CSS! A continuación
presentamos un nuevo reto para que pruebes lo visto con respecto a patrones de
diseño responsive.

Para lograr esto, debes llevar a cabo las siguientes tareas:

1. Utilizando el shortcut (!) de emmet en VSCode, crea la estructura de un

documento HTML con un wrapper que contenga tres contenedores: un
contenedor principal, uno secundario ubicado a la izquierda y un tercer
contenedor ubicado a la derecha del contenedor principal.
2. Agrega los estilos adecuados al body del documento para eliminar los
márgenes y cambiar la fuente a Verdana. Adicionalmente asigna un line-
height de 1.5 para el texto de todo el documento.
3. Para el wrapper que contiene los tres contenedores, aplica el display
correcto para que los contenedores se ubiquen uno seguido del otro,
utilizando el espacio disponible.
4. Asigna el width de los contenedores para la vista en desktop: principal
50%, secundario a la izquierda 20% y secundario a la derecha 30%.
5. Para los contenedores secundarios, cambia el espaciado de la fuente por
0.2em.
6. Agrega un padding a los párrafos de 5px 20px.
7. Agrega un media query para los dispositivos móviles. Normalmente se
utiliza un máximo de 640px, pero puedes utilizar otra medida si lo deseas.
En este media query, cambia el layout de la página para que todos los
contenedores tengan un ancho del 100% y cambia el orden de los
contenedores para que se muestre en primer lugar el contendor principal,
luego el secundario de la izquierda y por último el secundario de la derecha.
8. Agrega un media query para tabletas. Normalmente se utiliza entre
640px y 1024px, pero puedes utilizar otra medida si lo deseas. Para esta
 medida, cambia el layout de la página para que el contenedor principal y
secundario de la izquierda se ubiquen uno al lado del otro y el contenedor
secundario de la derecha ocupe todo el ancho de la pantalla y se ubique
por debajo de los otros contenedores.

Router y Scale
Perspective, Translate y Skew
Desafío práctico. Perspective/Translate y
Skew
¡Te damos la bienvenida a aplicar tus conocimientos en CSS! A continuación
presentamos un nuevo reto para que pruebes lo visto con respecto
a transformaciones en CSS.

Deseamos que desarrolles una interfaz que se vea como la siguiente:

 Imagen de
referencia

Te hemos proporcionado el código base, el cual deberás modificar hasta lograr

que el cubo se vea como el de la imagen anterior. Para esto debes llevar a cabo
las siguientes tareas:

1. Para cada cara del cubo, te hemos proporcionado las propiedades de

transformación correspondientes con otros valores. Modifica los valores de cada
cara hasta posicionarlos correctamente.
2. Para el cubo, modifica la perspectiva hasta que luzca igual que la imagen
anterior. Adicionalmente, aumenta el tamaño de todo el cubo en un 25%.
3. Cambia el color del texto para cada cara. Adicionalmente, agrega un borde y
ubica el texto en el centro de la cara.

Recomendaciones:

 Recuerda que para los diferentes métodos, al aplicar números positivos o

negativos cambia la dirección de la transformación.
 Recuerda que la perspectiva es la distancia que hay entre un elemento y la
pantalla donde se renderiza la página.
 Resumen de Transformaciones
¡Saludos! En esta oportunidad vamos a resumir lo visto acerca de
transformaciones Sigue avanzando que tienes muchos nuevos conceptos por
descubrir.

La propiedad Transform de CSS permite modificar el espacio de coordenadas de

un elemento usando métodos de transformación que permiten realizar efectos
visuales en 2D y 3D. Al utilizar esta propiedad, podemos hacer ciertas acciones
como mover elementos, rotarlos, aumentarlos o disminuirlos, etc. También es
posible utilizar estas transformaciones de manera combinada para lograr efectos
más interesantes en nuestros diseños web.

A continuación te proporcionamos una guía rápida sobre los métodos que

pueden utilizarse con la propiedad transform y cómo utilizarlos.

Método Variables Ejemplo

rotate: define una

transformación que rota un
elemento alrededor de un
punto fijo en un plano 2D, sin
Recibe un parámetro que transform: rotate(50deg);
deformarlo. Para realizar
especifica el ángulo. transform: rotateX(100px);
rotaciones en 3D, se debe
agregar al final del método
rotate, la identificación del eje
(X, Y o Z)

wscale: define una

Recibe dos parámetros, uno
transformación que
que corresponde a la escala
redimensiona un elemento en
del eje X y otro que
un plano 2D. Es posible transform: scale(2, 0.5);
corresponde al eje Y. En caso
modificar una sola dimensión
de querer mantener la escala
del elemento, agregando el
actual, se utiliza el número 1.
identificador X o Y al método.

perspective: define la distancia Recibe un valor que

entre un elemento en el plano representa la perspectiva del
transform:
Z y el usuario, es decir, la elemento y puede ser
perspective(250px)
perspectiva que tendría el expresada en cualquier
usuario, si la interfaz fuera 3D. medida de CSS.

translate: reposiciona un Recibe dos valores que transform: translate(120px,

elemento en los ejes X y Y con representan las nuevas 50px); transform:
respecto a la posición original coordenadas del elemento. translateX(25px);
 Método Variables Ejemplo

del elemento. En caso de

querer modificar un solo eje,
es posible agregar el valor X o
Y al final del método.

Skew

: distorsiona los puntos dentro

de un elemento por el ángulo
indicado en los parámetros. El
efecto logrado es similar al de Recibe dos ángulos que transform: skew(30deg,
tirar de cada esquina del indican el grado de 20deg); transform:
inclinación del efecto. skewY(10deg);
elemento a lo largo de un
ángulo. En caso de querer
aplicar este efecto en una sola
dimensión se puede agregar X
o Y al final del método.

Gracias por revisar esta píldora de conocimientos. Te esperamos para que visites
otros recursos de aprendizaje relacionados a CSS.

Desafío práctico - Transition

¡Te damos la bienvenida a aplicar tus conocimientos en CSS! A continuación
presentamos un nuevo reto para que pruebes lo visto con respecto a
las transiciones en CSS.

Te hemos proporcionado el código base, el cual te animamos a modificar para

agregar las transiciones correspondientes, hasta lograr los siguientes efectos:

Para esto, agrega las siguientes transiciones al hacer hover del elemento:

1. <body>: aumenta su tamaño un 25%.

2. .cube__face--front: modifica la opacidad del color de fondo por 1.
3. .cube__face--right: cambia el color de la fuente por negro.
4. .cube__face--back: modifica el espaciado de la fuente por 15px.
5. .cube__face--left: cambia el color de fondo de la cara por lavander.
6. .cube__face--top: modifica el tamaño de la fuente por 80px.
7. .cube__face--bottom: cambia el width, height y line-height por 250px.

Recomendaciones:
  Recuerda agregar la propiedad transition a la clase correspondiente y
agregar un trigger o activador para la transición. En este caso, utilizaremos
la pseudo clase hover como activador.
 Para los tiempos de las transiciones, hemos utilizado 1s, pero puedes
utilizar el que consideres pertinente.

Desafío práctico – Keyframe

¡Saludos! Excelente momento para verificar lo visto con respecto a
las animaciones en CSS. A continuación presentamos un nuevo reto para que
pruebes lo aprendido.

Te hemos proporcionado el código base, el cual te invitamos a modificar para

agregar las animaciones correspondientes hasta lograr los siguientes efectos:

En esta ocasión hemos dejado rastros de la solución asociada al ejercicio, con el

objetivo de facilitar la implementación de la solución. Así que, para completar la
solución debes encontrar los rastros de la implementación y completar las
siguientes tareas:

1. Para la animación de las nubes, hemos dejado el código completo del

keyframe. Asegúrate de agregar a las clases correspondientes, las
propiedades necesarias para que funcione.
2. Para el sol, hemos dejado parcialmente la solución del movimiento que
imita la salida/caída del sol. Asegúrate de tomar en cuenta los valores que
hemos dejado dentro del keyframe.
3. Para las montañas, hemos dejado parcialmente los efectos de dos de ellas
(cambiar su color desde el inicio al final). Fíjate en estas dos para construir
la animación de la montaña faltante. Adicionalmente, debes agregar las
propiedades necesarias a cada clase.
4. Para el fondo, hemos dejado la animación completa y sólo debes agregar
las propiedades a la clase correspondiente para hacerla funcionar.

Cápsula de conocimiento
 ¿Qué son los Filtros?
¡Saludos! En esta oportunidad vamos a resumir los conceptos relacionados
a filtros en CSS. Sigue avanzando que tienes nuevos conceptos por descubrir.

¿Qué son los filtros en CSS?

En CSS es posible aplicar efectos o modificaciones gráficas a los elementos de

nuestros sitios web a través de una simple propiedad: filter. Esta propiedad
cuenta con un conjunto muy variado de opciones que permiten conseguir efectos
especiales. Es muy importante acotar que los filtros son una propiedad
experimental y que en la actualidad sólo son soportados por los
navegadores Chrome y Safari, pero se prevé que en el futuro los demás
navegadores mejorarán la compatibilidad con propiedades experimentales como
esta.

Los posibles valores que puede tomar esta propiedad son los siguientes:

1. Blur: agrega un efecto de desenfoque.

2. Grayscale: convierte un elemento a una escala de grises.
3. Invert: invierte el color, la saturación y el brillo.
4. Sepia: aplica un tono sepia.
5. Hue-rotate: aplica una rotación del tono de entrada.
6. Brightness: indica el porcentaje del brillo.
7. Opacity: modifica la transparencia al elemento.
8. Saturate: modifica la saturación.
9. Drop-shadow: aplica un efecto de sombra al elemento.
10. Contrast: ajusta el contraste de la entrada.

En la Figura 1 se aprecia la aplicación de diferentes filtros a una imagen:

 Figura 1:
Ejemplos de aplicación de diferentes filtros a una imagen.

Una de las principales ventajas de los filtros radica en la posibilidad de

reutilizar elementos dentro de nuestrasinterfaces y dar más versatilidad a nuestros
diseños, por ejemplo al aplicar estos filtros a la imagen, podríamos sercapaces de
expresar el estatus de un elemento (activo, deshabilitado, etc), aplicar efectos al
posicionarnos sobre elelemento, utilizarlo como fondo de una sección, entre otros.

Esperamos que hayas disfrutado esta píldora de conocimiento. ¡Sigue así!

Desafío práctico – BOX-SIZING
¡Te damos la bienvenida a aplicar tus conocimientos en CSS! A continuación
presentamos un nuevo reto para que pruebes lo visto con respecto a los filtros en
CSS.

Te hemos proporcionado el código base, el cual te animamos a modificar para

agregar las propiedades correspondientes, hasta lograr los siguientes efectos:

Para completar la solución, implementa las siguientes tareas:

1. Para todas las imágenes, aplica un filtro de escala de grises del 100%.
2. Al hacer hover de las imágenes, modifica el parámetro del filtro por
0 para mostrar los colores originales de las mismas.
3. Agrega el selector :active para cada elemento padre de las imágenes
y agrega los siguientes filtros: sepia, invert, hue-rotate, saturation,
contrast y brightness.
4. Al hacer click sobre la imagen, elimina el color de background del texto.

Recomendaciones:

 Antes de llevar a cabo las tareas anteriormente mencionadas, realice una

revisión de la estructura del documento HTML para familiarizarte con las
etiquetas y elementos.
 Aplica los parámetros de la propiedad filter de forma adecuada. Recuerda
que pueden ser de tipo porcentaje, px, deg, etc.
 Para facilitar el proceso de aplicación de filtros, crea un id para cada una de
las imágenes.

Cápsula de conocimiento
Introducción a las Funciones
¡Hola! Excelente momento para seguir descubriendo a CSS. Veamos
algunas funciones de CSS de gran utilidad.

A diferencia de otros lenguajes de programación, no es posible crear nuestras

propias funciones en CSS, pero si es posible utilizarlas como parámetro ya que
representan tipos de datos complejos o invocan cálculos o procesamiento de
datos, que retornan un valor que luego es interpretado por el selector.

Probablemente has utilizado con anterioridad muchas funciones en CSS sin

haberlo notado, y es que su utilización es bastante común y resulta de mucha
utilidad en la mayoría de los casos. A continuación te presentamos una tabla
que contiene algunas de las funciones más utilizadas en CSS:

Función Descripción Parámetros

 Deg: ángulo (0 - 360)
 Grad: ángulo en radianes (0 - 400)
 Rad: ángulo en radianes (0 - 2π)
Rota un elemento alrededor
rotate()  Turn: representa un ángulo en un
de un punto fijo en 2D.
número de rotaciones. Una rotación
entera es igual a 1 turn

Define una transformación Recibe uno o dos parámetros que indican el

scale() que redimensiona un tamaño del elemento en el eje x y en el eje y
elemento en el plano 2D respectivamente.
Es una función matemática Realiza operaciones de suma, resta,
que permite calcular multiplicación y división. Los caracteres (+,-)
calc()
operaciones aritméticas deben estar rodeados de espacios en blanco.
básicas Pueden usarse valores en px, %, rem, em, etc.
Convierte un elemento a Recibe un porcentaje o número entre 0 y 1 para
grayscale()
escala de grises indicar la intensidad del filtro.
Expresa un color en notación
rgb, indicando los Recibe un valor entre 0 y 255 para los
rgba() componentes componentes de color y un número entre 0 y 1
correspondientes (red, green, para la opacidad.
blue y opcionalmente opacity)
Recibe la posición de inicio del gradiente (to
Es una función que crea una
left, to right, to bottom, etc) o el ángulo de la
imagen que consiste en la
linear- dirección del gradiente. A continuación va la
transición entre dos o más
gradient() lista de colores del gradiente, seguida
colores a lo largo de una línea
opcionalmente, por el porcentaje que ocupa el
recta
color en el total del gradiente.
Se utiliza para incluir archivos Recibe un URL absoluto, relativo o URI que
url()
en CSS describe la ubicación de un elemento.
Recibe dos valores que trasladan al elemento a
Reposiciona un elemento en
translate() las coordenadas del X y Y respectivamente.
los ejes X y Y en el plano 2D
Recibe valores en px, em, %, etc.
Inserta el valor de una Recibe un valor con la variable correspondiente
var() variable en lugar de un y opcionalmente recibe un valor que será
parámetro utilizado, si el primer valor no está disponible.

Existen muchas otras funciones que complementan esta lista y que nos permiten
realizar acciones más específicas dependiendo del contexto de nuestros
proyectos; algunas de las cuales son experimentales y que sólo son compatibles
con algunos navegadores. Te recomendamos visitar la documentación de los
mismos antes de implementarlos en tus proyectos.

Esperamos que hayas disfrutado de este espacio. Continúa con nosotros para
seguir descubriendo más características de CSS.

Desafío práctico - GRID

¡Hola, que bueno encontrarte por acá para seguir aplicando tus conocimientos de
CSS! A continuación presentamos un nuevo reto para que pruebes lo visto con
respecto al Grid.

Te hemos proporcionado el código base, el cual te animamos a modificar para

agregar las propiedades correspondientes, hasta lograr que la disposición de los
elementos dentro del periódico “Noticias CSS” se vea de la siguiente manera:

Para completar la solución, implementa las siguientes tareas:

1. Verifica que comprendes la estructura de los elementos en el archivo

html y luego agrega a la clase correspondiente el display: grid. Agrega
también el tamaño de la distribución de las columnas con la propiedad grid-
template-columns.
2. Agrega las propiedades correspondientes a los elementos con las
clases del tipo “box-*”, indicando donde comienzan y terminan las
columnas. Para esto recuerda que en algunos casos es posible que las
celdas del grid se superpongan o intersecten.

Recomendaciones:

 Recuerda utilizar la unidad fr para las medidas de las columnas del grid.
 Para ayudarte a visualizar la disposición de las filas y columnas del grid
puedes cambiar el color de fondo.

Cápsula de conocimiento
¿Qué es un Framework?
¡Enhorabuena! Te felicitamos por seguir progresando y ampliando los
conocimientos con nuevos conceptos y herramientas de gran utilidad. Ahora
vamos a considerar los aspectos relacionados con los frameworks.

Durante el desarrollo de software es poco común iniciar un proyecto, sin

tener una base como referencia, por lo que en general se utiliza un
framework, el cual es un marco de trabajo predefinido que se emplea como punto
de partida al comenzar un proyecto nuevo y que permite usar un conjunto de
estructuras y soluciones probadas con anterioridad.

La utilización de un framework en CSS nos ofrece numerosas ventajas y

desventajas, entre las cuales podemos destacar las siguientes:

Ventajas Desventajas
Disminuye el tiempo de desarrollo de Al contener muchos elementos predefinidos,
nuestros proyectos, ya que al incluir el tamaño de los archivos puede influir en el
numerosos estilos predefinidos, el tiempo de desempeño de nuestras aplicaciones, ya que
implementación se reduce a la curva de aunque no utilicemos los estilos, ellos
aprendizaje del framework. estarán presentes en el archivo final.
Facilita el desarrollo en equipo, ya que Los frameworks en la actualidad suelen ser
cualquier persona familiarizada con el altamente utilizados, por lo que salvo que
framework puede modificar el código editemos algunas propiedades del framework
existente y agregar componentes nuevos, nuestro proyecto, podría terminar
manteniendo la consistencia. pareciéndose a otros.
Dependiendo del framework, la curva de
Nos ayuda a mantener la compatibilidad a
aprendizaje del mismo puede ser muy
través de los navegadores, ya que las
elevada, incrementando el tiempo que
soluciones implementadas en los frameworks
debemos invertir en aprender a utilizar el
han sido probadas con anterioridad.
framework.
Al ser un marco de trabajo es posible
Al ser mantenidos constantemente por una
aprender a utilizarlo sin entender de manera
comunidad global de desarrolladores, cuenta
profunda el funcionamiento de CSS, lo cual
con correcciones y actualizaciones que
puede ser un inconveniente en caso de que
amplían sus funcionalidades y actualizan sus
queramos modificar alguna característica
componentes.
relacionada con la base del mismo.

En la actualidad existe un gran número de frameworks en CSS, entre los

cuales podemos mencionar los siguientes:

1. Bootstrap
2. Foundation
3. Bulma
4. Tailwind CSS

Todos estos frameworks tienen diferentes ventajas y desventajas a la hora de

utilizarlos en nuestros proyectos, las cuales exploraremos posteriormente.

¡Muy bien! Acabas de ver los frameworks de CSS, te invitamos a seguir

conociendo este gran aliado para el desarrollo de tus programas. ¡Éxito!
 Mi primera página con Bootstrap
¡Felicitaciones por llegar hasta este punto! Con esta actividad práctica aprenderás
a agregar el framework CSS a nuestros proyectos y a sumar las primeras clases a
nuestros elementos HTML.

Paso a paso, describimos el proceso para incluir el framework CSS llamado

Bootstrap a un proyecto:

1. Crea un proyecto nuevo en tu editor VSCode.

2. Agrega dentro del cuerpo una cabecera, un contenedor con un texto y una
imagen.
3. Accede a la siguiente dirección: https://getbootstrap.com/docs/5.1/getting-
started/introduction/
4. Agrega las etiquetas correspondientes al CSS y al JS en el archivo HTML.
Recuerda que la etiqueta correspondiente al CSS se ubica en el header y la
etiqueta <script> correspondiente al JS del framework se ubica dentro del body del
HTML.
5. Recuerda que para agregar estilos en Bootstrap, es necesario agregar las
clases correspondientes a los estilos que debes aplicar a tus elementos. En
la sección de documentación de Bootstrap puedes verificar las clases necesarias
para conseguir que tu proyecto luzca de la siguiente manera:

CSS AVANZADO
Estamos muy contentos por haber compartido contigo este trayecto por CSS.
Esperamos que hayas disfrutado de lasactividades y recursos relacionados a este
contenido y hayas obtenido los conocimientos y habilidades de gran utilidadpara
tus desarrollos web.

Es imposible no hablar de diseño responsive, hoy en día donde existe una

amplia gama de dispositivos con diferentescaracterísticas y tamaños de pantallas.
El diseño responsive es la base para acomodar los contenidos HTML a
cadadispositivo, de forma tal de que el usuario se sienta cómodo visualizando los
mismos, sin importar qué equipo estáempleando. Los media queries, los media
types y el viewport son conceptos esenciales de CSS que nos permiten realizar
undiseño responsive.

Cuando trabajamos con diseños responsive que incluyen vídeos e imágenes es

importante emplear porcentajes en los valoresde las propiedades, para así
conseguir que estos elementos se ajusten al tamaño de las diversas pantallas.

Los patrones de diseño son soluciones generales a problemas recurrentes de

diseño. Examinamos cinco patrones: Tiny tweaks, Mostly fluid, Column drop,
Layout shifter y Off canvas.
Continuamos estudiando las transformaciones en CSS, que nos permiten aplicar
diversos cambios en los elementos HTML.Ligado a esto también encontramos
las animaciones, que dan vida a nuestros contenidos, a través del uso de
lastransiciones y @keyframes. Otro aspecto de las transformaciones son
los filtros CSS usados para la aplicación de efectosespaciales, en particular a las
imágenes.

El modelo de caja de CSS es un modelo que define cajas rectangulares que

incluyen relleno, bordes e imágenes que songenerados para cada uno de los
elementos. Box Sizing controla cómo es el manejo del modelo de caja para los
elementos.Nos detuvimos a ilustrar la aplicación de esta propiedad con los
diversos valores.

CSS incluye una amplia gama de funciones, tales como rgba y var, que
soportan diversas funcionalidades predefinidas, lascuales examinamos a través
del uso de ejemplos.

A continuación, contrastamos el modelo de cajas o Flexbox con el modelo

Layout y su utilidad en el diseño depáginas Web.

Concluimos nuestro andar por esta tecnología, con una revisión de

los frameworks para CSS: Bootstrap, Foundation, Bulma y Tailwind CSS;
además de varias herramientas para facilitar el desarrollo de código CSS.

A través del uso de un enfoque teórico-práctico, has ido obteniendo las

habilidades necesarias para complementar tuscontenidos HTML, otorgándole
estilos que le permitirán a los usuarios disfrutar de ellos desde la comida de
cualquierdispositivo.

Luego de haber culminado exitosamente el curso de CSS Avanzado, has

desarrollado las siguientes capacidades:

1. Aplicar métodos y propiedades de CSS para la creación de sitios Web

responsive.
2. Usar efectivamente los patrones de diseño en el proceso de diseño de
soluciones con CSS.
3. Aplicar diversos cambios en los elementos HTML, a través del uso de
transformaciones, animaciones y filtros de CSS.
4. Usar el modelo Flexbox y Grid Layout en los diseños con CSS.
5. Identificar funciones de uso frecuente en el desarrollo con CSS.
6. Comparar diversos frameworks para desarrollos con CSS.
7. Conocer varias herramientas para facilitar la creación de código en CSS.
Diagramación con CSS >Prueba

Comenzado en Sunday, 7 de August de 2022, 14:11

Estado Terminados

Finalizado en Sunday, 7 de August de 2022, 14:42

Tiempo empleado 30 mins 55 segundos

Puntos 9/10

Calificación 90 de un total de 100

Pregunta 1
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Relaciona cada función en CSS con su respectiva descripción.

Respuesta 1
linear- Crea una imagen que consiste en la transición entre dos o más colores a lo largo de una línea recta
gradien
t

Respuesta 2
Define una transformación que redimensiona un elemento en el plano 2D
scale

Respuesta 3
Es una función matemática que permite calcular operaciones aritméticas básicas
calc

graysca Respuesta 4
le Convierte un elemento a escala de grises
 Convierte un elemento a escala de grises

Retroalimentación
La respuesta correcta es: linear-gradient → Crea una imagen que consiste en la transición entre dos o
más colores a lo largo de una línea recta, scale → Define una transformación que redimensiona un
elemento en el plano 2D, calc → Es una función matemática que permite calcular operaciones
aritméticas básicas, grayscale → Convierte un elemento a escala de grises

Pregunta 2
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
El método ___________ se emplea para torcer o sesgar una figura en uno o ambos ejes.

Seleccione una:

a. Skew

b. Translate

c. SkewX

d. TranslateX

Retroalimentación
E l método Skew recibe dos valores en grados como parámetros. El primer valor determina el
grado de inclinación con relación al eje X y el segundo indica el grado de inclinación con respecto
al eje Y.

La respuesta correcta es: Skew

Pregunta 3
Correcta

Puntúa 1 sobre 1
 Señalar con bandera la pregunta

Texto de la pregunta
Relaciona cada patrón de diseño con su descripción.

Respuesta 1
Tiny consiste en crear una columna única para el contenido.
twe
aks

Respuesta 2
Mos consiste en tener una grilla de tamaño flexible que agrupa los bloques de contenido ocupando todo el tamaño disponible para pantallas grandes y med
tly
fluid

Colu Respuesta 3
mn consiste en formar columnas de contenido a medida que aumenta el tamaño de la pantalla del dispositivo.
dro
p

Lay Respuesta 4
out consiste en cambiar totalmente el diseño de los bloques de contenido a medida que cambia el tamaño del dispositivo.
shift
er

Retroalimentación
La respuesta correcta es: Tiny tweaks → consiste en crear una columna única para el contenido., Mostly
fluid → consiste en tener una grilla de tamaño flexible que agrupa los bloques de contenido ocupando
todo el tamaño disponible para pantallas grandes y medianas., Column drop → consiste en formar
columnas de contenido a medida que aumenta el tamaño de la pantalla del dispositivo., Layout shifter →
consiste en cambiar totalmente el diseño de los bloques de contenido a medida que cambia el tamaño del
dispositivo.

Pregunta 4
Incorrecta

Puntúa 0 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
____________ es el valor por defecto de la propiedad ________ y define que los valores de ancho y
alto, sólo se aplican al contenido del elemento.

Seleccione una:

a. content-box; box-sizing

b. content-box; filter

c. border-box; box-sizing

d. border-box; filter

Retroalimentación
La propiedad box-sizing controla cómo es el manejo del modelo de caja para los elementos. La
propiedad box-sizing tiene diferentes valores disponibles para su aplicación. Por defecto, el valor
de esta propiedad es content-box que define que los valores de ancho y alto, sólo se aplican al
contenido del elemento.

La respuesta correcta es: content-box; box-sizing

Pregunta 5
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Relaciona cada propiedad del atributo content del viewport con su definición:

Respuesta 1
indica la anchura virtual emulada de la pantalla o la anchura del Viewport.
width

Respuesta 2
indica la altura virtual del dispositivo o altura del Viewport.
height

initial- Respuesta 3
scale indica el nivel del zoom inicial al navegador del dispositivo que está accediendo a nuestra página web.
 Respuesta 4
maximu indica la escala o el zoom máximo del documento.

m-scale

Retroalimentación
La respuesta correcta es: width → indica la anchura virtual emulada de la pantalla o la anchura del
Viewport., height → indica la altura virtual del dispositivo o altura del Viewport., initial-scale → indica
el nivel del zoom inicial al navegador del dispositivo que está accediendo a nuestra página web.,
maximum-scale → indica la escala o el zoom máximo del documento.

Pregunta 6
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Un ________ establece un conjunto de líneas verticales y horizontales imaginarias que se intersectan
entre sí, para indicar dónde pueden ubicarse los elementos dentro de estas líneas. El Modelo
______________ nos permite crear tamaños fijos y flexibles para los elementos.

Seleccione una:

a. grid; Grid Layout

b. grid; Flexbox

c. container; Flex-responsive
b. wrapper Grid; Flexbox

Retroalimentación
Un grid establece un conjunto de líneas verticales y horizontales imaginarias que se intersectan
entre sí, para indicar dónde pueden ubicarse los elementos dentro de estas líneas. El Modelo Grid
Layout nos permite crear tamaños fijos y flexibles para los elementos.

La respuesta correcta es: grid; Grid Layout

Pregunta 7
Correcta

Puntúa 1 sobre 1
 Señalar con bandera la pregunta

Texto de la pregunta
¿Cuáles de las siguientes características de un navegador se pueden cambiar empleando los media
features?
Seleccione una o más de una:

a. Tamaño del viewport en horizontal

b. Tipo de medio (e.g. impresora)

c. Densidad de la luz del dispositivo

d. Posición en la que se encuentre el dispositivo

Retroalimentación
Los media features describen características especiales de los navegadores utilizados por los
usuarios, tales como: Width, Height, Orientation, Resolution, Color y Light-level.
Las respuestas correctas son: Tamaño del viewport en horizontal, Posición en la que se encuentre el
dispositivo, Densidad de la luz del dispositivo

Pregunta 8
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Si deseamos incluir un vídeo en una página web que sea responsive y tenga una mejor accesibilidad y
posicionamiento en las búsquedas ¿Cuál de las siguientes opciones debemos emplear?

Seleccione una:

a. Empleamos la etiqueta figure junto a la etiqueta vídeo y un ancho del vídeo en unidades de

porcentaje.

b. Empleamos la etiqueta figure junto a la etiqueta vídeo y un ancho del vídeo en unidades de píxeles.
c. Empleamos la etiqueta vídeo y un ancho del vídeo en unidades de porcentaje.

d. Empleamos la etiqueta vídeo y un ancho del vídeo en unidades de píxeles.

Retroalimentación
Se puede utilizar la etiqueta video en conjunto con la etiqueta semántica figure, de esta manera es
posible agregar una descripción o título a la imagen, lo cual mejora la accesibilidad a nuestras
páginas web, así como el SEO o posicionamiento de las mismas. Para manejar los videos de
manera responsive, utilizamos medidas basadas en porcentaje.

La respuesta correcta es: Empleamos la etiqueta figure junto a la etiqueta vídeo y un ancho del vídeo en
unidades de porcentaje.

Pregunta 9
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Cuando usamos el patrón de diseño ___________ determinamos __________ mediante __________ por
cada tamaño de pantalla.

Seleccione una:

a. Layout shifter, breakpoints, media queries

b. Layout shifter, media queries, breakpoints

c. Column drop, breakpoints, media queries

d. Column drop, media queries, breakpoints

Retroalimentación
Cuando usamos el patrón de diseño Layout shifter determinamos breakpoints mediante media
queries por cada tamaño de pantalla.

La respuesta correcta es: Layout shifter, breakpoints, media queries

Pregunta 10
Correcta

Puntúa 1 sobre 1
 Señalar con bandera la pregunta

Texto de la pregunta
_____________ es un framework que no depende de JavaScript.

Seleccione una:

a. Bulma

b. Bootstrap

c. Foundation

d. Atomic CSS

Retroalimentación
Bulma es un framework muy fácil de personalizar que utiliza únicamente código CSS y no posee
ninguna dependencia con JavaScript.

La respuesta correcta es: Bulma