Tema 12

Interfaces y Nuevos Dispositivos

Programación de UI: CSS3

Índice
Esquema 3

Ideas clave 4
12. 1. ¿Cómo estudiar este tema? 4
12. 2. Introducción a CSS 5
12. 3. Fondos, degradados, bordes y sombras 5
12. 4. Pseudo elementos, pseudo estados y pseudo
clases 9
12. 5. Transiciones, transformaciones y animaciones
12
12. 6. Colores 17
12. 7. Media queries 18
12. 8. Compatibilidad entre navegadores 20
12. 9. Referencias bibliográficas 21

Lo + recomendado 22

+ Información 24
 • Fondos
• Degradados
• Bordes 1 Nuevas propiedades
2 Colores
• Sombras

• Transiciones
CSS3 3 Efectos • Animaciones
• Transformaciones

• Elementos Compatibilidad entre

4
• Estados 5 Pseudo navegadores
• Clases

Tema 12. Esquema

Interfaces y Nuevos Dispositivos
Esquema

3
 Ideas clave

12. 1. ¿Cómo estudiar este tema?

Para estudiar este tema es suficiente con que leas las siguientes ideas clave.

E
n este tema se estudian las novedades que incluyen los módulos
estandarizados de lo que se conoce como CSS3.

Después de completar este tema serás capaz de:

 Crear degradados y sombras en elementos.

 Crear transiciones, animaciones y transformaciones.
 Utilizar pseudo clases, pseudo estados y pseudo elementos.
 Crear maquetas con flexbox.
 Conocer los requisitos de compatibilidad entre navegadores.

Para una mejor absorción de los conocimientos sobre CSS3, es aconsejable

que el estudio de este tema se haga junto a un IDE con un documento HTML
sobre el cual comenzar a experimentar lo aprendido.

En el siguiente enlace puedes acceder a una herramienta para visualizar

simultáneamente el código que se va escribiendo.

[Link]

Interfaces y Nuevos Dispositivos

4
Tema 12. Ideas clave
12. 2. Introducción a CSS

C
SS3 no es un estándar tal y como lo fue su predecesor CSS2.1, sino que para
crearlo se han establecido distintos módulos que hacen referencia a
determinadas propiedades CSS que, de manera individual, se han ido
estandarizando (Ian Lunn, 2012).

Las mayoría de las novedades introducidas por CSS3 nos son ya familiares en el
mundo web, puesto que han tenido un gran impacto y han provisto de muchos más
recursos a la hora de codificar diseños (David Sawyer, 2013).

12. 3. Fondos, degradados, bordes y sombras

F
ondos

Con CSS3 se introdujeron las siguientes propiedades para fondos:

background-size: especifica el tamaño de la imagen de fondo. El valor por defecto

es auto, que aplicará el tamaño original de la imagen, sea cual sea. Después puede
indicarse en porcentaje con dos valores, uno para la altura y otro para la anchura, o
el valor cover, que permite cubrir todo el área de la caja, aunque es posible que
algunas áreas de la imagen queden fuera de esta.

Múltiples imágenes de fondo: con CSS3 se pueden indicar como valor para la
propiedad background-image o background varias url de origen para las imágenes. De
este modo, estas se situarán unas encima de otras, siendo la última escrita la que se
sitúe al fondo (en el ejemplo, la [Link] será la que esté en el fondo de la caja). Esto
es útil cuando se quieren utilizar filtros sobre imágenes sin tener que modificar la
imagen original.

Interfaces y Nuevos Dispositivos

5
Tema 12. Ideas clave
La sintaxis es la siguiente:

Figura 1: Sintaxis de background.

 background-origin: permite determinar el origen del inicio de la imagen, es decir,

el punto a partir del cual se va a situar la imagen desde su esquina superior

izquierda. Este origen puede ser el inicio de la caja, el final del padding… Los valores
que admite son:
• padding-box: la imagen se mostrará desde el final del padding.

• border-box: la imagen se mostrará desde el final del border.

• content-box: la imagen se mostrará desde el inicio del contenido.

 background-clip: esta propiedad permite determinar lo mismo que background-

origin pero en los casos en los que el fondo de la caja sea un color. Los valores
que admite y su comportamiento son los mismos que en la anterior propiedad.

Degradados

Una de las novedades más revolucionarias de CSS3 fue la posibilidad de crear

degradados. Existen dos tipos:

Linear-gradient: degradado lineal que podemos definir con los siguientes

parámetros:

Ángulo y origen: el ángulo se indicará con un valor numérico seguido de deg; y el

origen con los valores top, bottom, left y right.
Lista de colores: estos se pueden indicar de cualquiera de las maneras que admite
CSS, separados por comas.

Interfaces y Nuevos Dispositivos

6
Tema 12. Ideas clave
 Figura 2: Muestra de degradado linear-gradient.

Como se ve en el ejemplo la propiedad background con el valor linear-gradient está

repetida varias veces. Esto es necesario, ya que esta propiedad (y otras que veremos
a continuación) necesitan vendor-prefixes para que se visualicen correctamente en
todos los navegadores.

Radial-gradient: degradado en forma de círculo o elipse que se define con los

siguientes parámetros:

Posición del centro del gradiente: se define el punto central del gradiente con dos
valores numéricos que corresponden a dos coordenadas dentro del elemento en
el que se está usando el gradiente. Si no se indican, el valor por defecto será el
punto central de dicho elemento.
Dimensión y forma: para darle dimensión y forma, se utilizan dos valores
numéricos para la anchura y la altura (en ese orden) que harán que el gradiente
sea circular si ambas son iguales o elíptico si son diferentes.
Color: estos se pueden indicar de cualquiera de las maneras que admite CSS.

Figura 3: Muestra de degradado radial-gradient.

Interfaces y Nuevos Dispositivos

7
Tema 12. Ideas clave
Ambos tipos de gradientes tienen una variante repetitiva, que se define con las
propiedades repeating-linear-gradient y repeating-radial-gradient, cuyos
valores son idénticos a la versión única, sumándoles al final un porcentaje que
indique qué porción del elemento tiene que ocupar cada uno de los degradados que
se repiten.

Bordes

Antes de CSS3 las esquinas de las cajas en las que se traducen los elementos HTML
no podían modificarse. CSS3 introdujo la propiedad border-radius, que permite
redondear las esquinas de las cajas y llega incluso a convertirlas en círculos sin la
necesidad de utilizar imágenes de fondo.

Figura 4: Propiedad border-radius.

Sombras

Las sombras introducidas por CSS afectan a los textos y a las cajas, y se definen con
varias propiedades, de las cuales esta es la más destacada:

Box-shadow: nos permite definir el valor de la sombra de una caja. Esta propiedad
tiene cuatro parámetros:

Desplazamiento horizontal: valor indicado en px o % que determina cuánto estará

desplazada la sombra del elemento del que forma parte en el eje horizontal.

Interfaces y Nuevos Dispositivos

8
Tema 12. Ideas clave
 Desplazamiento vertical: valor indicado en px o % que determina cuánto estará
desplazada la sombra del elemento del que forma parte en el eje vertical.
Difuminado: valor en px que determina el ancho de la sombra, teniendo mayor
intensidad en el borde más cercado al elemento que en el más alejado.
Color: el color de la sombra.

Figura 5: Propiedad box-shadow.

12. 4. Pseudo elementos, pseudo estados y

pseudo clases

A
ntes de CSS3 existían parte de las reglas CSS englobadas dentro del grupo
«pseudos», pero se han unificado en este epígrafe para poder dar una
visión global de ellas.

El prefijo «pseudo» significa ‘falso’, algo que imita a la realidad; por ello se utiliza para
describir estas reglas CSS, ya que hacen referencia a elementos, estados o clases que
son «falsos» o transitorios. Estos surgieron de las necesidades para poder decorar los
documentos HTML, ya que con las reglas existentes no era suficiente. Se dividen en
tres grupos:

Pseudo-elementos.
Pseudo-estados.
Pseudo-clases.

Interfaces y Nuevos Dispositivos

9
Tema 12. Ideas clave
Los pseudos se instancian siguiendo el selector de clase, id o etiqueta con dos puntos
y el nombre de la propiedad:

Figura 6: Ejemplo de pseudo.

Pseudo elementos

Estos falsos elementos se utilizan generalmente para añadir decoraciones a los textos
o cajas. Son los siguientes:

 :first-line: permite modificar los estilos de la primera línea del texto al que se
lo estemos aplicando.
 :first-letter: permite modificar los estilos de la primera letra del texto al que
se lo estemos explicando.
 :before /:after: crea una «caja» extra antes en el caso de :before y después en
el caso de :after de la caja a la que estemos aplicándolo. Estos pseudo elementos
tienen una propiedad que no es habitual: la propiedad content, que permite
insertar texto o cualquier carácter que queramos mostrar dentro de la nueva falsa
caja.

Figura 7: Ejemplo de pseudo elementos.

Interfaces y Nuevos Dispositivos

10
Tema 12. Ideas clave
Pseudo estados

Ya existían en especificaciones anteriores. Permiten hacer cambios de estilo cuando

el foco de la página o los elementos a los que afectan se encuentran con el cursor
sobre ellos, activos. Son los siguientes:

 :hover: para establecer estilos cuando el elemento tiene el cursor sobre él.
 :active: para establecer estilos cuando el elemento está activo.
 :focus: para establecer estilos cuando el elemento tiene el foco sobre él. Como se
ve en el siguiente ejemplo, este pseudo-estado tiene estilos predefinidos por los
navegadores, como es la propiedad outline, que produce un «resplandor» grisáceo
alrededor del elemento.

Figura 8: Pseudo estados.

Pseudo clases

Permiten seleccionar determinados elementos basándose en determinados

comportamientos o en la estructura HTML, para así poder darles estilos sin necesidad
de modificar el HTML. Son los siguientes:

 :checked: se utiliza para dar estilos a los checkbox y radiobuttons cuando están
seleccionados.

Interfaces y Nuevos Dispositivos

11
Tema 12. Ideas clave
 :disabled: se utiliza generalmente para elementos de formularios que no pueden

estar habilitados hasta que otra acción ocurra y, por lo tanto, necesitan estilos
distintos a los del elemento habilitado.
 :first-child: permite seleccionar el primer elemento que sea hijo directo de
aquel al que lo estamos aplicando.
 :first-of-type: permite seleccionar el primer elemento de un tipo en concreto
que sea directo de aquel al que lo estamos aplicando.
 :last-child: permite seleccionar el último elemento que sea hijo directo de aquel

al que lo estamos aplicando.

 :last-of-type: permite seleccionar el último elemento de un tipo en concreto
que sea directo de aquel al que lo estamos aplicando.
 :not(): es una pseudo clase que se aplica a elementos que contienen un gran
número de otros en su interior para especificar algún estilo que les afecte a todos
excepto al elemento señalado dentro del paréntesis. Este se puede indicar por
cualquier tipo de selector (clase, id o etiqueta).
 :nth-child(n): permite seleccionar todo elemento que esté en posición n dentro

de un elemento padre, independientemente del tipo que sea.

 :nth-last-child(): permite seleccionar todo elemento que esté en posición n
dentro de un elemento padre, independientemente del tipo que sea pero
invirtiendo el orden de conteo.

12. 5. Transiciones, transformaciones y

animaciones

C
SS3 incluyó con las transiciones, transformaciones y animaciones efectos
en la apariencia y comportamiento de los elementos HTML que antes solo
podían conseguirse mediante JavaScript.

Interfaces y Nuevos Dispositivos

12
Tema 12. Ideas clave
Transiciones

La propiedad transición se define de la siguiente manera:

Figura 9: Definición de propiedad «transición».

Las subpropiedades que la componen son:

 transition-property: permite indicar a qué propiedad o propiedades CSS

afectará esta propiedad. En la definición global es el primer parámetro. Si se quiere
aplicar a todas las propiedades, se indica con un all.
 transition-duration: permite determinar qué duración tendrá la transición.
 transition-timing-function: permite determinar cómo se calcularán las
propiedades intermedias de la transición. Esto lo hace en base a las curvas cúbicas
de Bezier:

Figura 10: Subpropiedades de la transition-timing-function.

Estas gráficas muestran los valores que puede tener esta subpropiedad:

• linear: tendrá una progresión homogénea.

• ease-out: comenzará rápido y terminará lento.

• ease-in: comenzará lento y terminará rápido.

Interfaces y Nuevos Dispositivos

13
Tema 12. Ideas clave
 • ease-in-out: comenzará lento, acelerará y terminará lento.

 transition-delay: permite indicar el retraso con el que comenzará la transición

cuando esta tenga que ocurrir.

Las transiciones suelen aplicarse a elementos que tienen definidas propiedades para
sus pseudo estados (hover, active, focus). La transición siempre se indica en el
elemento que va a sufrirla sin ningún tipo de pseudo estado. Ejemplo:

Figura 11: Ejemplo de transición.

Las propiedades que admiten transiciones son todas aquellas que pueden tener un
estado intermedio; por ejemplo, display no se puede animar con una transición
porque entre el valor none y el block no hay un estado intermedio que mostrar
mientras esta se produce.

Transformaciones

La propiedad transformación permite trasladar, rotar, deformar y escalar los

elementos HTML únicamente con CSS. Algunos valores que puede tener esta
propiedad son los siguientes:

 Translate(x, y): permite trasladar en los ejes x e y el elemento HTML. Los valores

se indican en cualquier unidad de medida.

Interfaces y Nuevos Dispositivos

14
Tema 12. Ideas clave
Esta subpropiedad admite también estas variaciones:

 translateX(x): permite trasladar el elemento en el eje X.

 translateY(y): permite trasladar el elemento en el eje Z.
 translateZ(z): permite trasladar el elemento en el eje Y.
 translate3d(x, y, z): permite trasladar en 3D.
 scale(x,y): permite escalar el tamaño de un elemento en los ejes x e y. Los
valores se indican en cualquier unidad de medida. Esta subpropiedad admite
también estas variaciones:
• scaleX(x): permite trasladar el elemento en el eje X.

• scaleY(y): permite trasladar el elemento en el eje Z.

• scaleZ(z): permite trasladar el elemento en el eje Y.

• scale3d(x, y, z): permite trasladar en 3D.

 rotate(ángulo): permite rotar un elemento HTML el número de grados que se le

indique. El valor del ángulo será numérico seguido de la unidad deg. Esta
subpropiedad admite también estas variaciones:
• rotateX(ángulo): permite rotar el elemento en el eje X.

• rotateY(ángulo): permite rotar el elemento en el eje Z.

• rotateZ(ángulo): permite rotar el elemento en el eje Y.

• rotate3d(x, y, z, ángulo): permite rotar en 3D.

 skrew(ángulo-x, ángulo-y): permite deformar el elemento HTML al que se le

aplique. Esta subpropiedad admite también estas variaciones:
• skrewX(x): permite deformar el elemento en el eje X.

• skrewY(y): permite deformar el elemento en el eje Z.

• skrewZ(z): permite deformar el elemento en el eje Y.

• skrew3d(x, y, z): permite deformar en 3D.

Interfaces y Nuevos Dispositivos

15
Tema 12. Ideas clave
Animaciones

Las animaciones en CSS3 representó la posibilidad de eliminar el uso de componentes

programados en Flash dentro de las páginas web, ya que permiten animar cualquier
elemento HTML y los pseudo elementos «after» y «before».

La animación se instancia de la siguiente manera, como resultado de la combinación

del resto de subpropiedades:

Figura 12: Muestra de animación.

 animation-name: define el nombre de la animación, de forma que podamos aplicar

varias animaciones al mismo elemento que realicen distintos efectos.

 animation-duration: indica cuánto durará en segundos o milisegundos la
animación.
 animation-timing-function: determina el progreso de la animación según las
curvas de Bezier.
 animation-delay: define el retraso con el que empezará la animación cuando la
página esté cargada.
 animation-iteration-count: indica cuántas veces se realizará la animación.
Puede ser un valor numérico o el valor infinite si queremos que se repita de
manera infinita.
 animation-direction: indica si la animación tendrá lugar tal y como se define
(normal), al revés (reverse) o de manera alternativa (alternate).
 animation-fill-mode: define el estilo del elemento cuando la animación no está
teniendo lugar.
 animation-play-state: indica si la animación está activa o pausada.

Las animaciones se instancian de la manera que anteriormente hemos visto y se

definen con la regla @keyframe. Dentro de esta se definen todas las propiedades tal

Interfaces y Nuevos Dispositivos

16
Tema 12. Ideas clave
y como se quiere que aparezcan durante la animación, es decir, el elemento al que
aplicamos la animación tendrá al principio una serie de propiedades definidas, a
partir de las cuales se iniciará el cambio hasta las definidas en la animación.

Los keyframes permiten establecer distintos tiempos con distintas propiedades en

cada uno de ellos, de manera que las animaciones adquieren una mayor versatilidad
respecto a las transformaciones y las transiciones.

Figura 13: Ejemplo de animación con keyframe.

En este ejemplo, la caja se moverá abajo y arriba de manera infinita.

La mejor manera de visualizar las transiciones, las transformaciones y las animaciones

es practicando en plataformas como CodePen, ya que se puede ver simultáneamente
los cambios que se están haciendo en los estilos y el efecto que tienen.

12. 6. Colores

C
on CSS3 se añadió otra manera de definir los colores: RGBA. Esta forma es
igual que el RGB decimal, pero incluye un canal más, el alpha, que hace
referencia al grado de opacidad del color. Este canal puede tener cualquier
valor desde 0 a 1.

Interfaces y Nuevos Dispositivos

17
Tema 12. Ideas clave
 Figura 14: Definición de colores por RGBA.

12. 7. Media queries

L
as media queries fueron también una gran revolución que trajo consigo CSS3.
Con ellas se pueden definir estilos de manera condicional, aplicados a
distintas resoluciones y orientaciones de pantalla.

Operadores lógicos

Para definir las media queries se introdujeron en CSS operadores lógicos:

 and: establece que las dos condiciones deben cumplirse para que se aplique.
 not: cuando esta condición no se cumpla, se aplicará.
 only: solo cuando se cumplan estas condiciones, se aplicará.
 or: con él se pueden concatenar dos o más condiciones, y se aplicará si al menos
una de ellas se cumple.

Interfaces y Nuevos Dispositivos

18
Tema 12. Ideas clave
Sintaxis

Las media queries pueden comprobar altura y anchura del viewport, altura y anchura
del dispositivo y la orientación de la pantalla (portrati o landscape). Las medias
queries se definen con la etiqueta @media, seguido por el tipo de dispositivos en los
que queramos aplicarla:

 all: para todo tipo de dispositivos.

 print: para impresoras.

 screen: para pantallas.

 speech: para los dispositivos con lector de pantallas.

Una vez seleccionado el tipo donde se aplicará la media query, se indican las
condiciones con los operadores lógicos. Dentro de estas se indicará a su vez la max-
width o min-width que tiene que tener el dispositivo para que se aplique la query.

Figura 15: Ejemplo de media query.

La primera media query se aplicará a todas las pantallas que tengan una anchura de
pantalla de al menos 700px y orientado en horizontal (landscape). La segunda se
aplicará en todos los dispositivos que tengan una anchura con mínimo 1024px de
anchura y un máximo de 1280px.

Las anchuras de pantalla que se utilizan como máximos y mínimos se conocen como
breakpoints o «puntos de ruptura» para los estilos. Estos deben tener una
correlación en los diseños que se vayan a maquetar, una de las decisiones clave
cuando se inicia un proyecto web que tiene una parte responsive.

Interfaces y Nuevos Dispositivos

19
Tema 12. Ideas clave
12. 8. Compatibilidad entre navegadores

U
na de las problemáticas que presenta CSS3 es que algunas de sus
novedades no son compatibles con todos los navegadores, a pesar de
que estos estén recientemente actualizados.

Cuando se trabaja con CSS3, el mejor recurso para evitar sorpresas en cuanto a la
compatibilidad es la siguiente página web:

[Link]

En ella podemos insertar cualquier propiedad CSS y nos mostrará la compatibilidad

entre navegadores con un código simple de color.

Figura 16: Ejemplo de uso de la web [Link].

En este caso, los colores CSS3 están soportados por todas las versiones de todos los
navegadores actuales. En caso de tener un soporte parcial, aparecería en naranja y
cuando es una propiedad no soportada, en color rojo.

A pesar de la existencia de herramientas como Caniuse que nos indiquen qué

propiedades están soportadas o no, es necesario hacer un testeo real en cada uno de
los navegadores que se nos exija una correcta visualización según las especificaciones
del proyecto, ya que, aunque una propiedad esté soportada por todos los
navegadores, puede tener comportamientos distintos entre uno.

Interfaces y Nuevos Dispositivos

20
Tema 12. Ideas clave
Cuando por incompatibilidad del sistema no se puede disponer de todos los
navegadores (no existe Safari para Windows ni Edge o Internet Explorer 11 para
MacOS/Linux), lo ideal es utilizar una máquina virtual para poder ejecutar el proyecto
en ese entorno o, en su defecto, se puede utilizar herramientas online como
[Link] que permite ejecutar estas máquinas virtuales en
la nube y poder probar distintas urls en una gran variedad de sistemas operativos y a
distintas resoluciones.

Por último, la plataforma [Link] provee de estadísticas sobre el

uso de navegadores por regiones del mundo.

Figura 17: Cómo funciona [Link].

12. 9. Referencias bibliográficas

Lunn, I. (2012). CSS3 Foundations. EE. UU: Wiley.

Sawyer, D. (2013). CSS3: The Missing Manual. Cambridge: O’Reilly Media.

Interfaces y Nuevos Dispositivos

21
Tema 12. Ideas clave
 Lo + recomendado

Lecciones magistrales

Entrevista a Toño Guerrero. Parte I

En esta lección magistral entrevisto a Toño Guerrero, profesor del máster de Diseño
Gráfico especializado en diseño de tecnología aplicada al arte moderno. Un punto de
vista más creativo sobre el tema.

Accede a la lección magistral a través del aula virtual

No dejes de leer

CSS vs. CSS3: New Features in the Evolving Visual Language of the Web

Wodehouse, C. (2016). CSS vs. CSS3: New Features in the Evolving Visual Language of the
Web. En Upwork [en línea].

Breve artículo sobre las diferencias entre el lenguaje CSS y el lenguaje CSS3.

Interfaces y Nuevos Dispositivos

22
Tema 12. Lo + recomendado
 Accede al artículo a través de la siguiente dirección web:
[Link]

No dejes de ver

CSS3 Tutorial

Este video consiste en un tutorial extenso sobre CSS3 con el que podrás ampliar
conocimientos.

Accede al video a través de la siguiente dirección web:

[Link]

Interfaces y Nuevos Dispositivos

23
Tema 12. Ideas clave
 + Información

A fondo

The Book of CSS3: A Developer's Guide to the Future of Web Design

Gasston, P. (2014). The Book of CSS3: A Developer's Guide to the Future of Web Design
(2ª ed). EE. UU: No Starch Press.

Un auténtico best-seller sobre CSS3. Una segunda edición que

actualiza (y mejorar) los contenidos.

Accede al libro a través de la siguiente dirección web:

[Link]

CSS3: The Missing Manual

McFarland, D. S. (2013). CSS3: The Missing Manual. California: O’Reilly Media.

Otra gran libro para aprender CSS3.

Interfaces y Nuevos Dispositivos

24
Tema 12. + Información
 Accede al libro a través de la siguiente dirección web:
[Link]
dp/1449325947

Webgrafía

W3C

En esta página citada a lo largo de la asignatura encontrarás una especificación del

lenguaje CSS3.

Accede a la página web a través de la siguiente dirección web:

[Link]

Interfaces y Nuevos Dispositivos

25
Tema 12. + Información