Clase 7: Medidas y estilos CSS

Propiedad texto
 text-align

La propiedad text-align en CSS se utiliza para especificar la alineación horizontal del

contenido de un elemento de texto, como un párrafo, un encabezado, un enlace o
cualquier otro elemento que contenga texto. Puedes usar esta propiedad para alinear
el contenido de texto a la izquierda, a la derecha, en el centro o justificarlo en el
espacio disponible.

Los valores que puedes asignar a la propiedad text-align son los siguientes:

● left: alinea el contenido de texto a la izquierda.

● right: alinea el contenido de texto a la derecha.
● center: alinea el contenido de texto en el centro del elemento.
● justify: justifica el contenido de texto en el espacio disponible, lo que significa
que el texto se ajusta para llenar todo el ancho disponible del elemento.
 text-decoration

a propiedad text-decoration en CSS se utiliza para agregar decoraciones

visuales a elementos de texto, como subrayados, líneas sobre el texto y líneas a
través del texto.

Los valores que puedes asignar a la propiedad text-decoration son los siguientes:

● none: no se agregará ninguna decoración de texto.

● underline: agrega una línea debajo del texto.
● overline: agrega una línea encima del texto.
● line-through: agrega una línea horizontal a través del texto.
● blink: hace que el texto parpadee (no se recomienda su uso, ya que puede
ser molesto y dificultar la lectura del contenido).

También puedes combinar varias decoraciones de texto. Por ejemplo, si

quisieras agregar una línea sobre y debajo del texto, podrías hacerlo así:
 text-transform

La propiedad text-transform en CSS se utiliza para cambiar el caso del texto en

un elemento, es decir, convertir el texto a mayúsculas, minúsculas o
capitalizar la primera letra de cada palabra.

Los valores que puedes asignar a la propiedad text-transform son los

siguientes:

● none: no se realizará ninguna transformación de texto.

● uppercase: convierte todo el texto en mayúsculas.
● lowercase: convierte todo el texto en minúsculas.
● capitalize: convierte la primera letra de cada palabra en mayúscula.
 text-indent

La propiedad "text-indent" se utiliza en CSS para establecer la

sangría de la primera línea de un texto. La sangría es el espacio en
blanco que se deja en el margen izquierdo de un elemento.

Tambien podemos utilizar valores negativos para hacer que el

texto se mueva hacia la izquierda en lugar de hacia la derecha.
 letter-spacing

La propiedad letter-spacing en CSS se utiliza para establecer el

espaciado entre caracteres en un texto. Esto puede ayudar a
mejorar la legibilidad del texto y darle un aspecto más estético.

Podemos utilizar valores negativos para hacer que los caracteres

se junten en lugar de separarse.
 line-height

a propiedad line-height en CSS se utiliza para establecer la altura de

línea de un texto. La altura de línea es la distancia vertical entre las
líneas de texto en un bloque de texto.

Dentro de line-height, la propiedad permite valores que puede ser

un número sin unidades (por ejemplo, 1.5) o una medida con
unidades (por ejemplo, 24px).

uedes utilizar valores en porcentaje para establecer la altura de

línea en relación al tamaño de fuente. Por ejemplo, si quieres
establecer una altura de línea del 150% del tamaño de fuente para
un elemento
 word-spacing

La propiedad word-spacing en CSS se utiliza para establecer el

espaciado entre palabras en un texto. Esto puede ayudar a
mejorar la legibilidad del texto y darle un aspecto más estético.

La propiedad permite utilizar valores negativos para hacer que las

palabras se junten en lugar de separarse.
 Text-shadow

La propiedad text-shadow en CSS se utiliza para agregar

sombras a un texto. Esta propiedad puede utilizarse para mejorar
la legibilidad del texto y darle un aspecto más estético.

el elemento HTML al que se le aplicará la propiedad, "valorX" y

"valorY" son la posición horizontal y vertical de la sombra,
"valorBlur" es la cantidad de desenfoque que se quiere aplicar a la
sombra y "color" es el color de la sombra.
 writing-mode

La propiedad writing-mode en CSS se utiliza para establecer la

dirección de escritura de un elemento y determinar la orientación
del texto. Esto es especialmente útil cuando se trabaja con
lenguajes que se escriben de derecha a izquierda, como el árabe o
el hebreo.

Los valores pueden ser horizontal-tb para texto horizontal,

vertical-rl para texto vertical de derecha a izquierda, y vertical-lr
para texto vertical de izquierda a derecha.
Propiedad listas
 list-style-type

La propiedad list-style-type en CSS se utiliza para especificar el tipo de

viñetas (bullet points) que se utilizarán en una lista no ordenada (<ul>)
o el tipo de numeración que se utilizará en una lista ordenada (<ol>).
 list-style-position

La propiedad list-style-position se utiliza en CSS para especificar la

posición del marcador (punto o número) de un elemento de lista. Esta
propiedad se utiliza en conjunto con las propiedades list-style-type y
list-style-image, que determinan la apariencia del marcador.

La propiedad list-style-position acepta dos valores: outside (default)

● outside: El marcador se posiciona fuera del flujo de contenido

del elemento de lista, por lo que aparece a la izquierda del
elemento de lista pero no dentro de su contenido.

● inside: El marcador se posiciona dentro del flujo de contenido

del elemento de lista, por lo que aparece a la izquierda del
contenido. Este es el valor predeterminado.

inside
 list-style-image

● La propiedad list-style-image se utiliza en CSS para especificar

una imagen personalizada como marcador de una lista. En lugar
de usar los marcadores predefinidos (como un círculo o un
número), puedes usar una imagen personalizada para darle un
aspecto único a tu lista.
● Para utilizar esta propiedad, se debe especificar una URL que
apunte a la imagen deseada. La imagen se mostrará en lugar
del marcador predeterminado y se ajustará automáticamente
para que se ajuste al tamaño del marcador. Si la imagen no se
puede cargar o no existe, se usará el marcador predeterminado
en su lugar.
 list-style

La propiedad list-style en CSS se utiliza para establecer el estilo de

la lista, incluyendo el tipo de viñetas (bullet points), el tipo de
numeración y la imagen de fondo de la viñeta.

List-style es la abreviatura a los llamados de las siguientes

propiedades:

- list-style-type
- list-style-position
- list-style-image

Pruébalo en w3schools
Unidades de medida
 Unidades de medida

Con lo poco que vimos de CSS hasta el momento,

trabajamos las unidades de medida utilizando la
referencia px, que corresponde a píxeles.

Pero en sí, CSS cuenta con varias otras unidades de

medida, las cuales vamos a tratar a continuación, para
ver de qué forma nos pueden ayudar a desarrollar
mejores aplicaciones web.
 Unidades de medida

CSS cuenta con dos categorías en las cuales se dividen

las unidades de medida. Ellas son:

● medidas absolutas

● medidas relativas
 Unidades de medida

Medidas absolutas

Son las que utilizamos a diario y las que no dependen de un valor de

referencia. Entre ellas podemos mencionar al pixel, centímetro,

metro, etcétera.

Se las conoce también como medidas fijas, y no varían según el

dispositivo.
 Unidades de medida

Medidas relativas

Se calculan en base a otra unidad de medida definida. Un ejemplo

sería el uso de em y rem (ya las veremos con más detalle).

Estas medidas, respecto a las absolutas, son más apropiadas para

realizar ajustes en diferentes dispositivos, manteniendo un layout

consistente.

(continúa)
 Unidades de medida

Medidas relativas

Estas medidas son calculadas por el navegador web, en base a

otra unidad. Esto las hace flexibles, por lo cual podremos tener

diferentes resultados, según el entorno donde se ejecute nuestra

aplicación web.
Medidas absolutas
 Medidas absolutas
Unidad Descripción

px Pixel: unidad de medida que se refiere a pequeños puntos luminosos en una pantalla.

Point: unidad de medida conocida por diseñadores, y por aquellos que estudian tipografías. Se
pt
usa en propiedades relacionadas con la fuente tipográfica de un proyecto.

Inches: pulgada en inglés. Si bien es muy común cuando hablamos de medidas de pantallas
in
(monitores o TVs), es posible (aunque poco visto), su uso en el mundo web.

Centímetro/Milímetro. Existen pero también son poco implementadas en CSS. De la misma

cm/mm
forma en que pt, el uso de estas medidas es más orientado a hojas de estilo para impresiones.

Paica: muy poco usada en el mundo web y heredada también del mundo de las tipografías,
pc
también está disponible en CSS.
 Unidades absolutas

Veamos, a continuación, un ejemplo de

referencia sobre las diferentes medidas

absolutas tratadas hasta aquí:

1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc = 96 px
Medidas relativas
 Medidas relativas
Las medidas relativas son aquellas que tienen en cuenta el contexto donde se encuentran.
Si el contexto cambia, estas medidas cambiarán con él.
 El contexto
Según de qué medida estemos hablando, el número que pongamos será
relativo a:
● El contenedor padre.
● El tamaño de la fuente del sitio.
● El tamaño de la fuente del contenedor padre.
● El tamaño del viewport.
Si tomamos los porcentajes como ejemplo, podemos decir que son una unidad
relativa, puesto que 30% de ancho no será lo mismo para un elemento
situado dentro de un contenedor de 2000px de ancho que para un contenedor
de 1000px de ancho.
 Cómo funcionan los ems
Los ems son siempre relativos al elemento padre. Tomarán como valor de
referencia la propiedad font-size.
El punto de referencia inicial es el valor de font-size del elemento <html>, que
por defecto es 16px. El resto de los elementos tendrán 1em de font-size que
equivale al mismo valor que tenga el padre.
Si le asignamos 1.5em al font-size de cualquier elemento, el tamaño resultante
será el valor del padre multiplicado por el valor en ems → 16px * 1.5 = 24px.

css p { font-size: 1.5em } // 16px * 1.5 = 24px

 Cómo funcionan los ems
Si utilizamos ems en una propiedad que no sea font-size, se tomará para el
cálculo el font-size que tenga el elemento que estemos modificando.
Por lo general, se utilizan este tipo de unidades para todo lo que sea
relacionado a la tipografía, pero también podemos aplicarlo a otras
propiedades como margin y padding para que varíen en función de los
tamaños de las fuentes.
p {
font-size: 20px;
css line-height: 2em; // 20px * 2 = 40px
padding: 1.5em; // 20px * 1.5 = 30px
}
 Calculando los ems de los elementos
Por defecto <html> tendrá 16px en font-size y los demás elementos 1em.
Por lo tanto, todos los elementos del sitio tendrán 16px de font-size.

<html> → font-size: 16px

<body> → font-size: 1em → 16px
<div> → font-size: 1em → 16px
<p> → font-size: 1em → 16px
<strong>Hola!</strong> → font-size: 1em → 16px
</p>
</div>
</body>
</html>
 Calculando los ems de los elementos
Si cambiamos el font-size del <div> a 2em, este tendrá 2 veces el tamaño del
font-size de su padre.
Por lo tanto el <div> y todos sus hijos tendrán 32px de font-size.

<html> → font-size: 16px

<body> → font-size: 1em → 16px
<div> → font-size: 2em → 16px * 2 → 32px
<p> → font-size: 1em → 32px
<strong>Hola!</strong> → font-size: 1em → 32px
</p>
</div>
</body>
</html>
 Calculando los ems de los elementos
Teniendo en cuenta lo anterior, si a <p> le asignamos un font-size de 1.5em, el
cálculo se hará en base al tamaño de su padre, el <div>: 32px * 1.5 = 48px.
Nuevamente, todos los hijos de <p> heredarán ese tamaño de fuente.

<html> → font-size: 16px

<body> → font-size: 1em
<div> → font-size: 2em → 32px
<p> → font-size: 1.5em → 32px * 1.5 → 48px
<strong>Hola!</strong> → font-size: 1em → 48px
</p>
</div>
</body>
</html>
 Calculando los ems de los elementos
Si ahora cambiamos el font-size del elemento <html> a 10px, todos los
elementos cambiarán de tamaño sin haber modificado directamente su
font-size.

<html> → font-size: 10px

<body> → font-size: 1em → 10px
<div> → font-size: 2em → 20px
<p> → font-size: 1.5em → 30px
<strong>Hola!</strong> → font-size: 1em → 30px
</p>
</div>
</body>
</html>
 Cómo funcionan los rems RECOMEND
ADO
Como nos habremos dado cuenta, usar ems puede ser muy complicado.
Los rems funcionan muy parecido a los ems, con la diferencia de que siempre
tomarán de base el tamaño de font size del elemento <html>.
Eso quiere decir que el tamaño expresado en rems no modificará el de los
elementos hijos y tampoco se verá afectado por el del elemento padre.
Por lo general, es mejor usar rems en lugar de ems ya que conservamos las
ventajas de una unidad relativa, pero nos evitamos hacer cálculos complejos y
estar pendientes de cómo se afectan los elementos entre sí.

css p { font-size: 1.5rem }

 Calculando los rems de los elementos
Teniendo en cuenta lo anterior, podemos asignar distintos valores a los
elementos sin que estos afecten a los otros. Todos los elementos tomarán de
base el tamaño de font-size del elemento <html>.

<html> → font-size: 16px

<body> → font-size: 2rem → 16px * 2 → 32px
<div> → font-size: 3rem → 16px * 3 → 48px
<p> → font-size: 1rem → 16px
<strong>Hola!</strong> → font-size: 0.5rem → 16px * 0.5 → 8px
</p>
</div>
</body>
</html>
 Medidas relativas
Unidad Descripción

unidad de medida que se combina con el uso de una unidad absoluta (ej: px). Se puede expresar
em
también en decimales (Ej: 1.5).

Root em: se denomina como sucesora de em, y poseen la misma lógica operativa, aunque rem
rem
se relaciona con el tamaño de la fuente del elemento raíz.

Porcentaje: si bien no es una unidad de medida, se usa cuando necesitamos trabajar con un
%
layout fluido. Permite crear módulos que se readapten para ocupar la cantidad especificada.

Funciona de manera similar a em / rem, aunque no se relaciona con el tamaño de la fuente

ex
(font-size), sino con la familia de fuentes que se utiliza (font-family).

Character unit: se la define como una medida avanzada, que toma el ancho del caracter cero (0).
ch
Por su complejidad, casi no se utiliza, salvo en casos demasiado específicos.
Propiedad width y height
 width

propiedad width se utiliza en CSS para establecer el ancho de un

elemento HTML. Puede aplicarse a casi todos los elementos, como
cajas, imágenes, tablas, etc. y se puede establecer el ancho de un
elemento en píxeles, porcentaje u otras unidades de medida.
 height

La propiedad height se utiliza en CSS para establecer la altura de un

elemento HTML. Esta propiedad se puede aplicar a casi todos los
elementos, como cajas, imágenes, tablas, etc.

La altura de un elemento se puede establecer en píxeles, porcentaje

u otras unidades de medida.

Es importante tener en cuenta que la altura de un elemento puede

verse afectada por otros factores, como el relleno interno (padding),
el margen externo (margin) y el borde (border) del elemento. Por lo
tanto, es posible que deba ajustar estas propiedades para lograr la
altura deseada para el elemento.
Medidas de viewport
 Medidas de viewport
El viewport es el espacio visible que tiene el navegador para mostrar el sitio.
Eso quiere decir que se pueden utilizar medidas relativas a este espacio para
poder determinar el tamaño de ciertos elementos.

Viewport
 Viewport width y viewport height

vw o viewport width es relativo al ancho total del viewport.

vh o viewport height es relativo al alto total del viewport.
Ambas medidas están expresadas como porcentajes del total, eso quiere decir
que 50vh será equivalente al 50% del alto disponible en el viewport.

div {
width: 25vw; // 25% del ancho disponible
css
height: 50vh; // 50% del alto disponible
}
 Visualizando vh y vw
Cualquier medida expresada en viewport width (vw) o viewport height (vh)
tomará siempre como referencia al viewport del documento.

width: 25vw;
height: 50vh;

100vh
100vw
Ancho del ViewPort VS Ancho de la pantalla
 Medidas relativas
Unidad Descripción

Viewport width: corresponde al área que visualiza un usuario de un documento HTML. Varía según el
vw
dispositivo, siendo más pequeña en móviles y más grande en computadoras de escritorio.

vh Viewport height: Igual a la medida anterior, excepto que referencia a la altura y no al ancho.

Viewport minimum: se relaciona con las dimensiones de viewport, usando como base la dimensión
vmin
más pequeña de viewport (alto x ancho).

vmax Viewport maximum: igual a la anterior, pero usa como base la dimensión más grande de viewport.
Convertidor de unidades

Te compartimos un link para

que evalúes entre las

diferentes medidas de CSS.

 ¡Ejercitación de medidas relativas!
Crea una página web con tres secciones: encabezado, contenido principal y pie de página. Utiliza medidas relativas
para definir el tamaño de los elementos en cada sección.

- En el encabezado, crea un título principal <h1> con el texto "Mi página web" y utiliza una medida relativa para
establecer el tamaño del título de manera que sea el doble del tamaño del texto normal.

- En el contenido principal, crea un párrafo <p> con un texto de tu elección y utiliza una medida relativa para
establecer el tamaño del párrafo al 150% del tamaño del texto normal.

- Dentro del contenido principal, agrega una imagen <img> de tu elección y utiliza una medida relativa para
establecer el ancho de la imagen al 75% del ancho del contenedor principal.

- En el pie de página, crea un enlace <a> con el texto "Volver arriba" y utiliza una medida relativa para establecer
el tamaño del enlace al 120% del tamaño del texto normal.

- Recuerda utilizar diferentes unidades de medidas relativas como em, rem, %, vh y vw en cada caso y comenta
en el código el tipo de medida que estás utilizando.
Propiedades de Fondo (Background)
 Colores de fondo
Ahora que ya le estamos dando vida a
nuestro sitio utilizando colores, quizás
queramos darle un color de fondo: 👉
 background-color

La propiedad background-color se utiliza en CSS para establecer el

color de fondo de un elemento HTML. Esta propiedad se puede aplicar
a casi todos los elementos, como cajas, encabezados, párrafos, etc.

El valor de la propiedad background-color puede ser especificado en

diferentes formatos de color, como nombres de colores predefinidos,
valores RGB, valores hexadecimales y valores HSL, entre otros.

Es importante tener en cuenta que si no se especifica un valor para la

propiedad background-color, el valor predeterminado será
transparent, lo que significa que no se establecerá ningún color de
fondo y el fondo se mostrará a través del elemento.

O tal vez quieras agregar colores gradientes

 Imagenes de fondo
Además de utilizar colores de fondo,
quizás queramos poner una imagen de
fondo: 👉
 background-image

La propiedad background-image se utiliza en CSS para establecer una

imagen de fondo para un elemento HTML. Esta propiedad se puede
aplicar a casi todos los elementos, como cajas, encabezados, párrafos,
etc.

El valor de la propiedad background-image debe ser una URL que

apunte a la imagen que se desea utilizar como fondo.
 background-image

Además de la propiedad background-image, también

se pueden utilizar otras propiedades relacionadas con el
fondo, como background-repeat para establecer si la
imagen debe repetirse en el fondo,
background-position para establecer la posición de la
imagen de fondo en relación con el elemento, y
background-size para establecer el tamaño de la
imagen de fondo.
 background-repeat
a propiedad background-repeat se utiliza en CSS para establecer si una
imagen de fondo debe repetirse en el fondo de un elemento HTML. Esta
propiedad se puede aplicar a casi todos los elementos, como cajas,
encabezados, párrafos, etc.

El valor de la propiedad background-repeat puede ser uno de los siguientes:

● repeat: La imagen de fondo se repetirá tanto en la dirección horizontal

como en la vertical.
● repeat-x: La imagen de fondo se repetirá solo en la dirección
horizontal.
● repeat-y: La imagen de fondo se repetirá solo en la dirección vertical.
● no-repeat: La imagen de fondo no se repetirá.
● space: La imagen de fondo se repetirá en la dirección horizontal y
vertical, pero se espaciara uniformemente para llenar el fondo.
● round: La imagen de fondo se repetirá en la dirección horizontal y
vertical, pero se estirará o comprimirá para llenar el fondo.
 background-repeat

También se puede establecer la propiedad background-repeat utilizando valores

abreviados, como background-repeat: no-repeat center top;, lo que establecerá que la
imagen no se repetirá y se posicionarán en el centro y en la parte superior del
elemento.
 background-position
La propiedad background-position se utiliza en CSS para establecer la posición
de una imagen de fondo en un elemento HTML. Esta propiedad se puede
aplicar a casi todos los elementos, como cajas, encabezados, párrafos, etc.

El valor de la propiedad background-position puede ser uno de los siguientes:

● left top, left center, left bottom, center top, center center, center
bottom, right top, right center, right bottom: Estos valores establecen
la posición de la imagen de fondo en relación con las esquinas del
elemento HTML.
● Dos valores numéricos: Los valores numéricos establecen la posición de
la imagen de fondo en píxeles, donde el primer valor es la posición
horizontal y el segundo valor es la posición vertical. Por ejemplo,
background-position: 10px 20px; establece que la imagen de fondo
estará a 10 píxeles de la izquierda y 20 píxeles de la parte superior del
elemento.
 background-position

● Dos valores porcentuales: Los valores porcentuales establecen la

posición de la imagen de fondo en porcentaje del tamaño del elemento
HTML, donde el primer valor es la posición horizontal y el segundo
valor es la posición vertical. Por ejemplo, background-position: 50%
50%; establece que la imagen de fondo estará en el centro del
elemento.

También se puede establecer la propiedad background-position utilizando

valores abreviados, como background-position: right 20px top 10px;, lo que
establece que la imagen de fondo estará a 20 píxeles de la derecha y 10
píxeles de la parte superior del elemento.
 background-atachment
La propiedad background-attachment en CSS se utiliza para establecer si una
imagen de fondo se mueve con el contenido del elemento HTML o se mantiene
en una posición fija en relación con la ventana del navegador.

Los valores posibles de la propiedad background-attachment son los siguientes:

● scroll: La imagen de fondo se mueve con el contenido del elemento

HTML a medida que se desplaza por la página.
● fixed: La imagen de fondo se mantiene en una posición fija en relación
con la ventana del navegador, lo que significa que la imagen no se
moverá con el contenido del elemento HTML a medida que se desplaza
por la página.
● local: La imagen de fondo se desplaza con el contenido del elemento
HTML, pero permanece en una posición fija en relación con el propio
elemento.
● initial: Establece el valor predeterminado de la propiedad, que es scroll.
 background-size

La propiedad background-size se utiliza en CSS para establecer el tamaño de

una imagen de fondo en relación con el elemento HTML que la contiene. Esta
propiedad se puede aplicar a casi todos los elementos, como cajas,
encabezados, párrafos, etc.

El valor de la propiedad background-size puede ser uno de los siguientes:

● auto: La imagen de fondo se mostrará en su tamaño original.

● cover: La imagen de fondo se ajustará para cubrir completamente el
elemento, recortando la imagen si es necesario.
● contain: La imagen de fondo se ajustará para que el ancho y el alto
sean iguales o más pequeños que el elemento, manteniendo la
proporción de aspecto de la imagen.
● Un valor numérico: El valor numérico establece el ancho y la altura de
la imagen de fondo en píxeles.
 background-size

También se puede establecer la propiedad background-size utilizando valores

abreviados, como background-size: 50% auto;, lo que establecerá que la
imagen de fondo tenga un ancho del 50% del elemento y un alto automático.

Te invitamos a explorar un poquito más en cssreference.io

Opacity
 Opacity
La propiedad "opacity" controla la transparencia de un elemento.
Se utiliza para ajustar la opacidad de un elemento sin cambiar su
contenido o diseño. La propiedad "opacity" acepta un valor de
número decimal entre 0 y 1, donde 0 es completamente
transparente y 1 es completamente opaco.

Es importante tener en cuenta que la propiedad "opacity" también

afecta a los elementos secundarios dentro del elemento al que se
le aplica la propiedad. Por lo tanto, si se establece la opacidad de
un contenedor, todos los elementos dentro de él también se
volverán transparentes o semitransparentes. Si se desea que solo
un elemento en particular sea transparente, se debe establecer la
propiedad "opacity" solo para ese elemento y no para su
contenedor.
 ¡Ejercitación de colores y fondos:!
En este caso, nuestro trabajo será darle un poco de color a nuestro sitio. Estas son las características que queremos
que tenga:

- El <body> debe tener una imagen de fondo que ocupe todo el tamaño de la página. El link a la imagen es el
siguiente: https://images3.alphacoders.com/621/621682.jpg

- El <h1> debe tener un fondo de color negro con una opacidad de 0.8 y que la tipografía sea de color #f4e033.

- El <h2> debe tener un fondo de color naranja, que la tipografía sea de color blanca y que la caja completa
(fondo y texto) tenga una opacidad de 0.4.

Para implementar la solución descarga el siguiente proyecto de base

Filtros CSS
 Filtros CSS

La propiedad CSS filter agrega la posibilidad de aplicar efectos

gráficos sobre elementos HTML. Es comúnmente aplicado a las
imágenes, pero también puede aplicarse sobre cualquier otro
elemento HTML que soporte colores.

También suelen aplicarse sobre fondos o bordes.

 Filtros CSS
Valor Descripción

blur Genera un difuminado sobre un elemento.

brightness Aplica un brillo sobre el elemento.

contrast Aplica un contraste sobre el elemento.

grayscale Aplica un efecto de escala de grises.

sepia Aplica un efecto sepia (estilo bronce).

opacity Aplica un efecto de opacar.

saturate Aplica un efecto de saturación sobre el elemento.

invert Aplica un efecto invertido sobre un elemento HTML.

 Filtros CSS

Veamos algunos de estos efectos en acción, aplicados

directamente sobre una imagen.
 Filtros CSS

blur( ) genera una imagen borrosa. Trabaja con píxeles

y soporta decimales.
 Filtros CSS

sepia( ) genera un color cobrizo sobre la imagen. Puede

configurarse en base a un porcentaje.
 Filtros CSS

grayscale( ) establece un color basado en escala de

grises. 100% es escala de grises pura. Desde allí,
podemos bajar el porcentaje.
 Filtros CSS

brightness( ) establece un brillo sobre el elemento o

imagen. El 100% del brillo es el valor normal. De allí
podemos subir o bajar el porcentaje.
 Filtros CSS

contrast( ) aplica un contraste sobre el elemento o

imagen. El 100% es el valor normal. De allí podemos
subir o bajar el porcentaje.
 Filtros CSS

saturate( ) aplica un color saturado o del estilo

temperado sobre los elementos HTML. Podemos
escalar de a un dígito, y soporta decimales.
 Filtros CSS

opacity( ) opaca una imagen o elemento. Sus valores

van de 0 a 1 (desde transparente a 100% colorida), y
soporta decimales.
 Filtros CSS

invert( ) invierte el color de un elemento o imagen.

 Filtros CSS

Incluso, podemos combinar dos o más filtros, los cuales

se interpolan el elemento HTML. Por ejemplo,
combinando invert( ) y grayscale( ), obtendremos un
negativo.
Uso de iconos
 Uso de iconos

Los iconos son imágenes que se utilizan para representar objetos o acciones. Vivimos
rodeados de iconos y no solo en las herramientas informáticas.

Pensemos, por ejemplo, qué representan las siguiente imágenes: 👇

 Uso de iconos
El atributo principal de los iconos es proporcionar un lenguaje visual común que una
brechas lingüísticas. Son intuitivamente reconocibles y no tienen una interpretación
abierta, es justamente esto lo que los hace perfectos para un contexto digital, en el que
interactúan muchas personas de culturas diferentes.

¿Cómo podemos incluir iconos en nuestra web?

Al igual que como ocurre con las fonts web, es necesario, en primer lugar, seleccionar la
librería de iconos que vamos a utilizar.

Te dejamos varios recursos de donde obtener iconos

 Librerías de iconos
Las tres librerías más populares en la actualidad para obtener iconos son las siguientes 👇

Bootstrap 5 Icons Font Awesome 6 Material Icons

 ¡Hora de practicar!

En esta instancia de práctica deben aplicar en un html,

- Un título al cual le van a cambiar el tamaño de la letra y agregar las propiedades, que crean
pertinentes.
- Una imagen la cual le van a cambiar el tamaño, y agregarle un filtro.
- Crear un texto que tenga por detrás una imagen de fondo.
 ¡Hagamos un GameShop!
Una de las principales tareas de un desarrollador Front End es tanto estructurar interfaces como aplicar estilos a
partir de un wireframe o una imagen. El desafío será reconocer las diferentes etiquetas y los correspondientes estilos
que podrían conformar el maquetado y diseño para comenzar a estructurar un archivo hasta obtener un resultado
visual similar a la referencia.

Utilizaremos el siguiente boceto en Figma para maquetar un sitio de GameShop.

A tener en cuenta:
- Estructura básica HTML y etiquetas semánticas.
- Hoja de estilos externa.
- Agrupar selectores.
- Buenas prácticas y accesibilidad.
- Uso de medidas relativas
- Uso de colores e imágenes de fondo
- Uso de iconos
Muchas gracias.