TALLER |
|
Seguimos donde lo dejamos, con las nuevas funciones que implemento la nueva especificación CSS3, con ejemplos que debéis probar y practicar, que son fáciles pero fijarán los nuevos conocimientos vayamos al lio. RGBA - Red, Green, Blue y la A ¿? Desde el comienzo de esta serie de artículos de programación en HTML5 y CSS3 hemos usado colores hexadecimales y la función rgb() para colores en decimal. Ahora vamos a ver una nueva función que incorpora rgba() para facilitar declarar colores y trasparencias, resolviendo el problema previo provocado por la propiedad opacity pues en versiones anteriores de CSS este era un valor que heredaban los hijos, lo que provocaba tener que usar diferentes técnicas para convertir un elemento en transparente, veamos lo fácil que es ahora. Añadamos la función a nuestra plantilla y comprobemos como funciona. Imagen 1 En la imagen 1 vemos como se usa la propiedad rgba(), vemos que tiene 4 atributos, los tres primeros serían los mismos de cuando se usa la función rgb(), estos tres valores harían referencia a los valores para los colores rojo, verde y azul en números decimales del 0 al 255. El cuarto valor es nuevo y hace referencia a la capacidad de opacidad y su rango es de 0 a 1. Imagen 2 Observemos la imagen 1, al 4 atributo de rgba() se le asignó el valor 0.5 y la imagen 3 sería su resultado, como dijimos antes el rango de ese atributo es de 0 a 1 siendo cero transparente y uno un color sólido completamente opaco. Imagen 3 En la imagen 3 el cuarto atributo, su valor es 0.2, es más cercano a cero y comparando la imagen 2 con la imagen 4 vemos que la sombra queda más transparente. Imagen 4 Ahora observemos la imagen 5 en esta el valor del cuarto atributo es 1 es el máximo valor que admite, y si nos fijamos en la imagen 6 veremos un color más sólido y la menor transparencia que podemos aplicar. Imagen 5 Hemos intentado jugar un poco con los valores para que los veáis lo que no quita de que practiquéis para probar con que efectos dan más naturalidad o se adaptan mejor al diseño de la página que espero estéis montando a la vez que seguís el curso pues de otro modo os costará fijar los conocimientos. Imagen 6 Sigamos con la siguiente función, ahora le llego el turno a: HSLA Al igual que la función anterior rgba() le agrega el valor opacidad a la función rgb() lo mismo ocurre con la función hsla(), esta le añade el valor de opacidad a hsl(). ¿Qué función es hsl()? hsl() o hsla() que es la que vamos a ver ahora no es más que una función diferente de rgba() que serviría para lo mismo generar colores, solo que esta habrá gente que a lo mejor le pueda resultar más intuitiva, por su sintaxis: color: hsla(tono, saturación, luminosidad, opacidad); Veamos un ejemplo: Imagen 7 En la imagen 7, seleccionamos un tono 60 que es un amarillo, y jugando con la saturación, la luminosidad y opacidad el resultado sería el de la imagen 8. Imagen 8 Outline Esta propiedad ya estaba antes de la llegada de CSS3, por ejemplo cuando estás en una página y pulsas repetidamente la tecla tabulación el navegador iras seleccionando los elementos que podemos seleccionar como pueden ser enlaces, botones, etc, esto el navegador lo mostrará con un perfil de estilo punteado como el que vamos a generar con el código de la imagen 9. Imagen 9 En la línea 49 tendríamos el código que le dice el estilo de la línea, el grosor y el color, si bien como dijimos antes el navegador lo puede generar automáticamente por defecto, al pulsar tabulación el grosor por defecto sería de 1px. En la línea 50 con outline-offset le incluiremos a la línea un valor de desplazamiento que nos permitirá alejarlo del borde real, como podemos observar en la imagen 10, la línea amarilla punteada, este atributo solo necesita un valor en pixeles. Imagen 10 Border-image Bien hasta este momento usamos las propiedades border y outline, estas dos propiedades se limitan a líneas simples con unas opciones para configurarlas y poco más, la siguiente es más compleja. La propiedad border-image es nueva y llega con CSS3, con esta propiedad podremos superar las limitaciones de las dos anteriores propiedades vistas antes, dado que se nos permite poder usar imágenes a la hora de generar bordes. Imagen 11, Vamos a usar esta imagen para realizar la práctica por si os la queréis descargar. Ahora prestemos atención al código de la imagen 12. Imagen 12 En la imagen 12, estamos definiendo un doble borde con un ancho de 18px, para la cabecera y dentro de ese borde irá lo que configuremos con la propiedad border-image la cual utilizamos para seleccionar la imagen con el atributo url() y con el siguiente atributo declarar el tamaño de las piezas las cuales sacamos de la imagen en este caso, hemos cogido el rombo entero que tiene de diagonal 30px y la palabra clave stretch. En nuestro ejemplo usamos border podríamos haber usado la propiedad border-with que usa la misma sintaxis que margin para especificar diferentes tamaños para cada uno de los lados. Para border-image habría tres palabras clave que podemos elegir como último atributo, estas serían stretch que es la que usamos en la imagen 12 y podemos ver su resultado en la imagen 13, como estira las piezas a lo largo de la caja, round que el resultado sería el de la Imagen 14 y repeat imagen15. Imagen 13 Imagen 14 Imagen 15. Si nos fijamos en la imagen 14 y la 15 son prácticamente iguales excepto hacia las esquinas que en la 15 corta la imagen mientras que en la 14 la ajusta para no tener que cortar. Sigamos todos los elementos vistos hasta ahora los estamos creando de una manera que no se pueden modificar interactuando con la página, para ello se podría usar por ejemplo código Javascript o usando librerías de jQuery (www.jquery.com), no se había creado digamos una forma específica de hacerlo, ahora con la llegada de CSS3 nos ha traído dos propiedades nuevas que son transform y transition, hoy veremos transform y en el siguiente capítulo transition, por ser bastante extenso para un solo artículo. Imagen 16 Imagen 17 Transform Arriba en la imagen 16 tendríamos el código al que hace referencia la imagen 17, no es más que código utilizado en el anterior capítulo de CSS3 maquillando la página, lo vamos a usar para que veáis las aplicaciones de transform de forma práctica. Transform: scale Imagen 18 Como podemos observar en la imagen 18 hemos añadido dos líneas de código, la línea 59 y 60, hemos usado los dos prefijos -moz- y -webkit- que recordar que son para mozilla y el segundo para safari y chrome, seguido de la propiedad transform: y le añadimos el atributo scale al cual se le puede dar dos parámetros distintos el valor X para la escala horizontal y el valor Y para la escala vertical. En las escalas se pueden declarar tanto con números enteros como decimales, por ejemplo el valor 1 sería la proporción inicial por lo que los números inferiores a uno reducirían la proporción y los mayores de uno la aumentarían como por ejemplo la imagen 18 la escala el valor a sido (1,2) ampliándolo como podemos ver en la imagen 19 por dos el valor de la vertical, es decir si lo queremos estirar más hacia arriba cambiaremos solo el 2 por un número mayor. Imagen 19 Ahora vamos a ver qué efecto podemos provocar con algún valor negativo… Imagen 20 En la imagen 10 vemos que usamos el atributo scale igual que antes, los valores los dos son 1 que quiere decir que guardan la proporción el primero es negativo, poner un -1 provoca un efecto espejo como en la imagen 21. Imagen 21 Qué sucede si el segundo valor es el negativo… Imagen 22 En la imagen 22 vemos que el segundo valor es el negativo, recordad que el primer valor dijimos que era el eje X y el segundo el eje Y, X será la horizontal e Y será la vertical. Imagen 23 Bien si comparamos ahora las dos imágenes lo tendréis más claro, como funciona el valor negativo haciendo un efecto espejo dependiendo del eje que elijamos. Transform: rotate La siguiente función es rótate como seguramente habréis adivinado es para rotar, con ella haremos que el objeto rote poniendo un valor que hace referencia a los grados usando la unidad deg. Imagen 24 En la imagen 24 vemos como usar el atributo rótate y en este caso le damos un valor 12deg, para tenerlo claro cómo actúa mirar la imagen 25. Imagen 25 En la imagen 25 podemos ver cómo actúa el atributo junto con el valor 12deg, que es como le decimos cuanto queremos que rote, esta rotación la hará en la dirección de las agujas del reloj. Transform: skew Con esta función podremos cambiar la simetría del elemento en grados y en sus dos dimensiones, la mejor forma de entenderlo es viendo cómo se hace… Imagen 26 Aquí vemos como usamos la propiedad transform junto a los dos prefijos para mozilla y safari con chrome, el atributo skew con el valor 22deg. Imagen 27 Esta vez lo que ha cambiado es el ángulo en la misma horizontal, veamos que sucede cuando le indicamos un segundo valor. Imagen 28 Al poner un segundo valor este hace la función de la propiedad que vimos anteriormente rotate. Imagen 29 Supongo que ya se entiende a que nos referimos con que podemos cambiar ambas dimensiones a la vez. Transform: translate Esta función es bastante simple supongamos que queremos desplazar cualquier elemento unos pixeles hacia un lado, subirlo o bajarlo pues esta sería la función que usaríamos. Imagen 30 En la imagen 30 usamos el atributo translate junto con un valor positivo 80px, y hacemos que el cartel se desplace a la derecha, como podemos observar en la imagen 31. Imagen 31 En la imagen 32, vemos el uso del atributo translate esta vez con valor en negativo con lo que se consigue desplazar a la izquierda el cartel. Imagen 32 Imagen 33 Además de desplazar en la horizontal también podemos desplazar en la vertical como podemos ver en el código de la imagen 34 usando translate y poniendo a que eje queremos referenciar el X o él Y (el de la vertical sería él Y). Imagen 34 Imagen 35 Aquí veríamos el resultado del código de la imagen 34. Y ahora veamos cómo lo haríamos si quisiésemos hacer un transformación más compleja, pues lo único que debemos tener en cuenta es después de escribir la propiedad transform las funciones que vayamos añadiendo deberán ir separadas por un espacio como podemos observar en la imagen 36. Imagen 36 Imagen 37
En la imagen 37, podemos ver como quedaría el código de la imagen 36 las combinaciones serían muchas lo que se debe hacer es practicar y hacer pruebas, hasta aquí hemos llegado esta semana la siguiente le daremos otra vuelta de tuerca a esto con CSS3, aplicándole movimientos simples, sin más un saludo y hasta el próximo capítulo. Manuel Castelló (kasmangou) Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |