Diseño Digital V. Guía 6 Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V

Tema: CSS3: Transformaciones, transiciones y animaciones. Objetivos • A través del desarrollo de la guía el estudiante será capaz de estructurar una página web con HTML5 y aplicar formato y estilo con CSS. Contenidos • Transformaciones • Transiciones • Animaciones Materiales y Equipo • Guía 6 previamente leída. • Hoja de evaluación correspondiente a la guía 6.

Transformaciones Las transformaciones de Hojas de estilo CSS permiten transformar elementos en espacio bidimensional y tridimensional. Con las transformaciones CSS puedes cambiar la posición de un elemento dentro de su elemento primario, manipular la rotación o la escala de un elemento y aplicar distorsiones de sesgo. Si se agrega la propiedad perspective (o la función de transformación perspective), se agrega una tercera dimensión a las transformaciones. La aplicación de transformaciones a un elemento es sencilla. En primer lugar, agrega la propiedad transform y luego anexa una lista de funciones de transformación. Por ejemplo, la siguiente declaración aplica una transformación de traslación: transform: translateX(400px);

Para que la compatibilidad con exploradores sea máxima, debe incluir los prefijos específicos de explorador adecuados antes o después de la propiedad de transformación para cada uno de los exploradores que tiene previsto admitir. Por ejemplo, las siguientes declaraciones garantizan la compatibilidad con Chrome y Safari (“-webkit-”), Firefox (“-moz-”) y exploradores que no requieren un prefijo, como Internet Explorer 10. -webkit-transform: translateX(400px); -moz-transform: translateX(400px);

1

2

Manual de laboratorios La sintaxis de la regla sería la siguiente: div { -webkit-transform: translateX(400px); -moz-transform: translateX(400px); transform: translateX(400px) }

Funciones de la propiedad transform: Función

Descripción

matrix(a, b, c, d, e, f)

Especifica una transformación 2D en forma de una matriz de transformación de seis valores.

rotate(angle)

Especifica una rotación 2D en el ángulo especificado en el parámetro sobre el origen del elemento.

scale(sx,sy)

Especifica una operación de escala 2D con el vector de escala [sx,sy] descrita por los dos parámetros.

scaleX(sx)

Especifica una operación de escala con el vector de escala [sx,1], donde sx se indica como parámetro.

scaleY(sy)

Especifica una operación de escala con el vector de escala [1,sy], donde sy se indica como parámetro.

skew(angleX,angleY)

Especifica una transformación de sesgo a lo largo de los ejes x e y. El primer parámetro de ángulo especifica el sesgo en el eje x. El segundo parámetro de ángulo especifica el sesgo en el eje y.

skewX(angle)

Especifica una operación de sesgo a lo largo del eje x según el ángulo indicado.

skewY(angle)

Especifica una operación de sesgo a lo largo del eje y según el ángulo indicado.

translate(tx,ty)

Especifica una traslación 2D según el vector [tx,ty], donde tx es el primer parámetro del valor de traslación y ty es el segundo parámetro del valor de traslación opcional.

translateX(tx)

Especifica una traslación de cantidad determinada en la dirección x.

translateY(ty)

Especifica una traslación de cantidad determinada en la dirección y.

Para este ejemplo en las imágenes la declaración de la propiedad y el valor serían: transform: transform: transform: transform:

rotate(45px); rotate (-35deg); skewX(25deg); skewY(25deg);

Diseño Digital V. Guía 6 transform: transform: transform: transform: transform:

scale(0.75); scaleX(0.75); scaleY(0.75); scaleY(1.25); scaleX(1.25);

Transiciones Las transiciones de las Hojas de estilo CSS permiten crear animaciones simples cambiando sin dificultad los valores de propiedades CSS durante un tiempo especificado. Por ejemplo, puede variar el tamaño y el color de un objeto durante un período de 10 segundos. Esta sería la declaración para un objeto sin transición: .diva { background-color: #D2D2D2; color: black; }

La regla con la propiedad de transición se declara así: .diva { -webkit-transition: width 2s; transition: width 2s; }

Generalmente el efecto de transición se iniciará cuando la propiedad CSS especificada cambia de valor. Un cambio típico de la propiedad CSS sería cuando un usuario coloca el ratón sobre un elemento: div.ab:hover { width: 300px; background:#09C; }

3

4

Manual de laboratorios Funciones de la propiedad transition: Propiedad

Descripción

transition

Propiedad abreviada que especifica las propiedades de transición en el orden siguiente (separadas por un espacio en blanco: transition-property transition-duration transition-timing-function transition-delay.

transition-delay

Especifica el desplazamiento dentro de una transición (la cantidad de tiempo desde el inicio de una transición) antes de mostrar la transición.

transition-duration

Especifica la duración de una transición.

transitionproperty

Identifica el nombre o los nombres de las propiedades CSS en las que se aplicará el efecto de la transición cuando se especifique un nuevo valor de propiedad.

transition-timing-function

Especifica los valores de propiedad intermedios que se usarán durante la transición.

Una regla declarada abreviada quedaría así: transition: all 5s linear 1s;

Esto equivale a: transition-property: all; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s;

Animaciones Las animaciones de Hojas de estilo CSS no solo permiten cambiar sin dificultad los valores de propiedades CSS en el transcurso del tiempo (las transiciones CSS ya permiten hacer esto). También ofrecen la posibilidad de diseñar animaciones complejas con fotogramas clave, así como un control más preciso mediante scripting. La regla @keyframe La diferencia principal entre las animaciones CSS y las transiciones CSS es la regla @keyframes. Permite especificar los valores que necesita tener una propiedad CSS en distintos puntos durante la animación. Cuando se crea una animación en la regla @keyframe, debe enlazar a un selector, de lo contrario la animación no tendrá ningún efecto. Enlace la animación a un selector (elemento), especificando por lo menos estas dos propiedades: • •

El nombre de la animación La duración de la animación

Diseño Digital V. Guía 6 @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .DivFadeOut:hover { animation-duration: 2s; animation-name: fadeOut; }

Otro ejemplo: div { -webkit-animation: myfirst 5s; animation: myfirst 5s; }

--------- regla para la animación

@-webkit-keyframes myfirst { from {background: red;} to {background: yellow;} }

--------- regla @keyframe

@keyframes myfirst { from {background: red;} to {background: yellow;} }

--------- sintaxis estándar

5

7

Manual de laboratorios Hoja de resultados

6

NOTA FINAL:

Guía 6: CSS3: Transformaciones, transiciones y animaciones

Alumno:

Puesto No:

EVALUACIÓN %

1-4

5-7

8-10

20%

Conocimiento deficiente de los conceptos de maquetación web y estilos CSS

Conocimiento y explicación incompleta de los conceptos de maquetación web y estilos CSS

Conocimiento completo y explicación clara de los conceptos de maquetación web y estilos CSS

30%

No creó la hoja de estilos. No hay reglas de CSS aplicadas.

Creó la hoja de estilos pero no la adjunto correctamente al HTML, o la realizó de forma interna. Las reglas CSS contienen errores de sintaxis.

Creó correctamente la hoja de estilos externa y la adjunto al HTML utilizando la etiqueta adecuada y en el elemento adecuado. Creó correctamente la sintaxis de las reglas CSS

30%

No posicionó los elementos correctamente.

Los elementos no poseen la posición correcta. No utilizó de forma adecuada los valores de la propiedad position

Utilizó correctamente la propiedad position y colocó todos los elementos de manera correcta en el contenedor

10%

Materiales incompletos o no cumplen con lo requerido para la práctica.

Los materiales requeridos para la práctica no están desarrollados adecuadamente o no fueron entregados puntualmente.

Trajo los materiales requeridos para la práctica y fueron presentados puntualmente.

10%

No tiene actitud proactiva.

Actitud propositiva y con propuestas no aplicables al contenido de la guía.

Tiene actitud proactiva y sus propuestas son concretas.

CONOCIMIENTO Optimización de Imágenes para la web, creación de recursos para la web, Adobe Firework como herramienta de edición

APLICACIÓN DEL CONOCIMIENTO

ACTITUD Responsabilidad, lectura de guías de laboratorio, materiales requeridos para la práctica, bocetos

Nota