comparte el articulo 

Tips de maquetación web con CSS y CSS3

Actualizado el 21/11/2011 < > 4 Cometarios

Resumen: Vemos algunos consejos para maquetar webs hoy en día, intentando agilizar la forma de maquetar las páginas web por medio de las nuevas características de CSS3.

CSS, junto con HTML, es la herramienta básica para la maquetación de páginas web. Sus capacidades para manejar los elementos artísticos y de formato permiten hacer mejores diseño web de una manera simple y eficiente. Y con la llegada de CSS3 el campo de posibilidades se amplía aún más, haciendo la maquetación más flexible y optimizada, puesto que muchas veces nos ahorramos el uso de imágenes para efectos como degradados, sombras o bordes redondeados.

Tu habilidad para manejar con propiedad estas hojas de estilo en cascada puede crear la gran diferencia entre un sitio normal y uno con el toque experto de creatividad que atrae al visitante.

Desde que se creó CSS como la herramienta que iba a facilitar la tarea al diseñador, se sospechaba que su crecimiento no iba a tener límites. Es así que ya está vigente CSS3, con novedades que hacen todavía más accesible la presentación elegante y profesional de tus páginas. Prácticamente, no hay excusas. Todo depende de tu imaginación.

Usa modelos de calidad

Si navegas con frecuencia por los sitios que presentan las mejores páginas de la red, te encontrarás con diseños web sorprendentes.

Por supuesto que los contenidos suelen ser similares en medios equivalentes. Por ejemplo, las noticias del día son las mismas en una gran cantidad de páginas informativas. La diferencia radica en la forma de presentar esas noticias.

El balance de colores, la distribución de los bloques de información, la presencia de imágenes ilustrativas en cantidad y ubicación justas, equilibran el conjunto y lo transforman en un espacio que da placer a los sentidos.

Claro, detrás de todo esto están las hojas de estilo en cascada o CSS. Como diseñador web, es siempre bueno revisar en profundidad ese excelente material. Nada te impide analizar los detalles, los elementos que cada diseñador utilizó, reproducirlos en tus propios proyectos y ver los resultados.

De estos modelos de calidad puedes aprender mucho, combinar los efectos más interesantes y lograr así resultados propios, originales y de excelencia.

Diseño web con CSS: el clásico posicionamiento de capas

El conocimiento profundo de las hojas de estilo es elemental si deseas obtener los mejores resultados de tu diseño. Varios aspectos de CSS son fundamentales para lograrlo. Uno de ellos es el posicionamiento de las divisiones en la página.

La propiedad position te asiste en esta tarea:

#div-01 {position: static;}

Static es sólo necesaria para anular un posicionamiento anterior, ya que “static” equivale al flujo normal de los objetos sobre la página.

#div-01 {position: relative; top: 20; right: 20;}

Relative establece una posición relativa al elemento anterior y debe ir acompañada de palabras de ubicación, como top, bottom, right, left.

#div-01 {position: absolute; top: 0; left: 0;}

Absolute implica que el elemento se ubicará en la posición exacta indicada (en este ejemplo, en la esquina superior izquierda de la página).

#div-01 {float: left; width: 200px;}

La propiedad float desplaza al objeto hacia la derecha o la izquierda, según el parámetro elegido, con lo cual es el medio idóneo para crear columnas de información.

Se pueden realizar combinaciones de estas propiedades. Por ejemplo, una división con posición absoluta en la esquina superior izquierda, puede incluir dos divisiones internas “flotando” a izquierda y derecha.

Para ahondar todavía más en el tema del posicionamiento de objetos en la página, será necesario también diferenciar los objetos que conforman bloques de aquéllos que sólo pueden seguir la secuencia natural de la página.

Los únicos elementos que pueden adquirir la propiedad float, por ejemplo, son los que forman bloques (divisiones, imágenes, párrafos estructurados, listas). Es decir, los objetos que por defecto o porque se lo hayamos establecido, tengan la propiedad display:block.

Mejores diseños con  CSS3

El concepto original de CSS fue el de separar el contenido web de su apariencia. Esto fue conseguido con cierto éxito hasta el momento, aunque ciertos efectos requieren trucos o maniobras algo complicadas o confusas.

La llegada del último nivel de CSS, CSS3, trajo consigo una cantidad de mejoras que obvian tales trucos y los transforman en medios normales del CSS. Es necesario estudiar y aplicar estas flamantes utilidades a los nuevos diseños para obtener todo el provecho de la herramienta. Entre otras mejoras, CSS3 incorpora lo siguiente:

Manejo de Áreas Rectangulares:
Mediante simples instrucciones se pueden manejar características de los objetos rectangulares (boxes), tales como tipo y color del borde, sombras, bordes redondeados.

Multiplicidad de Imágenes en Fondos:
Ahora pueden ubicarse varias imágenes como fondo en un bloque (o en la página completa), en forma de capas, de tal forma que resulte en una combinación de imágenes. Esto se realiza muy fácilmente con la sentencia background-image, en la cual las diferentes ilustraciones se enumeran separadas por comas.

Otras mejoras de CSS3:
Existen algunas otras novedades para facilitar la maquetación, como efectos sobre el texto (en particular sombreado y manejo del texto excedente), colores y administración de opacidad y transparencia.

A través de la combinación de estas novedades más las herramientas tradicionales de CSS, los diseñadores web han conseguido formidables resultados y hasta ilustraciones de gran calidad y detalle sin utilizar imágenes. Hay que probarlo.

Publicado el 21/11/2011, última actualización 21/11/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

4 Cometarios

  1. jose fernandez segura

    gracias por compartir la informacion estuvo muy didactica, hasta luego…

    Domingo, 10 de junio 2012

  2. arnaldo

    Muy bueno tus tips Veronica me has aclarado unas dudillas que tenia muchas muchas muchas muchas muchas muchas muchas muchas muchas muchas muchas muchas GRACIAS!!!

    Jueves, 14 de marzo 2013

  3. santiago

    Muy buena la informacion en general y lo del css3 ni sabia eso muy bien explicado todo gracias

    Viernes, 17 de enero 2014

  4. Steven

    Muy buen aporte.

    Sábado, 27 de diciembre 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras