Con la finalidad de modificar la presentación de
tamaños y orientación de elementos, aplicaremos transformaciones de tipo escala,
en base a las recomendaciones oficiales de este lenguaje. Algunos creadores de proyectos para la web emplean largos tiempos en
modificar tamaños a una imagen destinada a internet. Por lo tanto, identificaremos
el uso de la propiedad transform y
valor scale, en documentos CSS.
Las escalas modifican el tamaño de
la presentación de un elemento con la finalidad de aumentar o disminuir las
proporciones del mismo, según la necesidad de la página web. Mediante la propiedad de CSS transform y valor scale,
se define la nueva escala del elemento, de la siguiente manera:
- Con
valores entre 0 y 1 el elemento disminuye su tamaño.
- Con
valores mayores a 1 el elemento aumenta el tamaño.
- Con 2
valores específicos, el primero se toma en cuenta para el eje horizontal y el
segundo para el vertical.
061-01_0805_ilu01.
Tipos de valores para una escala
Para definir las escalas en el
despalzamiento vertical y horizontal existen dos formas:
- Especificar
scale y dentro de los paréntesis dos
valores, el primero se toma en cuenta para el lado horizontal y segundo para el
vertical.
- Agregar scaleX para definir el tipo de escala
horizontal.
- Incluir scaleY para definir el tipo de escala
vertical.
061-01_0805_ilu02.
Escala horizontal y vertical
Para ver la diferencia mostraremos
una imagen original y posteriormente dos
modificaciones:
- En la
primera existe una escala de 1.5, y como se agregó un solo valor, el navegador web lo aplica tanto de forma horizontal
como vertical.
- En la
segunda definimos una escala de 0.5, y 1, por lo tanto, se aprecia la imagen
solamente con reducción horizontal.
En la siguiente ilustración
observamos cómo:
061-01_0805_ilu03.
Especificaciones de escala
Para especificar escalas en el
lenguaje CSS también disponemos de los números negativos, para voltear por
completo el elemento, como se aprecia en la siguiente imagen.
061-01_0805_ilu04.
Escalas negativas
Tenemos la posibilidad de
especificar transformaciones múltiples, es decir, escribir una sola vez la
propiedad transform, con todos los
valores necesarios, y finalmente cerrar la instrucción con punto y coma.
061-01_0805_ilu05.
Transformaciones múltiples
En el ejemplo de la imagen
anterior definimos:
- Rotate: para un ángulo de 45 grados.
- Scale: para duplicar 1 sola vez su tamaño.
- Translate: para aplicar una traslación de 10 píxeles tanto horizontal
como verticalmente.
Con las transformaciones múltiples es importante
considerar el orden en el cual se definen los valores, para asegurarnos una
correcta presentación. En la imagen primero se rota la imagen, luego cambia su
escala y por último traslada el elemento.
Keynotes
- Las escalas modifican el tamaño de la
presentación de un elemento con la finalidad de aumentar o diminuir las
proporciones del mismo, según la necesidad de la página web.
- Mediante la propiedad de CSS transform y valor scale, se define la nueva escala del elemento.
- Para especificar escalas en el lenguaje CSS
también disponemos de los números negativos, para voltear por completo el
elemento.
- Tenemos la posibilidad de especificar
transformaciones múltiples, es decir, escribir una sola vez la propiedad transform, con todos los valores
necesarios, y finalmente cerrar la instrucción con punto y coma.
RetoAplica en un documento CSS la transformación de
tipo escala, en base a las recomendaciones oficiales de este lenguaje. Agrega
dos ejemplos para tamaños y orientación diferente.
¡Comparte el resultado del reto en tu vProfile y allí ubica un experto en el
área para que realice un comentario de complemento a tu código!
Tiempo disponible: entre 15 y 30 minutos.
CierreGracias a la aplicación de transformaciones de tipo
escala en base a las recomendaciones oficiales de CSS optimizamos el tiempo en
la creación de proyectos para internet, debido a la posibilidad de omitir la
modificación de una imagen original con editores específicos. Tenemos la
posibilidad de representar elementos con tamaños y orientación diferentes
cuando sea necesario. Con organización y paciencia diseñaremos profesionalmente
páginas web.
