21
Css3 responsivo

Css3 responsivo

  • Upload
    eiysc

  • View
    128

  • Download
    1

Embed Size (px)

Citation preview

Css3

re

spon

sivo

CSS3 es el último estándar de CSS. CSS3 es compatible hacia atrás completamente con las

versiones anteriores de CSS.

MÓDULOS C

SS3

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

CSS3 F

RONTERA

S

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-shadowEn CSS3, la propiedad box-shadow se utiliza para añadir sombra a las cajas:

FONDOS C

SS3

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 propiedadLa 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.

CSS3 G

RADIEN

TS

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)

CSS3 T

EXT E

FFECTS

propiedades de texto: text-shadow word-wrap

CSS3 W

EB FO

NTS

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.

CSS3 T

RANSFORMS

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.

CSS3 T

RANSF

ORMAC

I 2D

ONES

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 3

D TRANSFO

RMS

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

CSS3 T

RANSIT

IONS

 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

CSS3 A

NIMATIONS

Animaciones CSS3 pueden reemplazar animaciones creadas por Flash y JavaScript en las páginas web existentes.

CSS3 M

ULTIPLE

COLUMNS

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

CSS3 I

NTERFAZ DE U

SUARIO

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