Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (I)

Novedades en CSS 3

imagen css3
Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 50

Visitas el mes pasado: 227

El lenguaje CSS

Como ya debe saber todo aquel que tenga conocimientos sobre como construir páginas web, CSS es imprescindible, junto con HTML o XHTML, para crear cualquier página web. Mientras que con HTML o XHTML definimos el contenido de la página, Con CSS definimos el aspecto o estilo.

Si esto te coge de nuevo y quieres saber cómo construir páginas web, recomendamos empezar por el manual de HTML donde se muestra cómo funcionan estos lenguajes empezando desde el principio.

Pero supongo que si has abierto esta página es porque ya conoces CSS en su version actual (CSS2), y sabes ya cómo aplicarlo a la construcción de páginas. Sin duda CSS2 es de gran ayuda para estructurar la página y dar estilo a todos sus componentes, sin embargo las nuevas tendencias y nuevos diseños de páginas hacen que este lenguaje tenga dificultades para poder realizar algunos diseños, debiendo los diseñadores acudir a algunos trucos para poder crear su página.


Qué es CSS3

CSS3 es la nueva versión del lenguaje CSS, el cual en realidad es una ampliación de CSS2, en la cual tiene en cuenta algunas de estas nuevas tendencias que son demandadas por los diseñadores. Por tanto CSS3 conserva la misma forma de trabajar (selectores y propiedades) que CSS2; todo lo que hay en CSS2 pasa a CSS3 y además añade más código para poder realizar algunas funciones nuevas.

Como se supone que ya debemos conocer CSS2, nos centraremos en este manual en las novedades que trae CSS3, algunas de las cuales nos pueden ser bastante útiles para hacer un diseño más moderno.


Compatibilidad con los navegadores

Desde que salió CSS3 los principales navegadores han ido adaptando sus nuevas versiones a CSS3. Hoy en día (marzo de 2014) todos los navegadores han compatibilizado ya sus nuevas versiones con CSS3, aunque puede que haya algunos aspectos que todavía falten por actualizar en algunos.


Novedades de CSS3

Las novedades que incorpora CSS3 prentenden que el diseñador tenga un mayor control sobre el diseño, dejando de recurrrir a trucos que normalmente complican el código. Para ello incorpora nuevas propiedades que permiten hacer algunas cosas que no podíamos con CSS2, estas son algunas:


Varias imágenes de fondo

CSS3 permite poner varias imágenes de fondo en un mismo elemento, sin tener que recurrir al truco de crear varios elementos superpuestos con una imagen cada uno. También incorpora nuevas propiedades para el fondo de los elementos.


Esquinas redondeadas

Una de las características más demandadas por los diseñadores es poder crear esquinas redondeadas sin tener que usar trucos o poner imágenes. CSS3 incorpora una nueva propiedad que permite redondear las esquinas de las áreas de la página.


Bordes con imágenes

Otra característica de CSS3 es poder poner imágenes en los bordes de los elementos. Podemos poner una imagen simple o repetida que se distribuye alrededor del elemento, ocupando todo el borde.


Sombras

La posibilidad de crear sombras en los elementos es otra característica de CSS3. Podemos poner una o varias sombras en un elemento. Además también podemos poner sombra a los textos.


Transparencias de color

Con CSS3 no sólo podemos poner elementos semitransparentes, sino que también podemos poner la transparencia en el color. Cada color y cada elemento puede adquirir un grado de transparencia que va desde el color sólido al transparente total.


Texto en varias columnas.

La posibilidad de poner el texto en varias columnas es un hecho con CSS3, el texto se distribuye en columnas sin necesidad de hacer más divisiones en la página.


Otras novedades en el texto

La posiblidad de partir las palabras con guiones, tal como ocurre en el texto de un libro es una posibilidad, que aunque todavía no adoptada por todos los navegadores está también en CSS3. Otra novedad es poder instalar el tipo de letra (fuente) que queremos que se vea en la propia página, de manera que aunque el usuario no la tenga instalada en su ordenador, éste la pueda ver.


Nuevo modelo de cajas flexibles

Además de los modelos de posicionamiento absoluto y relativo, y de cajas flotantes, aparece un nuevo modelo de estructurar los elementos: el modelo de cajas flexible. Éste todavía no está acabado de definir, pero algunos navegadores ya lo soportan de forma experimental.


Nuevos Selectores

En CSS3 también aparecen nuevos selectores, Estos selectores permiten seleccionar los elementos de una manera más específica, La mayoría de ellos indican la posición del elemento seleccionado respecto de su elemento padre.


Animaciones

Sin duda la gran novedad de CSS3 es la posibilidad de crear animaciones. Podemos crear animaciones para nuestras páginas con un resultado similar al que podemos tener con programas como "flash", y además sin necesidad de instalar plugins en el ordenador del usuario.

Las animaciones se crean enteramente desde CSS3. Es decir, no necesitamos saber javascript ni ningún otro lenguaje de programacion para crear animaciones, que con un poco de creatividad pueden resultar atractivas.

A esto dedicaremos otro manual, ya que una cosa es conseguir una animación simple, y otra ver las posibilidades que tienen las animaciones.


Ventajas e inconvenientes.

Las ventajas son obvias: CSS3 no elimina nada de lo que ya existía en CSS2, y además crea nuevas posibilidades para poder dar un aspecto más dinámico a la página. La sintaxis del lenguaje en sí no cambia, ya que se sigue basando en reglas compuestas de selectores y propiedades. Lo que hace es ampliarse, para dar cabida a nuevas tendencias de diseño que hay hoy en la web.

Como inconveniente tenemos que CSS3 se ha adelantado a las empresas, fundaciones, o entidades que diseñan los principales navegadores, de forma que primero sale la "idea" de una nueva estructura en CSS3 y después los diferentes navegadores en sus nuevas versiones tienen que introducirla en ella. Por lo tanto los navegadores tienen que adaptarse a las nuevas formas que se definen en CSS3.

Por suerte, parece que la mayoría de los navegadores están adoptando las nuevas formas que aparecen en CSS3, la mayoría de los principales navegadores en sus nuevas versiones se han adaptado para soportar gran parte del nuevo código que aparece en CSS3, sin embargo este es un problema temporal, ya que con el tiempo todos los navegadores tendrán que adaptarse para soportar CSS3.





En este manual mostraremos cómo aplicar a una página las novedades indicadas anterioremente. Empezamos por las novedades en las propiedades del fondo

Multiples imágenes de fondo.



Manual de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com