TALLER |
|
 La semana pasada estuvimos viendo las nuevas funciones CSS3 y como lo prometido es deuda, en esta veremos funciones con movimientos simples de los que antes se hubiera necesitado muchas líneas de código, veamos como CSS3 lo resuelve de forma rápida.  Imagen 1 En la imagen 1 podemos ver el código de la semana pasada, en el cual ponemos para que veáis las pocas líneas de código que hacen falta para crear efectos hasta ahora complicados.  Imagen 2 En la imagen 2 podemos ver de qué manera interpreta el navegador el código de la imagen 1, aunque este ya lo visteis la semana pasada, pero ahora vamos a darle movimiento. Transformaciones dinámicas ¿Qué son estas transformaciones dinámicas? hasta ahora todo lo que hemos diseñado es contenido estático, no se mueve, no podemos interactuar con él de ninguna manera salvo con los enlaces, pero en CSS3 con las transformaciones que vimos la semana pasada combinándolas con pseudo clases podemos hacer que esto cambie.  Imagen 3 En la imagen 3 hemos cogido las reglas de la imagen 1, las de la línea 60 y 61 y las usamos en las líneas 61 a 63 precedidos de una nueva regla, #titulo:hover donde hemos hecho referencia a titulo con la pseudo clase :hover. El resultado es cómo podemos ver aquí debajo en el video, qué al pasar el cursor por encima de el título referenciado, esta aplica todas las transformaciones de las líneas 61 a 63 y alejando el puntero este vuelve a su posición inicial. Transition Ahora como su nombre indica vamos a ver las transiciones, en el video anterior podemos ver el efecto, este es automático, pasa de una posición inicial a la final sin ningún paso intermedio, aunque una animación real no sería esto, requeriría en su proceso de varios pasos intermedios y esto es lo que van a hacer las transiciones. La misión de las transiciones entonces sería crear todos los pasos intermedios entre una posición inicial y una final, de manera que el paso de una a otra quede suavizado y de la sensación de que se mueve realmente.  Imagen 4 En la imagen 4 ya hemos añadido la propiedad transition, en las líneas 60 y 61, como podemos ver con esta propiedad podemos aplicarle hasta cuatro atributos, estos siempre separados entre ellos por un espacio. El primer atributo es la propiedad en que actuará la transición, como podemos ver usamos transform. El segundo atributo hace referencia al tiempo que tardará en ir de la posición de partida a la final. El tercer atributo es una de las palabras clave que veis aquí: Ease, linear, ease-in, ease-in-out. Las palabras de arriba indican la manera en que se realizará la transición basándose en una curva Bézier. El cuarto atributo sería el retardo desde que nuestro cursor pasa por encima hasta cuando empieza la transición. Si queremos que todas las propiedades estén cambiando en un objeto produzcan una transición, debemos especificar la palabra clave all o declarar varias propiedades a la vez separándolas con comas. Llegados a este punto deberíais practicar esto junto con las últimas palabras clave que hemos visto. Ahora os dejamos aquí abajo una guía de referencia rápida de CSS3 y una tabla de colores para cuando hagáis vuestras pruebas. Guía Rápida CSS3 Selector de atributo palabraclave[atributo=valor] Pseudo clase :nth-child() si nos fijamos la estructura arbórea que hayamos creado en nuestro documento HTML , esta pseudo clase en capaz de encontrar un hijo. p:nth-child(3) referenciamos el elemento p que tiene varios hermanos y nos referimos al 3 :first-child= :nth-child(1) aquí en las dos haríamos referencia al primer hijo :last-child hace referencia al último hijo :only-child único hijo de un mismo elemento padre :not() La usaríamos para referenciar todos los elementos menos el marcado. Selectores Selector > referencia el elemento de la derecha cuando el elemento de la izquierda es su padre. Div>h2 Selector + hace referencia a elementos hermanos, referencia al de la derecha cuando es inmediatamente precedido por el de la izquierda. h1+p Selector ~ Este selector es similar al anterior pero sin ser necesario que esté ubicado inmediatamente después del elemento que pongamos a la izquierda. Efectos visuales y dinámicos. Border-radius Sirve para crear esquinas redondeadas el primer parámetro haría referencia a la horizontal y el segundo a la vertical. Border-radius: 10px / 20px ; Border-radius: 30px ; (el valor al ser uno solo, sería el mismo para las cuatro esquinas). Box -shadow: Crea sombras para la caja que envuelve el elemento. Box-shadow: #ffffff 5px 5px 8px inset; El primer atributo haría referencia al color, los dos siguientes al desplazamiento de la sombra en vertical y en horizontal (los valores pueden ser positivos o negativos depende y el cuarto la opacidad de la sombra mientras que el quinto sería una palabra clave que en este caso hace una sombra interna para provocar un efecto de profundidad. @font-face Con esta regla podremos usar la fuente que queramos solo necesitaremos el archivo .ttf, darle un nombre con la propiedad font-family y especificar la dirección del archivo con src. @font-face { font-family: 'SEGA'; src: url('MR ROBOT.ttf'); } Linear-gradient(inicio, color inicio, color final) Se puede aplicar a: background o background-image La posición de inicio recordar que se puede dar con palabras clave: center, top, bottom, left y right o también declarando en pixeles o en porcentaje. background: -webkit-linear-gradient(top, #ffc0cb 30%, #ff0000 85%); background: -moz-linear-gradient(top, #ffc0cb 30%, #ff0000 85%); radial-gradient(inicio, color inicio, color final) Se puede aplicar a: background o background-image. Existirían dos valores para la forma que queramos darle al gradiente: circle y ellipse La posición de inicio recordar que se puede dar con palabras clave: center, top, bottom, left y right o también declarando en pixeles o en porcentaje. background: -webkit-radial-gradient(top, ellipse, #ffc0cb 30%, #ff0000 85%); background: -moz-radial-gradient(top, ellipse, #ffc0cb 30%, #ff0000 85%); rgba() esta función sería rgb pero ampliada mediante un cuarto valor que hace referencia a la opacidad del color. rgba(rojo con un rango de 0-255, verde de 0-255, azul de 0-255, opacidad con un rango de 0-1) hsla() esta función sería hsl pero ampliada mediante un cuarto valor que hace referencia a la opacidad del color. hsla(tono de 0-360, saturación en porcentaje, luminosidad en porcentaje, opacidad de 0-1) outline ha sido ampliada con la propiedad outline-offset las cuales combinándolas podríamos crear un doble borde el segundo alejado del original. outline: 2px solid #ffffff; outline-offset: 15px; border-image: Con esta propiedad podemos generar bordes con imágenes personalizadas solo necesitaremos un imagen la que pondremos su dirección con url un tamaño para las piezas y una palabra clave para indicar como debe tratarla: stretch, round y repeat. border-image: url(“archivo imagen.png”) 20 stretch; Transform Podemos transformar un elemento como su nombre indica. Sus atributos serían: scale (escalar) solo tendría un parámetro con un valor negativo invierte el elemento, los valores inferiores a uno lo hacen más pequeño, con un 1 mantendría la proporción y superior a uno lo haría más grande. Transform: scale(1.8); rotate (rotar) también tendría un parámetro este expresado en grados. transform: rotate(75deg); skew (inclinar) Recibiría dos parámetros uno para la transformación horizontal y vertical también en grados. Transform: skew(30deg, 80deg); translate (trasladar) mueve el objeto tantos pixeles como especifiquemos podemos indicarlo con el eje horizontal y el vertical, X e Y. si aplicamos valores negativos en el X izquierda y en el Y arriba. transform: translateX(-80px) translateY(40px); Transition Esta propiedad la usaremos para crear una transición de un objeto que tiene un punto inicial a otro final generando los pasos intermedios, se podrán usar hasta 4 parámetros. Que serán la propiedad a la que se hace referencia, el tiempo que tardará desde la posición inicial a la final, una palabra clave entre: ease, linear, ease-in, ease-out, ease-in-out y un valor que retardará el inicio desde que el cursor se posa encima del objeto. transition: color 3s linear 0.5s; 
Y con esto damos por terminado la parte de CSS3, en el próximo capítulo os propondremos y realizaremos una serie de ejercicios para practicar todo lo aprendido y aplicarlo de forma creativa para maximizar la creatividad, antes de de comenzar ya javascript. Procurad que la transición del final de las vacaciones y el periodo otoñal os sea leve :-) 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. |
Ciencia y Tecnología
Investigación Médica y Salud
Eres Periodista Científico?
Educación y Formación
Sociedad, Igualdad y Sostenibilidad
Cultura y Ocio
¿Tienes una cita?
Aventura y Supervivencia
|
||||
