Taller de introducción HTML5+CSS3 (4)

Última parte del taller de introducción a HTML5 y CSS3 impartido en la Facultad de Ciencias de la Computación de la BUAP

Transcript

1. Taller de Introducción a HTML5 y CSS3 Luis Montealegre @MontealegreLuis
2. Julio 2013 Comunidad PHP Puebla 2 Comunidad PHP Puebla • Cuentas de Comunidad PHP Puebla • http://twitter.com/ComPHPPuebla • http://facebook.com/ComPeHPPuebla • http://github.com/ComPHPPuebla • https://packagist.org/users/ComPHPPuebla • https://speakerdeck.com/comphppuebla • Sitio Web • http://www.comunidadphppuebla.com
3. Julio 2013 Comunidad PHP Puebla 3 Gradientes CSS3 • Los gradientes lineales son aquellos en los que las transiciones de colores son a través de una línea recta: de arriba hacia abajo, de izquierda a derecha o desde ejes arbitrarios
4. Julio 2013 Comunidad PHP Puebla 4 Gradientes • La sintaxis básica para gradientes es: .warning { background-image: linear-gradient(...); } • Dentro de los parentesis se especifica la dirección del gradiente y los colores que se usaran
5. Julio 2013 Comunidad PHP Puebla 5 Gradientes • La dirección del gradiente se puede expresar en grados 0deg, 90 deg, etc. • Podemos usar también el nombre de la esquina que se usará como inicio top, bottom, right, left • Después de la dirección se especifican los colores que se usaran junto con el porcentaje que indica en que parte del elemento inicia la transición de color
6. Julio 2013 Comunidad PHP Puebla 6 Gradientes • Gradiente de blanco a negro • background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%); • background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%); • background-image: -moz-linear-gradient(#FFF 0%, #000 100%); • background-image: -moz-linear-gradient(#FFF, #000); • Gradiente de negro a blanco y de vuelta a negro • background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000); • Es posible poner el primer color en un porcentaje distinto a 0 y el final en uno distinto a 100 • background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);
7. Julio 2013 Comunidad PHP Puebla 7 Gradientes background-image: -moz-linear- gradient(45deg, #FF0000 0%, #FF6633 20%, #FFFF00 40%, #00FF00 60%, #0000FF 80%, #AA00AA 100%); background-image: -moz-linear- gradient(45deg, #FF0000, #FF6633, #FFFF00, #00FF00, #0000FF, #AA00AA); • Los porcentajes son opcionales, si se omiten se distribuyen a lo largo del elemento
8. Julio 2013 Comunidad PHP Puebla 8 Gradientes • El formato de webkit background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000)); • Ejemplo • background-image: • -webkit-gradient(linear, left top, right bottom, • from(red), • to(purple), • color-stop(20%, orange), • color-stop(40%, yellow), • color-stop(60%, green), • color-stop(80%, blue));
9. Julio 2013 Comunidad PHP Puebla 9 Gradientes #ad2 { background-image: -moz-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); background-image: -webkit-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ) background-image: -o-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); }
10. Julio 2013 Comunidad PHP Puebla 10 Gradientes radiales • Los gradientes radiales son gradientes circulares o elípticos • Ejemplos: – background-image: -moz-radial- gradient(#FFF, #000); – background-image: -moz-radial- gradient(center, #FFF, #000); – background-image: -moz-radial- gradient(center, ellipse cover, #FFF, #000);
11. Julio 2013 Comunidad PHP Puebla 11 Gradientes radiales • Cambiando a posición inicial del gradiente • background-image: -moz-radial- gradient(30px 30px, #FFF, #000); • La forma del gradiente puede tomar 2 valores circle y ellipse • Para el tamaño se pueden usar los siguientes valores • closest-side, closest-corner, farthest side, farthest corner, contain(closest- side), cover(farthest-corner)
12. Julio 2013 Comunidad PHP Puebla 12 Gradientes radiales • Son similares a los lineales un color seguido de un porcentaje (opcional) • background-image: -moz-radial-gradient(30px 30px, circle farthest-side, #FFF, #000 30%, #FFF); • Sintaxis de webkit • background-image: -webkit-gradient(radial, 30 30, 0, 30 30, 100%, from(#FFFFFF), to(#FFFFFF), color-stop(.3,#000000))
13. Julio 2013 Comunidad PHP Puebla 13 Gradientes repetidos .repeat_linear_1 { background-image: -webkit-repeating-linear- gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%); } .repeat_radial_2 { background-image: -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); } .multiple_gradients_3 { background-image: -webkit-repeating-linear- gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%), -webkit-repeating-radial- gradient(top left, circle, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); }
14. Julio 2013 Comunidad PHP Puebla 14 Imágenes de fondo múltiples • Para crear un fondo con varias imágenes simplemente separa las imágenes con una coma. • background-image: url(firstImage.jpg), url(secondImage.gif), url(thirdImage.png);
15. Julio 2013 Comunidad PHP Puebla 15 Imágenes de fondo múltiples • También es posible usar un gradiente como una de las varias imágenes de fondo #ad2 { background-image: url(../images/bg-bike.png), linear-gradient(top, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98%); background-position: 50% 88%, 0 0; }
16. Julio 2013 Comunidad PHP Puebla 16 Transfomaciones • Las transformaciones permiten mover, rotar, escalar o inclinar cualquier elemento en una página • Para modificar un elemento se usa la propiedad transform cuyo valor son funciones de transformación, las cuales se separan con espacios
17. Julio 2013 Comunidad PHP Puebla 17 Transformaciones • Las funciones de traslado permiten mover un elemento hacia la izquierda, derecha, arriba y abajo. • La función translate(x, y) mueve un elemento x desde la izquierda y y desde arriba -webkit-transform: translate(45px,-45px); -moz-transform: translate(45px,-45px); -ms-transform: translate(45px,-45px); -o-transform: translate(45px,-45px); transform: translate(45px,-45px);
18. Julio 2013 Comunidad PHP Puebla 18 Transformaciones • Si solo se quiere mover un elemento horizontal o verticalmente se pueden usar las funciones translatex y translatey -webkit-transform: translatex(45px); -moz-transform: translatex(45px); -ms-transform: translatex(45px); -o-transform: translatex(45px); transform: translatex(45px); -webkit-transform: translatey(-45px); -moz-transform: translatey(-45px); -ms-transform: translatey(-45px); -o-transform: translatey(-45px); transform: translatey(-45px);
19. Julio 2013 Comunidad PHP Puebla 19 Transformaciones • Mover un elemento cuando se pase sobre él #ad3 h1:hover span { color: #484848; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform:translateX(40px); transform: translateX(40px); }
20. Julio 2013 Comunidad PHP Puebla 20 Escalar • La función scale(x,y) usando los factores definidos en x (horizontal) y y (vertical) • Si solo se proporciona un valor se usará tanto para x como para y -webkit-transform: scale(1.5,0.25); -moz-transform: scale(1.5,0.25); -ms-transform: scale(1.5,0.25); -o-transform: scale(1.5,0.25); transform: scale(1.5,0.25);
21. Julio 2013 Comunidad PHP Puebla 21 Escalar • Al igual que la función translate también se puede usar scalex y scaley que son los equivalentes scale(x,1) y scale(1,y) respectivamente • #ad3 h1:hover span { color: #484848; -webkit-transform: translateX(40px) scale(1.5); -moz-transform: translateX(40px) scale(1.5); -ms-transform: translateX(40px) scale(1.5); -o-transform: translateX(40px) scale(1.5); transform: translateX(40px) scale(1.5); }
22. Julio 2013 Comunidad PHP Puebla 22 Rotación • La función rotate gira un elemento alrededor de un punto de origen (por default el centro del elemento), usando un ángulo específicado (generalmente declarado en grados) • Los valores positivos giran en dirección del reloj, valores negativos al lado contrario
23. Julio 2013 Comunidad PHP Puebla 23 Rotación #ad3 h1:hover span { color: #484848; -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); -moz-transform:rotate(10deg) translateX(40px) scale(1.5); -ms-transform:rotate(10deg) translateX(40px) scale(1.5); -o-transform:rotate(10deg) translateX(40px) scale(1.5); transform:rotate(10deg) translateX(40px) scale(1.5); }
24. Julio 2013 Comunidad PHP Puebla 24 Inclinación • La función skew(x,y) provoca una inclinación sobres los ejes x y y • Si el segundo valor se omite la inclinación solo ocurrirá en el eje x -webkit-transform: skew(15deg, 4deg); -moz-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); -o-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);
25. Julio 2013 Comunidad PHP Puebla 25 Inclinación • Para cambiar el origen de la inclinicación se usa la propiedad transform-origin -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;
26. Julio 2013 Comunidad PHP Puebla 26 Transiciones • Los pasos para crear una transición usando solo CSS son: 1.Declarar el estado inicial del elemento 2.Declara el estado final del elemento 3.Incluir las funciones de transición: transition-property, transition- duration, transition-timing- function y transition-delay
27. Julio 2013 Comunidad PHP Puebla 27 Transiciones • Transition-property contiene la lista de propiedades CSS de el elemento al que se aplicará la transición • Lista de propiedades que se pueden usar en transciciones – background-color, background-position, border-color, border-spacing, border- width, bottom, top, left, right, color, font-size, font-weight, height, width, lletter-spacing, line-height, margin, max-height, max-width, min-height, min- width, opacity, outline-color, outline-offset, and outline-width, padding, text-indent, text-shadow, vertical-align, visibility, word-spacing, z-index • Las propiedades se deben separar por comas y se puede usar all para modificar todas la propiedades disponibles
28. Julio 2013 Comunidad PHP Puebla 28 Transiciones • La propiedad transition-duration determina cuanto durará la transición, se puede específicar en segundos o milisegundos -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s;
29. Julio 2013 Comunidad PHP Puebla 29 Transiciones • La propiedad transition-timing- function permite controlar de forma más detallada la velocidad de una transición. • Los valores válidos son: ease, linear, ease-in, ease-in o ease-in-out
30. Julio 2013 Comunidad PHP Puebla 30 Transiciones • Finalmente la función transition-delay que sirve para agregar un retraso antes de que la animación inicie. • Su valor se puede expresar en segundos o milisegundos -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms;
31. Julio 2013 Comunidad PHP Puebla 31 Transiciones #ad2 h1 span { -webkit-transition-property: -webkit-transform, color; -moz-transition-property: -moz-transform, color; -o-transition-property: -o-transform, color; transition-property: transform, color; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } #ad2 h1 span { -webkit-transition: -webkit- transform 0.2s ease-out; -moz-transition: -moz- transform 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out; transition: transform 0.2s ease-out; }
32. Julio 2013 Comunidad PHP Puebla 32 Ligas de interés • Generar gradientes: – http://www.colorzilla.com/gradient-editor/ • Ejemplos de transiciones con JavaScript – http://dan-silver.github.io/ElementTransitions.js/
33. Julio 2013 Comunidad PHP Puebla 33 ¡Muchas gracias! ¿Te gustaría colaborar con nosotros? contacto@comunidadphppuebla.com