Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
ÍNDICE | UD 3- CSS CSS3.....................................................................................................2 Módulos CSS3............................................................................................................ 2 Recomendación CSS3................................................................................................... 2
CSS3
FUENTES
WEB- LA REGLA @
FONT-FACE.............................................................2
Distintos formatos de fuentes.........................................................................................3 Fuentes TrueType (TTF)............................................................................................ 3 Fuentes OpenType (OTF)...........................................................................................3 La Web Open Font Format (WOFF)...............................................................................3 SVG Fuentes / formas.............................................................................................. 3 Fuentes OpenType incrustadas (EOT)............................................................................3 Soporte del navegador para formatos de fuentes..............................................................3 El uso de la fuente que desea.....................................................................................4 El uso de texto en negrita............................................................................................. 4 Descriptores de Fuente en CSS3..................................................................................4
CSS IMAGEN OPACIDAD / TRANSPARENCIA..................................................................5 CSS3 TRANSFORMACIONES.................................................................................7 CSS3 Transformaciones 2D............................................................................................. 8 El método translate ()..............................................................................................8 El método rotate().................................................................................................. 8 El método scale()................................................................................................... 9 El método skew().................................................................................................... 9 El método matrix().................................................................................................. 9 Las propiedades de tansformaciones CSS3 ....................................................................10 Métodos de transformación 2D..................................................................................10 CSS3 Transformaciones 3D............................................................................................ 10 El método rotateX()............................................................................................... 11 Propiedades de transformaciones CSS3 ........................................................................11 Transiciones de CSS3.................................................................................................. 12 Cambios Múltiples..................................................................................................... 13 Propiedades de Transición CSS3.................................................................................14
ANIMACIONES CON CSS3 ................................................................................14 La regla @ keyframes en CSS3.....................................................................................14 Animación CSS3........................................................................................................ 14 Efectos múltiples.................................................................................................. 15 Más ejemplos de animación......................................................................................16
,CSS3
VARIAS COLUMNAS................................................................................18
CSS3 varias columnas................................................................................................. 18 Column-count...................................................................................................... 19 Column-gap......................................................................................................... 19 Reglas de columnas CSS3......................................................................................... 19 CSS3 varias columnas Propiedades..................................................................................20
INTERFAZ
DE
USUARIO CSS3.............................................................................20
Redimensionar Resize................................................................................................. 20 Box-sizing.............................................................................................................. 21 Esquema CSS3 Offset.................................................................................................. 21 Propiedades CSS3 de interfaz de usuario..........................................................................22
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-1
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
CSS3 CSS3 es el último estándar de CSS. CSS3 es compatible hacia atrás completamente con versiones anteriores de CSS.
MÓDULOS CSS3 CSS3 se ha dividido en "módulos". Contiene la "especificación CSS de edad" (que se ha dividido en partes más pequeñas). Además, se añaden nuevos módulos. Algunos de los módulos de CSS3 más importantes son: •
Selectores
•
Modelo de caja
•
Fondos y Bordes
•
Opacidad de imágenes
•
Los valores de imagen y contenido Reemplazado
•
Efectos de texto
•
2D/3D Transformaciones
•
Animación
•
Diseño de columna múltiple
•
Interfaz de usuario
RECOMENDACIÓN CSS3 La especificación CSS3 está todavía en desarrollo por el W3C. Sin embargo, muchas de las nuevas propiedades de CSS3 se han implementado en los navegadores modernos.
CSS3 FUENTES WEB- LA REGLA @ FONT-FACE Webfonts permite a los diseñadores web para utilizar fuentes que no están instaladas en el ordenador del usuario. Cuando haya encontrado / comprado una fuente que desea utilizar, basta con incluir el archivo de fuente en su servidor web, y se descargará automáticamente al usuario cuando sea necesario. Las fuentes propias se definen en la regla @ font-face CSS3. Y tienen un soporte en casi todos los navegadores actuales, aunque no todos los navegadores soportan todos los archivos de fuente...
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-2
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
DISTINTOS FORMATOS DE FUENTES Fuentes TrueType (TTF) TrueType es una fuente estándar desarrollado a finales de 1980, por parte de Apple y Microsoft. TrueType es el formato de la fuente más común tanto para el Mac OS y sistemas operativos de Microsoft Windows.
Fuentes OpenType (OTF) OpenType es un formato para las fuentes informáticas escalables. Fue construido en TrueType, y es una marca comercial registrada de Microsoft. Las fuentes OpenType son de uso común hoy en las principales plataformas informáticas.
La Web Open Font Format (WOFF) WOFF es un formato de fuente para su uso en páginas web. Fue desarrollado en 2009, y ahora es una Recomendación del W3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es apoyar la distribución de la fuente a partir de un servidor a un cliente sobre una red con limitaciones de ancho de banda.
SVG Fuentes / formas Fuentes SVG permiten SVG para ser utilizado como glifos al mostrar texto. La especificación SVG 1.1 se define un módulo de fuente que permite la creación de fuentes dentro de un documento SVG. También puede aplicar CSS a documentos SVG, y la regla @ font-face se puede aplicar al texto en documentos SVG.
Fuentes OpenType incrustadas (EOT) Fuentes EOT son una forma compacta de fuentes OpenType diseñado por Microsoft para su uso como fuentes incrustadas en las páginas web.
Soporte del navegador para formatos de fuentes Los números de la tabla especifica la primera versión del navegador que soporta totalmente el formato de fuente.
Formato
Explorer
Chrome
Firefox
Safari
Opera
TTF/OTF fonts
9.0*
4.0
3.5
3.1
10.0
WOFF fonts
9.0
5.0
3.6
5.1
11.1
SVG fonts
Not supported
4.0
Not supported
3.2
9.0
EOT fonts
6.0
Not supported
Not supported
Not supported
Not supported
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-3
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
* El formato de fuente sólo funciona cuando está ajustado para ser "instalable".
El uso de la fuente que desea En la regla @ font-face CSS3 primero debe definir el nombre de la fuente (por ejemplo miFuente) y, a continuación, seleccione el archivo de fuente.
Nota Consejo: Utilice siempre letras minúsculas para la dirección URL de la fuente. Las letras mayúsculas se pueden producir resultados inesperados en el IE. Para utilizar la fuente para un elemento HTML, consulte el nombre de la fuente (miFuentet) mediante la propiedad font-family <style> @font-face { font-family: miFuente; src: url(sansation_light.woff); } div { font-family:miFuente; } </style>
EL USO DE TEXTO EN NEGRITA Debe añadir otra regla @ font-face contiene descriptores para texto en negrita: @font-face{ font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }
Los navegadores utilicen esto cada vez un pedazo de texto con la fuente-familia "myFirstFont" debe rendir en negrita. De esta manera usted puede tener muchas reglas @ font-face para el mismo tipo de letra.
Descriptores de Fuente en CSS3 La siguiente tabla muestra todos los descriptores de fuentes que se pueden definir dentro de la regla @ font-face: •
font-family
name Obligatorio. Defines a name for the font
•
src
Obligatorio Defines the URL of the font file
•
font-stretch
URL
normal
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-4
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
•
condensed
•
ultra-condensed
•
extra-condensed
•
semi-condensed
•
expanded
•
semi-expanded
•
extra-expanded
•
ultra-expandedOptional. Defines how the font should be stretched. Default is "normal"
•
font-style
•
italic
•
oblique Optional. Defines how the font should be styled. Default is "normal"
•
font-weight
•
bold
•
100
•
200
•
300
•
400
•
500
•
600
•
700
•
800
•
900
normal
normal
Optional. Defines the boldness of the font. Default is "normal"
CSS IMAGEN OPACIDAD / TRANSPARENCIA Crear imágenes transparentes con CSS es fácil. La propiedad de opacidad CSS es una parte de la recomendación W3C CSS3.
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-5
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
La propiedad CSS3 para la transparencia es la opacidad . Podemos hacer que las cajas o las imágenes varíen su opacitad
img{ opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }
Podemos crear efectos basados en la opacidad, por ejemplo mediante hover img{ opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover{ opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
El CSS para esto es: la opacidad = 1 También se lo podemos aplicar a cajas
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-6
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS <html> <head> <style> div.background{ width:500px; height:250px; background:url(klematis.jpg) repeat; border:2px solid black; } div.transbox{ width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p{ margin:30px 40px; font-weight:bold; color:#000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>Este es un texto en una caja transparente</p> </div> </div> </body> </html>
En primer lugar, se crea un elemento div (class = "background") con una altura fija y anchura, una imagen de fondo, y una frontera. Luego creamos un div más pequeño (class = "transbox") dentro del primer elemento div. El div "transbox" div tiene un ancho fijo, un color de fondo, y un border - y es transparente. Dentro de la div transparente, añadimos un poco de texto dentro del elemento ap. También podemos crear efectos de transparencia en los backgrounds y los modelos rgba de color.
CSS3 TRANSFORMACIONES Con CSS3 transforma, nos podemos mover, elementos de escala, giro, vuelta, y las estrías. Esta sería su declaración tipo:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-7
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS div { transform: transform-function || none; /* puede enumerar espacios */ }
múltiples, separadss por
Una transformación es un efecto que permite una forma de cambio de elemento, el tamaño y la posición. Usted puede transformar sus elementos utilizando 2D o transformación 3D
CSS3 TRANSFORMACIONES 2D Los métodos para hacer transformaciones 2d son: •
translate ()
•
rotate ()
•
scale ()
•
skew () (sesgar)
•
matrix ()
Ejemplo div{ transform: rotate(30deg); }
El método translate () Con el método translate (), el elemento se mueve desde su posición actual, en función de los parámetros dados para la posición (eje Y) izquierdo (eje X) y la parte superior: div{ transform: translate(50px,100px);}
El valor de translate (50px, 100px) mueve el elemento 50 píxeles desde la izquierda, y 100 píxeles desde la parte superior. El método rotate() Con el método rotate (), el elemento gira en sentido horario en un grado dado. Los valores negativos se permiten y gira el elemento hacia la izquierda. div{ -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */ transform: rotate(30deg); }
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-8
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
La rotación de valor (30deg) gira el elemento hacia la derecha 30 grados.
Escala
El método scale()
Con el método de scale (), el elemento aumenta o disminuye el tamaño, dependiendo de los parámetros dados para la anchura (eje X) y la altura (eje Y): div{ -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Chrome, Safari, Opera */ transform: scale(2,4); }
La escala de valores (2,4) transforma el ancho sea el doble de su tamaño original, y la altura de 4 veces su tamaño original. El método skew() Oblicuidad Con el método de inclinación (), el elemento gira en un ángulo dado, en función de los parámetros dados para la (eje X) horizontal y el (eje Y) líneas verticales:
div{ -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */ transform: skew(30deg,20deg); }
El valor de inclinación (30deg, 20deg) gira el elemento 30 grados alrededor del eje X, y 20 grados alrededor del eje Y. El método matrix() El método de la matriz () combina la totalidad de los métodos 2D en una forma. El método de la matrix toma seis parámetros, que contienen funciones matemáticas, que le permite: rotar, escalar, mover (trasladar) y sesgar elementos. Cómo rotar un elemento div 30 grados, utilizando el método de la matriz:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-9
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS div{ -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */ transform:matrix(0.866,0.5,-0.5,0.866,0,0); }
Las propiedades de tansformaciones CSS3 •
transform
Este método se aplica tanto a transformaciones en 2D y en 3D
•
transform-origin
Le permite cambiar la posición de elementos transformados
Métodos de transformación 2D •
matrix(n,n,n,n,n,n)Define una transformación 2D,usando una matriz (arreglo) de seis valores
•
translate(x,y)
•
translateX(n) Define una transformación transporte en el parámetro de x
•
translateY(n) Define una transformación de transporte en el parámetro de y
•
scale(x,y) altura
Define una transformación de escala en el parámetro de anchura y
•
scaleX(n)
Define una transformación de escala en el parámetro de anchura
•
scaleY(n)
Define una transformación de escala en el parámetro de altura
•
rotate(angle) un ángulo
•
skew(x-angle,y-angle) eje YX y del eje Y
•
skewX(angle)
Define una transformación de sesgo 2D a lo largo del eje X
•
skewY(angle)
Define una transformación de sesgo 2D a lo largo del eje Y
Define una transformación transporte en el parámetro de x e y
Define una rotación 2D específicando el parámetro mediante Define una transformación de sesgo 2D a lo largo del
CSS3 TRANSFORMACIONES 3D CSS3 permite formatear los elementos mediante transformaciones 3D. Vamos a ver los métodos de transformación 3D: rotateX () Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-10
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
rotateY () La diferencia entre rotación 2D y rotación 3D es que la rotación 3D se realiza sobre su propio eje, pudiendo ser sobre el eje de las x o sobre el eje de las y: El método rotateX() Rotar sobre las X Con el método rotateX (), el elemento gira alrededor de su eje X en un grado dado. div{ -webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */ transform: rotateX(120deg); }
El método rotateY Con el método rotateY (), el elemento gira alrededor de su eje en un grado dado. div{ -webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */ transform: rotateY(130deg); }
Propiedades de transformaciones CSS3 La siguiente tabla muestra todas las propiedades de transformación: •
transform
Aplica transformaciones 3D o 2D a un elemento
•
transform-origin
Le permite cambiar la posición de elementos transformados
•
transform-style espacio 3D
Especifica cómo los elementos anidados se prestan en el
•
perspective Especifica la perspectiva de cómo se verán los elementos 3D
•
perspective-origin Especifica la posición más baja de dónde se originará la perspectiva
•
backface-visibility Define si un elemento debe ser visible sin estar frente a la pantalla
Métodos de transformación 3D •
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) una matriz de 4x4 16 values
Defines a 3D transformation, usando
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-11
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
•
translate3d(x,y,z) define una traslación 3D
•
translateX(x)Define una translación 3D usando solamente el eje de las X
•
translateY(y)
Define una translación 3D usando solamente el eje de las Y
•
translateZ(z)
Define una translación 3D usando solamente el eje de las Z
•
scale3d(x,y,z)
Define una transformación de escala 3D
•
scaleX(x)
Defines unas transformación de escala en el eje de la X
•
scaleY(y)
Defines unas transformación de escala en el eje de la Y
•
scaleZ(z)
Defines unas transformación de escala en el eje de la Z
•
rotate3d(x,y,z,angle)
•
rotateX(angle)
Define una perspectiva de rotación en el eje de la X
•
rotateY(angle)
Define una perspectiva de rotación en el eje de la Y
•
rotateZ(angle)
Define una perspectiva de rotación en el eje de la Z
•
perspective(n)
Define una perspectiva de vista para las transformaciones 3D
Define una rotación 3D
TRANSICIONES DE CSS3 Con CSS3, podemos agregar un efecto al cambiar de un estilo a otro, sin el uso de animaciones Flash o archivos JavaScript. Transiciones CSS3 son efectos que permiten un elemento cambia gradualmente de un estilo a otro. Para ello, debe especificar dos cosas: la propiedad CSS que desea agregar un efecto y la duración del efecto div{ -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; }
Nota: Si no se especifica la parte de la duración, la transición no tendrá ningún efecto, ya que el valor por defecto es 0. 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 pasa el ratón sobre un elemento y se activará mediante hover: Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-12
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
div:hover { width:300px; }
Nota: Cuando el cursor del ratón sobre el elemento, cambia gradualmente a su estilo original.
CAMBIOS MÚLTIPLES Para agregar efectos de transición para más de una propiedad CSS, separe las propiedades con una coma: Añadir efectos de transición en anchura, altura, y la transformación: div{ -webkit-transition: width 2s, height 2s,-webkit-transform 2s; 6.0 */ transition: width 2s, height 2s, transform 2s; }
/* For Safari 3.1 to
El ejemplo siguiente utiliza las cuatro propiedades de transición div { /* For Safari 3.1 to 6.0 */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Standard syntax */ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; }
Pruebe usted mismo » Los mismos efectos de transición como el ejemplo anterior. Sin embargo, aquí estamos utilizando la propiedad transición abreviada: Ejemplo
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-13
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS div { -webkit-transition:width 1s linear 2s; /* For Safari 3.1 to 6.0 */ transition: width 1s linear 2s; }
Propiedades de Transición CSS3 Las propiedades de transición: •
transition A shorthand property for setting the four transition properties into a single property 3
•
transition-delay
•
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
•
transition-property Specifies the name of the CSS property the transition effect is for 3
•
transition-timing-function Specifies effectAnimaciones CSS3
•
Con CSS3, podemos crear animaciones que pueden sustituir a las animaciones Flash, imágenes animadas y archivos JavaScript en páginas web existentes.
Specifies when the transition effect will start 3
the
speed
curve
of
the
transition
•
ANIMACIONES CON CSS3 Con CSS3, podemos crear animaciones que pueden sustituir a las animaciones Flash, imágenes animadas y archivos JavaScript en páginas web existentes.
LA REGLA @ KEYFRAMES
EN
CSS3
La regla @ keyframes (fotogramas clave) es donde se crea la animación. Especifique un estilo CSS dentro de la regla @ keyframes y la animación cambiará gradualmente del estilo actual al nuevo estilo.
ANIMACIÓN CSS3 Cuando se crea una animación en la regla @keyframes, debe enlazar a un selector, de lo contrario la animación no tendrá ningún efecto. Tenemos que enlazar
la animación a un selector (elemento), especificando por lo
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-14
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
menos estas dos propiedades: •
el nombre de la animación
•
la duración de la animación
Enlazamos la animacion "miAnimación" a para el elemento div con una duración de animación de 5 segundos: div { animation: miAnimacion 5s; }
La regla @keyframe sería /* Sintaxis estandar*/ @keyframes miAnimacion{ from {background: red;} to {background: yellow;} }
Aunque para que lo soporten otros navegadores se suele duplicar añadiendo prefijos /* Chrome, Safari, Opera */ @-webkit-keyframes miAnimacion { from {background: red;} to {background: yellow;} }
Nota: Si no se especifica la parte de la duración, la animación no tendrá ningún efecto, ya que el valor por defecto es 0. Efectos múltiples Usted puede cambiar tantas propiedades como deseemos y durante los pasos que deseemos Se puede especificar cuando el cambio se producirá en tanto por ciento, o puede utilizar las palabras clave "from" y "to" (que representa el 0% y el 100%). Mediante porcentajes podemos realizar todos los keframes que queramos. 0% representa el inicio de la animación, 100% es cuando la animación es completa. Por ejemplo cambiamos el color de fondo cuando la animación es 25%, y 50%, y de nuevo cuando la animación es 100% completa. Veamoslo con la sintaxis standar:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-15
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS /* Sintaxis standard */ @keyframes mianimacion { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
Una vez creada la animación la aplicamos a un elemento elemento a animar{ animation: miAnimacion 5s; }
Cambiar el color de fondo y la posición cuando la animación es 25%, 50%, 75%, y de nuevo cuando la animación es 100% completa. Lo vemos con el prefijo webkit y luego con la notación standar: /* Chrome, Safari, Opera */ @-webkit-keyframes miAnimacion { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } /* Standard syntax */ @keyframes miAnimacion { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
Más ejemplos de animación El ejemplo siguiente utiliza siete de las propiedades de la animación ( 1. nombre, 2. duracion,-que junto a la primera son las dos más importantes-, Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-16
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
3. desarrollo de animación 4. retraso 5. repetición 6. alternancia 7. estado de inicio div{ /* Chrome, Safari, Opera */ -webkit-animation-name: miAnimacion; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Standard syntax */ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } El mismo efecto de animación como el ejemplo anterior (excepto la propiedad de estado de animación-play). Sin embargo, aquí estamos utilizando la propiedad de animación abreviada: Ejemplo div { -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */ Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-17
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */ } Propiedades Animación CSS3 La siguiente tabla muestra la regla @ fotogramas clave y todas las propiedades de la animación: •
@keyframes Especifica que será una animación en CSS3
•
animation es una forma shorthand de asignar una animación al selector exceptuando animation-play-state and the animation-fill-mode property 3
•
animation-delay
•
animation-direction reversible
•
animation-duration Especifica su duración en segundos o milisegundso
•
animation-fill-mode Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay") 3
•
animation-iteration-count Especifica el número de veces que queremos que se repita la animación
•
animation-name
•
animation-play-state 3
•
animation-timing-function
Especifica si habrá un retraso en el incio de la animación especifica la dirección de la animación y si será
Specifies the name of the @keyframes animation
3
Specifies whether the animation is running or paused Specifies the speed curve of the animation
,CSS3 VARIAS COLUMNAS CSS3 VARIAS COLUMNAS Con CSS3, puede crear varias columnas para trazar el texto - al igual que en los periódicos! En este capítulo usted aprenderá sobre los siguientes múltiples propiedades de la columna: •
column-count
•
columna-gap
•
columna en reglas
Soporte del navegador Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-18
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
Los números de la tabla especifica la primera versión del navegador que apoya plenamente la propiedad. Column-count La propiedad column-count especifica el número de columnas de un elemento se debe dividir en: Divide el texto en un elemento div en tres columnas: div { -webkit-column-count:3; /* Chrome, Safari, Opera */ -moz-column-count:3; /* Firefox */ column-count:3; }
Column-gap La propiedad de column-gap especifica el espacio entre las columnas: Ejemplo Especifique un espacio de 40 píxeles entre las columnas: div { -webkit-column-gap:40px; /* Chrome, Safari, Opera */ -moz-column-gap:40px; /* Firefox */ column-gap:40px; } Reglas de columnas CSS3 La propiedad de columna en reglas establece el ancho, estilo y color de la regla entre columnas.
Especifique el ancho, estilo y color de la regla entre columnas:
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-19
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS div { -webkit-column-rule:3px outset #ff00ff; /* Chrome, Safari, Opera */ -moz-column-rule:3px outset #ff00ff; /* Firefox */ column-rule:3px outset #ff00ff; }
CSS3 VARIAS COLUMNAS PROPIEDADES La siguiente tabla muestra todas las propiedades múltiples columnas: 1. column-count into 2. column-fill
Specifies the number of columns an element should be divided
Specifies how to fill columns
3. column-gap Specifies the gap between the columns 4. column-rule A shorthand property for setting all the column-rule-* properties 5. column-rule-color Specifies the color of the rule between columns 6. column-rule-style Specifies the style of the rule between columns 7. column-rule-width Specifies the width of the rule between columns 8. column-span Specifies how many columns an element should span across 9. column-width 10.columns
Specifies the width of the columns
A shorthand property for setting column-width and column-count
INTERFAZ DE USUARIO CSS3 En CSS3, algunas de las nuevas características de la interfaz de usuario está cambiando el tamaño los elementos, caja de tamaño, y la esquematización. En este capítulo usted aprenderá sobre las siguientes propiedades de la interfaz de usuario: •
resize
•
box-sizing
•
outline-offset
REDIMENSIONAR RESIZE En CSS3, la propiedad de cambio de tamaño especifica si un elemento debe ser de tamaño variable por el usuario. Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-20
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
Este elemento div es de tamaño variable por el usuario (en Firefox, Chrome y Safari). El código CSS es la siguiente: Especifica que un elemento div debe ser de tamaño variable por el usuario: div { resize:both; overflow:auto; }
BOX-SIZING La propiedad box-sizing permite definir ciertos elementos para adaptarse a una superficie de una manera determinada: Ejemplo Especifique lado dos cajas rodeadas de lado: div { -moz-box-sizing:border-box; /* Firefox */ box-sizing:border-box; width:50%; float:left; }
ESQUEMA CSS3 OFFSET La propiedad esquema de compensación compensa un esquema, y lo dibuja más allá del borde fronterizo. Contornos difieren de las fronteras de dos maneras: Los contornos no ocupan espacio Los contornos pueden ser no rectangulares Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-21
Certificado de Profesionalidad: Desarrollo de Aplicaciones con Tecnologías Web |FPTD/2013/045/096 -MF0491_3: Programación web en el entorno cliente UD 3: Estilos CSS
Este div tiene un 15px contorno exterior del borde fronterizo. El código CSS es la siguiente: Especifique un 15px contorno exterior del borde fronterizo: div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
PROPIEDADES CSS3 DE INTERFAZ DE USUARIO La siguiente tabla muestra todas las propiedades de interfaz de usuario: •
appearance Allows you to make an element look like a standard user interface element
•
box-sizing
•
icon Provides the author the ability to style an element with an iconic equivalent
•
nav-down key
Specifies where to navigate when using the arrow-down navigation
•
nav-index
Specifies the tabbing order for an element
•
nav-left
Specifies where to navigate when using the arrow-left navigation key
•
nav-right key
Specifies where to navigate when using the arrow-right navigation
•
nav-up
Specifies where to navigate when using the arrow-up navigation key
•
outline-offset
•
resize Specifies whether or not an element is resizable by the user
Allows you to define certain elements to fit an area in a certain way
Offsets an outline, and draws it beyond the border edge
Ajofrín, Marzo 2014 | Centro: Autoescuela Stylo | Formador: José Antonio Cano
-22