Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

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>

CSS3 I

Novedades en CSS 3

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 crearr 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 los cursos de HTML y CSS en Aprende Web 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

Sin embargo CSS3 está todavía en fase de experimientación o fase beta. CSS3 trae nuevas propiedades y selectores para hacer más fácil el diseño de la página. Sin embargo los navegadores en principio no están adaptados para reconocer el nuevo código. Estos deben adaptarse en sus nuevas versiones e incorporarlo para hacer que funcione.

Desde que salió CSS3 los principales navegadores han ido adaptando sus nuevas versiones a CSS3. Hoy en día (octubre 2011) todos los navegadores, salvo Internet Explorer, han compatibilizado ya sus nuevas versiones con CSS3. Se cree que Internet Explorer lo compatibilizará en su nueva versión (Internet Explorer 9); por lo que CSS3 será en un futuro no muy lejano el estándar de CSS.

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 van a adoptar en el futuro 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 CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo