Lo Nuevo en Css3

2
LO NUEVO EN CSS3 CSS es un lenguaje utilizado para especificar el aspecto de una página web para diferentes dispositivos. CSS3 añade muchas capacidades nuevas a lo que se tenía con CSS2. Aunque aún está en proceso de estandarizado y le queda un largo camino por recorrer, ya se ha hecho un hueco al lado de HTML5 y supone uno de los mayores adelantos en el diseño web en la actualidad. La novedad más importante que aporta CSS 3, consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las web. Novedades de CSS3 Existen muchas novedades en css3, por ello solo se nombraran los mas representativos. Efectos de texto: CSS3 incorpora nuevas propiedades para crear diseños de texto más atractivos. Entre todas ellas destaca text-shadow, la cual, como su nombre indica, añade un efecto de sombra al texto. Su sintaxis es la siguiente: text-shadow: h v blur color; Las 2 primeras definen la posición de la sombra, mientras las últimas, la magnitud del blur y el color de la sombra. Bordes: Ahora podemos diseñar de manera sencilla bordes redondeados con la propiedad border-radius, bordes formados por imágenes con border-image, y sombras con box-shadow, entre otras opciones. Animaciones: También tenemos otra nueva función en CSS3 que permite conseguir resultados similares a las animaciones creadas con Flash. Se trata de la regla @keyframes, dentro de ella se encuentra el estilo css que define la animación. Además es necesario asignar un nombre que identifique al @keyframes, de este modo, se puede aplicar el efecto desde el objeto que queramos.

description

css3

Transcript of Lo Nuevo en Css3

LO NUEVO EN CSS3

CSS es un lenguaje utilizado para especificar el aspecto de una pgina web para diferentes dispositivos. CSS3 aade muchas capacidades nuevas a lo que se tena con CSS2. Aunque an est en proceso de estandarizado y le queda un largo camino por recorrer, ya se ha hecho un hueco al lado de HTML5 y supone uno de los mayores adelantos en el diseo web en la actualidad.La novedad ms importante que aporta CSS 3, consiste en la incorporacin de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las pginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el cdigo de las web.

Novedades de CSS3

Existen muchas novedades en css3, por ello solo se nombraran los mas representativos.

Efectos de texto: CSS3 incorpora nuevas propiedades para crear diseos de texto ms atractivos. Entre todas ellas destaca text-shadow, la cual, como su nombre indica, aade un efecto de sombra al texto. Su sintaxis es la siguiente: text-shadow: h v blur color; Las 2 primeras definen la posicin de la sombra, mientras las ltimas, la magnitud del blur y el color de la sombra.

Bordes: Ahora podemos disear de manera sencilla bordes redondeados con la propiedad border-radius, bordes formados por imgenes con border-image, y sombras con box-shadow, entre otras opciones.Animaciones: Tambin tenemos otra nueva funcin en CSS3 que permite conseguir resultados similares a las animaciones creadas con Flash. Se trata de la regla @keyframes, dentro de ella se encuentra el estilo css que define la animacin. Adems es necesario asignar un nombre que identifique al @keyframes, de este modo, se puede aplicar el efecto desde el objeto que queramos.

Transformaciones 2D / 3D: Las transformaciones en css3 ofrecen la posibilidad de cambiar el tamao y posicin de una figura con la utilizacin de diversos mtodos y la propiedad transform. Algunos de los mtodos principales son; rotate(), scale() y matrix() para transformaciones 2D; y rotate3d(), matrix3d() y translate3d() para efectos 3D.

Transiciones: Este tipo de efectos permiten cambiar el estilo de un objeto de manera progresiva. Para ello se utiliza el elemento transition, al cual le asignamos las propiedades que deseamos cambiar y el tiempo de la transicin en segundos. Por ejemplo, para cambiar la altura de un elemento en 5 segundos: transition: height 5s;

CSS3 media queries, permite a diseadores y desarrolladores crear estilos que se adapten a dimensiones especficas de pantalla. Al utilizar media queries, un simple documento HTML puede tener varias presentaciones dentro de un rango de pantallas o dispositivos. Un diseador o un desarrollador puede crear estilos que se apliquen selectivamente basados en las dimensiones de una pantalla donde se despliegue el contenido. Por esta razn, se pueden aplicar diferentes layouts basados en interfaces de tabletas, interfaces de dispositivos mviles e interfaces de escritorio de un mismo documento HTML.