 CSS3 es el último estándar de CSS.
 CSS3 es compatible hacia atrás completamente con las versiones anteriores de
CSS.
 CSS3 se ha dividido en "módulos". Contiene la "especificación CSS
viejo" (que ha sido dividido en partes más pequeñas). Además, se
añaden nuevos módulos.
 Algunos de los módulos CSS3 más importantes son:
 Selectores
 Modelo de caja
 Fondos y Fronteras
 Los valores de imagen y contenido Sustituido
 Efectos de texto
 / Transformaciones 3D 2D
 Animaciones
 Disposición de columnas múltiple
 Interfaz de usuario
 Con CSS3, puede crear bordes redondeados, añadir sombra a las cajas, y usar
una imagen como una frontera - sin necesidad de utilizar un programa de diseño,
como Photoshop.
 Propiedades de la frontera:
 la frontera de radio
 box-shadow
 border-image
CSS3 La propiedad box-shadow
En CSS3, la propiedad box-shadow se utiliza para
añadir sombra a las cajas:
 CSS3 contiene varias nuevas propiedades de fondo,
que permiten un mayor control del elemento de fondo.
 propiedades de fondo:
 fondo de tamaño
 fondo-origen
CSS3 El fondo-origen de la propiedad
La propiedad background-origen especifica el área de
posicionamiento de las imágenes de fondo.
La imagen de fondo se puede colocar dentro del contenido de la
caja, el relleno de la caja, o zona fronteriza caja.
 Gradientes CSS3 permiten mostrar transiciones suaves entre dos o más colores
especificados.
 Anteriormente, se tenía que utilizar imágenes para estos efectos. Sin embargo,
mediante el uso de gradientes CSS3 puede reducir el tiempo de descarga y el uso
de ancho de banda. Además, los elementos con gradientes se ven mejor cuando
se hace zoom, ya que el gradiente es generado por el navegador.
 CSS3 define dos tipos de gradientes:
 Degradados lineales (va hacia abajo / arriba / izquierda / derecha / diagonal)
 Gradientes radiales (definido por su centro)
 propiedades de texto:
 text-shadow
 word-wrap
 Fuentes Web permiten a los diseñadores web para utilizar fuentes que
no están instaladas en el ordenador del usuario.
 Cuando haya encontrado / comprado la 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.
 Sus fuentes "propias" se definen en la regla CSS3 @ font-face.
Diferentes formatos de fuente
 Fuentes TrueType (TTF)
 TrueType es una fuente estándar desarrollado a finales de 1980, por Apple y
Microsoft. TrueType es el formato de la fuente más común para los sistemas operativos Mac
OS y 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
comúnmente utilizados 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.
 La Web Open Font Format (WOFF 2.0)
 TrueType fuente / OpenType que ofrece mejor compresión que WOFF 1.0.
 SVG Fuentes / Formas
 Fuentes SVG permiten SVG para ser utilizado como glifos Cuando aparezca el texto. La
especificación SVG 1.1 definir 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.
 Con CSS3 transformamos, nos podemos mover, escalar, girar, girar y estirar
elementos.
 Una transformación es un efecto que permite que un elemento de cambio de
forma, tamaño y posición.
 Puede transformar sus elementos mediante la transformación 2D o 3D.
 translate (): El elemento se mueve desde su posición actual, en función
de los parámetros dados para la izquierda (eje X) y la parte superior
(eje Y) Posición:
 rotar (): El elemento gira en sentido horario en un grado dado. Los
valores negativos se permiten y gira el elemento en sentido antihorario.
 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)
 skew ():el elemento se convierte en un ángulo dado, en función de los parámetros
dados para la (eje X) horizontal y las líneas (eje Y) vertical:
 matriz (): Combina la totalidad de la transformación 2D métodos en uno.
 El método de la matriz tomar seis parámetros, que contiene funciones
matemáticas, que le permite: rotar, escalar, mover (traducir), y el sesgado
elementos.
 CSS3 permite dar formato a sus elementos usando transformaciones 3D.
 En este capítulo usted aprenderá acerca de algunos de los métodos de
transformar 3D:
 rotateX (): el elemento gira alrededor de su eje X en un grado dado.
 rotateY (): el elemento gira alrededor de su eje y en un grado dado.
http://www.w3schools.com/css/css3_3dtransforms.asp
CSS3 Transformar Propiedades
Transformación 3D Métodos
 Son efectos que dejan un elemento cambia gradualmente de un estilo a otro.
 Con CSS3, podemos añadir un efecto al pasar de un estilo a otro, sin el uso de
Flash o JavaScript.
 Pase el ratón sobre el elemento a continuación:
Propiedades de transición CSS3
 Animaciones CSS3 pueden reemplazar animaciones creadas por Flash
y JavaScript en las páginas web existentes.
 Con CSS3, puede crear varias columnas para el tendido de texto - como 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
 En CSS3, algunas de las nuevas características de la interfaz de usuario a
cambiar el tamaño elementos, caja de medición y esquematización.
 propiedades de la interfaz de usuario:
 cambiar el tamaño
 cuadro de dimensionamiento
 esbozar-offset
 http://www.w3schools.com/css/css3_gradients.asp

Css3 responsive

  • 2.
     CSS3 esel último estándar de CSS.  CSS3 es compatible hacia atrás completamente con las versiones anteriores de CSS.
  • 3.
     CSS3 seha dividido en "módulos". Contiene la "especificación CSS viejo" (que ha sido dividido en partes más pequeñas). Además, se añaden nuevos módulos.  Algunos de los módulos CSS3 más importantes son:  Selectores  Modelo de caja  Fondos y Fronteras  Los valores de imagen y contenido Sustituido  Efectos de texto  / Transformaciones 3D 2D  Animaciones  Disposición de columnas múltiple  Interfaz de usuario
  • 4.
     Con CSS3,puede crear bordes redondeados, añadir sombra a las cajas, y usar una imagen como una frontera - sin necesidad de utilizar un programa de diseño, como Photoshop.  Propiedades de la frontera:  la frontera de radio  box-shadow  border-image CSS3 La propiedad box-shadow En CSS3, la propiedad box-shadow se utiliza para añadir sombra a las cajas:
  • 5.
     CSS3 contienevarias nuevas propiedades de fondo, que permiten un mayor control del elemento de fondo.  propiedades de fondo:  fondo de tamaño  fondo-origen CSS3 El fondo-origen de la propiedad La propiedad background-origen especifica el área de posicionamiento de las imágenes de fondo. La imagen de fondo se puede colocar dentro del contenido de la caja, el relleno de la caja, o zona fronteriza caja.
  • 6.
     Gradientes CSS3permiten mostrar transiciones suaves entre dos o más colores especificados.  Anteriormente, se tenía que utilizar imágenes para estos efectos. Sin embargo, mediante el uso de gradientes CSS3 puede reducir el tiempo de descarga y el uso de ancho de banda. Además, los elementos con gradientes se ven mejor cuando se hace zoom, ya que el gradiente es generado por el navegador.  CSS3 define dos tipos de gradientes:  Degradados lineales (va hacia abajo / arriba / izquierda / derecha / diagonal)  Gradientes radiales (definido por su centro)
  • 7.
     propiedades detexto:  text-shadow  word-wrap
  • 8.
     Fuentes Webpermiten a los diseñadores web para utilizar fuentes que no están instaladas en el ordenador del usuario.  Cuando haya encontrado / comprado la 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.  Sus fuentes "propias" se definen en la regla CSS3 @ font-face.
  • 9.
    Diferentes formatos defuente  Fuentes TrueType (TTF)  TrueType es una fuente estándar desarrollado a finales de 1980, por Apple y Microsoft. TrueType es el formato de la fuente más común para los sistemas operativos Mac OS y 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 comúnmente utilizados 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.  La Web Open Font Format (WOFF 2.0)  TrueType fuente / OpenType que ofrece mejor compresión que WOFF 1.0.  SVG Fuentes / Formas  Fuentes SVG permiten SVG para ser utilizado como glifos Cuando aparezca el texto. La especificación SVG 1.1 definir 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.
  • 10.
     Con CSS3transformamos, nos podemos mover, escalar, girar, girar y estirar elementos.  Una transformación es un efecto que permite que un elemento de cambio de forma, tamaño y posición.  Puede transformar sus elementos mediante la transformación 2D o 3D.
  • 11.
     translate ():El elemento se mueve desde su posición actual, en función de los parámetros dados para la izquierda (eje X) y la parte superior (eje Y) Posición:  rotar (): El elemento gira en sentido horario en un grado dado. Los valores negativos se permiten y gira el elemento en sentido antihorario.  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)
  • 12.
     skew ():elelemento se convierte en un ángulo dado, en función de los parámetros dados para la (eje X) horizontal y las líneas (eje Y) vertical:  matriz (): Combina la totalidad de la transformación 2D métodos en uno.  El método de la matriz tomar seis parámetros, que contiene funciones matemáticas, que le permite: rotar, escalar, mover (traducir), y el sesgado elementos.
  • 13.
     CSS3 permitedar formato a sus elementos usando transformaciones 3D.  En este capítulo usted aprenderá acerca de algunos de los métodos de transformar 3D:  rotateX (): el elemento gira alrededor de su eje X en un grado dado.  rotateY (): el elemento gira alrededor de su eje y en un grado dado. http://www.w3schools.com/css/css3_3dtransforms.asp
  • 14.
  • 15.
  • 16.
     Son efectosque dejan un elemento cambia gradualmente de un estilo a otro.  Con CSS3, podemos añadir un efecto al pasar de un estilo a otro, sin el uso de Flash o JavaScript.  Pase el ratón sobre el elemento a continuación:
  • 17.
  • 18.
     Animaciones CSS3pueden reemplazar animaciones creadas por Flash y JavaScript en las páginas web existentes.
  • 19.
     Con CSS3,puede crear varias columnas para el tendido de texto - como 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
  • 20.
     En CSS3,algunas de las nuevas características de la interfaz de usuario a cambiar el tamaño elementos, caja de medición y esquematización.  propiedades de la interfaz de usuario:  cambiar el tamaño  cuadro de dimensionamiento  esbozar-offset
  • 21.