martes, 20 de abril de 2010

Taller de CSS

Aplicación de estilo avanzada a los enlaces

Vemos cómo asignar estilos a enlaces de la página de una manera potente, para hacer interesantes barras de navegación.

En este artículo vamos a ver cómo podríamos crear una barra de navegación bastante dinámica utilizando únicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegación que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratón por encima.

Podemos ver el resultado de nuestra barra pulsando este enlace, para tener una idea más exacta de lo que queremos conseguir.

Cómo poner estilo a los enlaces


Ya lo vimos en capítulos anteriores de nuestro manual de CSS, pero lo repetimos aquí. Se define el estilo de los enlaces asignando su apariencia en sus distintos estados:

  • Enlace no visitado. Se define con el atributo link.
  • Enlace visitado. Se define con el atributo visited.
  • Enlace activo (cuando se está pulsando). Se define con active.
  • Enlace con el reton encima. Se define con hover.

Esta definición se realiza en la cabecera de la página, entre las etiquetas <STYLE> Y </STYLE>, y es global a toda la página.

Un ejemplo de esto se puede ver en esta declaración de estilos:

<STYLE type="text/css">
    A:link {text-decoration:none;color:#0000cc;}
    A:visited {text-decoration:none;color:#ffcc33;}
    A:active {text-decoration:none;color:#ff0000;}
    A:hover {text-decoration:underline;color:#999999;}
</STYLE>

Cómo dar estilo a un enlace en concreto


Si queremos resaltar nuestra barra de navegación probablemente querramos colocarla en una tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como este, será necesario que los enlaces de la barra de navegación y los enlaces normales de la página tengan colores distintos, por estar situados sobre dos tipos de fondos distintos.

Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la cabecera de la página, con los estilos. Esto lo podemos conseguir de esta manera.

<a href="#" style="color:#ff0000">Mi enlace</a>

Hemos definido el color de un enlace de una manera específica, utilizando el atributo style, de modo que este enlace siempre tendrá el color indicado, independientemente de su estado.

Es un enlace amarillo, que quedaría muy bien resaltado sobre un fondo oscuro, como se puede ver en el ejemplo de barra de navegación siguiente.


En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por defecto.

Cómo utilizar las clases al aplicar estilo a los enlaces


También vimos en anteriores capítulos que el uso de clases puede ser muy útil a la hora de definir estilos especiales que podemos aplicar a las etiquetas que queramos. A la hora de trabajar con los enlaces también podemos aplicar las clases para definir distintos tipos de enlaces, que tienen distintos tipos de estilos.

A.clase1:visited {color:#ff0000;}
A.clase1:active {color:#ff0000;}
A.clase1:link {color:#ff0000}
A.clase1:hover {color:#00ff00}

La ventaja al utilizar las clases con los estilos de los enlaces es que podemos especificar un formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratón sobre él.

Por si no quedó claro, al especificar el estilo con el atributo style del enlace sólo podíamos decir que el enlace lo queremos en amarillo, y siempre lo tendremos en amarillo (sea visitado o no, activo, o estemos o no con el ratón encima). Con las clases definimos un nuevo tipo de enlace al que podemos dar distintos formatos dependiendo su estado.

Otras ventajas de utilizar las clases consisten en que escribimos una única vez los estilos y que podemos cambiar el color de todos los enlaces de la clase con cambiar la delaración.

A partir de lo que acabamos de aprender podemos crear el ejemplo de barra de navegación dinámica utilizando CSS que habíamos visto al principio del capítulo. El código sería el siguiente.

<html>
<head>
    <title>Ejemplo CSS para enlaces</title>
<style type="text/css">
    A:link {color:#0000cc;}
    A:visited {color:#0000cc;}
    A:active {color:#0000cc;}
    A:hover {color:#0000ff;}

    A.clase1:visited {color:#ffff00;}
    A.clase1:active {color:#ffff00;}
    A.clase1:link {color:#ffff00}
    A.clase1:hover {color:#00ff00}

    A.clase2:visited {font-size:12;color:#ffffff;}
    A.clase2:active {font-size:12;color:#ffffff;}
    A.clase2:link {font-size:12;color:#ffffff;}
    A.clase2:hover {font-size:12;color:#ffff33;}

    body {font-family:arial;font-size:11;font-weight:bold}
    td {font-family:arial;font-size:11;font-weight:bold}
</style>
</head>

<body>
<a href="#">Este enlace es normal</a>
<br>
<br>
<br>
<span style="font-weight:normal;font-size:10">
Los enlaces de esta barra son especiales,
<br>
están definidos por clases
</span>
<br>
<table width="110" cellspacing="1" cellpadding="2" border="0">
<tr>
    <td bgcolor="#aa0000"><a href="#" class="clase2">Opciones 1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Enlace clase1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Otro de clase1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Más enlaces</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Todavía más</a></td>
</tr>
</table>

</body>
</html>

Se puede ver la página en funcionamiento en este enlace. Esperamos que sirva de provecho este pequeño taller de CSS para vuestras creaciones.

Quiero agradecer la ayuda prestada para la elaboración de este artículo a Rafael Chacón, que nos mandó un generoso mail con el truquillo que hemos expuesto aquí.

Cómo evitar que una página se imprima

Veamos un pequeño truco con hojas de estilos para evitar que se pueda imprimir una página web con el botón de imprimir de nuestro navegador.

Para ello, hay que echar mano de las hojas de estilo. Tanto si el documento tiene una hoja ya asociada como sino, lo que vamos a hacer es asociarle un nueva hoja de estilos. Dicha hoja contendrá un único estilo, con el código necesario para ocultar un elemento:

.nover{
visibility:hidden
}

A la hora de asociar la hoja de estilos, se le añade un modificador a la etiqueta HTML que enlaza con el fichero .css que permite especificar para qué tipo de medio se aplicará esta hoja. En nuestro caso, se aplica en el ámbito de la impresión, por lo que se utiliza el atributo media="print".

<link href="nombre_hoja" rel="stylesheet" type="text/css" media="print">

Una vez hecho esto, basta que toda nuestra página este dentro de un elemento div, que pertenezca a la clase nover.

<body>
<div class="nover">

-- Contenido --


</div>
</body>

Al hacer esto se provoca que en pantalla se visualice la página, pero que si por el contrario se decide imprimir, se le aplicará la hoja de estilos de impresión, en la que el elemento esta puesto como no visible, por lo que no se imprimirá.

Codigo Completo:


Veamos el código íntegro de la página web y la hoja de estilos asociada.

Página HTML



<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<div class="nover">

… contenido de la pagina

</div>
</body>
</html>

Hoja estilos: estilos.css


.nover{
visibility:hidden
}

Nota: Esta catacterística de las hojas de estilos funciona con éxito en navegadores IExplorer 6, Netscape 7 y Opera 7. No la hemos probado en otras versiones.


Se puede ver el ejemplo relatado en el artículo en una página a parte.

Títulos para tablas decorados con CSS

Creación y aplicación de estilos con CSS para realizar tablas con una decoración vistosa pero fácil de aplicar.

CSS son Hojas de Estilo en Cascada. Muchos de vosotros debéis conocerlas ya y supongo que las habréis utilizado en más de una ocasión. En cualquier caso, tanto para aprender lo que son como para afianzar los conocimientos, podéis acceder al Manual de CSS de DesarrolloWeb.com.

Vamos a ver un uso de las CSS que puede ser muy interesante para hacer tablas con títulos que tengan un cierto estilo. Lo bueno de las CSS es que podemos definir el estilo una vez y se puede utilzar en múltiples elementos de la página. Con todo ello vamos a tratar en este artículo: la definición de un estilo y la aplicación para hacer distintos tipos de decoración de tablas.

Podemos ver el resultado final que vamos a obtener.

Definición de los estilos


En la cabecera de la página colocamos la etiqueta <style> que sirve para definir los estilos a utilizar en la página. Vamos a definir un estilo por defecto para las celdas (etiqueta <td>) y un par de clases, la primera para las tablas y la segunda para las celdas titular (las que tienen color de fondo).

<style type="text/css">
td {
    font-family:verdana,arial;
    font-size:8pt;
}
.estilotabla{
    background-color:ffffff;
    border-style:solid;
    border-color:666666;
    border-width:1px;
}
.estilocelda{
    background-color:ddeeff;
    color:333333;
    font-weight:bold;
    font-size:10pt;
}
</style>

Los atributos de estilos se pueden conocer en el manual de CSS. En este caso, para la clase estilotabla estamos definiendo un color de fondo, un borde sólido, un color del borde y un ancho del borde, por ese orden. Para la clase estilocelda estamos definiendo un color de fondo, un color del texto, un grosor de la fuente y un tamaño de la fuente.

Utilización de los estilos para obtener una tabla decorada


Veamos el código de la primera tabla del ejemplo.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla">
<tr><td class="estilocelda">Título de sección</td></tr>
<tr><td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título.</td></tr>
</table>

Lo único que tiene de especial es que utiliza las clases que se han definido previamente. En la etiqueta <table> se utiliza la clase estilotabla y en la etiqueta <td> que queremos que sea el titular se utiliza la clase estilocelda. La otra celda tendrá el estilo definido para todas las celdas en general.

La otra tabla tendría este código.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla">
<tr><td class="estilocelda">Título de sección</td></tr>
</table>
<table width="280" cellpadding="2" cellspacing="2"><tr><td>
Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título.
</td></tr></table>

En este caso utilizamos dos tablas para hacer el efecto. La tabla de arriba tiene un borde y la de abajo no. Para ello aplicamos la clase definida para la tabla y la celda solamente en la tabla de arriba, así el borde definido en la declaración de estilos sólo afecta a la tabla de arriba.

Podemos ver el resultado en una página aparte.

Bordes punteados con CSS

Para dar efectos distintos a elementos estructurados, como las tablas, podemos recurrir a las clases, parte integrante de las hojas de estilo (CSS).

Vamos a ver otra manera de utilizar las CSS (Hojas de Estilo en Cascada) para crear un estilo que podemos utilizar en tablas HTML. Es un estilo para realizar los bordes de tablas con líneas punteadas, lo que resulta bastante original, aunque nuestro consejo es no abusar de ello.

El efecto buscado es el siguiente:

 


 

Nota: Para ver correctamente este efecto es necesario disponer de Internet Explorer versión 6. En Mozilla también se pueden ver los bordes punteados, pero el punto es mucho más fino, por lo que el efecto queda más discreto.


Para conseguirlo simplemente tenemos que utilizar la propiedad de CSS "border-style", asignando el valor "dotted", que quiere decir punteado en inglés. Además, podemos definir otros valores al estilo de borde punteado, como puede ser el color del borde o el color de fondo de la tabla.

Para este ejercicio práctico hemos definido una clase que aplicaremos a las tablas u otros elementos que deseemos que tengan el borde punteado.

Nota: una clase es una declaración de estilo que podemos utilizar en cualquier elemento de una página. Para ello se incluye el atributo class="nombre_clase" en la etiqueta HTML que deseamos que tenga dicho estilo. Podemos aprender más sobre clases y estilos CSS en el manual de Hojas de Estilo en Cascada. http://www.desarrolloweb.com/manuales/2



<style type="text/css">
.punteado{
  border-style: dotted;
   border-width: 1px;
   border-color: 660033;
   background-color: cc3366;
   font-family: verdana, arial;
   font-size: 10pt;
}
</style>

Esta clase tiene definidos una serie de atributos de estilos. Desde el primero hasta el último son: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamaño de la fuente. El atributo que nos interesa a nosotros es el primero, en el que se indica que se desea un tipo de borde punteado.

Para utilizar el estilo tenemos que asignar a un elemento de HTML la clase generada antes. Para ello utilizamos el atributo class de HTML. Tal como se ha definido la clase se puede utilizar en cualquier elemento de la página web, como una tabla o una celda.

<table class="punteado" width=80% align="center">
<tr>
  <td>
  <b>Esto es un texto</b>
   <br>
   Lo pongo para ver como queda. Me gustará seguro! y a vosotros también.
  </td>
</tr>
</table>

En este ejemplo, toda la tabla tendrá un efecto de borde punteado. Si colocásemos esa clase únicamente en una celda, sólo esa celda tendría el borde punteado. Es el caso del ejemplo siguiente:

<table width=300>
<tr>
  <td class="punteado"><b>Título de la tabla</b></td>
</tr>
<tr>
  <td>
   Aquí podríamos poner cualquier cosa. Sería como el cuerpo de la tabla que correspondiese con el titular que sí tendría algún estilo majete.
  </td>
</tr>
</table>

Estos dos ejemplos se pueden ver en una página aparte, que incluye también una tercera propuesta de uso del estilo de borde punteado.

No abusar del uso de los bordes punteados


Los bordes con líneas punteadas pueden ser muy útiles y vistosos, pero si nos pasamos en su utilización puede darse el caso que el efecto quede poco agradable.

El borde punteado llama la atención sobre el elemento que lo utiliza, aunque provoca una sensación de inestabilidad. También hace que parezca que no está terminado, o bien, no está integrado con el resto del diseño.

Estilos en campos de texto

Es posible aportar estilos y formatos a campos de texto de los formularios. En este capítulo veremos como hacerlo.

Vamos a ver unos ejemplos sobre cómo aplicar estilos avanzados a campos de texto en páginas web. Nos referimos a campos de texto de los normales <input type=text> y campos de texto que soportan varias líneas <textarea>.

Con estilos, como ya se ha debido aprender en el manual de CSS, podemos definir el formato de presentación de cualquier elemento de la página. Los campos de texto, que siempre tienen una forma muy específica, también aceptan especificaciones de estilos para variar su apariencia típica.

Vamos a ver varios ejemplos para comprobar las posibilidades de las hojas de estilos, aplicadas sobre campos de texto y textareas.

<input type="text" name="campotexto0" size="12" style="border-width: 2px; border-style: solid; font-size:8pt; color: #009900; letter-spacing : 3px;">

Principio del formulario



Este campo de texto se presentará con un borde de 2 pixels, un borde sólido, tamaño de la letra de 8 puntos, color del borde y de las letras verde un poco oscuro. También se define un espaciado entre las letras de 3 pixel.

<input type="text" name="campotexto1" size="12" style="background-color:e3e3e3; border: 1px solid #666666; font-size:8pt; color: #000099">



Este campo de texto tiene los estilos declarados con una sintaxis un poco distinta, ya que se han agrupado varios estilos relativos al borde en un solo atributo. Los estilos con los que se presentará son: color de fondo grisáceo, borde de 1 pixel, borde de estilo sólido, color del borde gris más oscuro, tamaño del texto de 8 puntos y color de las letras azul.

<textarea cols="20" rows="3" name="campotexto2" style="overflow:auto; border: 1px solid #ff6666;"></textarea>



Este campo de texto con varias líneas, también llamado textarea, tiene viarios estilos, que son parecidos a los que hemos visto para el anterior campo de texto, con la salvedad del atributo overflow, que está definido como auto. El atributo overflow tiene relación con las barras de desplazamiento que aparecen en los textarea. El valor auto sirve para que la barra de desplazamiento vertical del campo de texto sólo aparezca en caso que se necesite, es decir, si el texto del campo supera las líneas que tiene reservadas el textarea. Si queremos que no se vean las líneas nunca, podemos asignarle el valor hidden al atributo overflow. Por lo que respecta a los otros estilos de este campo de texto de múltiples líneas, se han definido 3 valores para el estilo del borde, en un único atributo. Los estilos son borde de un píxel, borde de estilo sólido y borde de color rojo pastel.

<textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto; border-style:dashed; border-color:555555; border-width: 1px;">

Hola a todos los que lean esto.
Espero que este ejemplo os parezca interesante!!
Saludos y suerte!
Miguel
</textarea>


Final del formulario

En este campo textarea, hemos incluido también un texto con el que se inicializará su contenido. Primero llamamos la atención sobre el atributo de HTML readonly, que sirve para que el campo textarea no sea editable, es decir, que no se pueda cambiar su contenido. También con estilos CSS se han definido una serie de valores para la apariencia, estos son: mostrar las barras de desplazamiento sólo cuando toca, un borde del campo punteado, un color del borde gris oscuro y un ancho del borde de 1 pixel.

Conclusión

Esperamos que con estas indicaciones podáis aprender un poco más sobre cómo modificar el estilo de un campo de texto, para adaptarlo mejor al diseño de vuestras páginas.

Hay que tener en cuenta que las características de estilos no siempre están disponibles en todos los navegadores. Las más importantes sí que las podremos ver en todos los navegadores que soporten estilos, aunque ciertos valores, como el borde punteado, no se pueden visualizar correctamente en navegadores antiguos. Pasa lo mismo con el atributo readonly, que no siempre ha estado disponible en HTML.


 

Maquetar una página con CSS

Tutorial para maquetar una página web utilizando CSS en lugar de tablas.

Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las definiciones del aspecto, que se guardarán en un archivo .css. El ejercicio lo realizaremos paso a paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica como Photoshop.

Referencia: Tenemos un manual para aprender CSS en DesarrolloWeb.com, donde además se explican las primeras nociones y conceptos que hay que conocer sobre la maquetación.


Imágenes de partida


Podemos ver la imagen que hemos creado y que vamos a intentar maquetar lo más parecido posible. No es el objetivo de este manual ofrecer las técnicas para realizar esta imagen, aunque en otros manuales de DesarrolloWeb.com podemos ver tutoriales para aprender algunos de los trucos de diseño utilizados.

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que trabajar.

De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el diseño. Sería interesante descargarlo para poder realizar el ejercicio por vuestra cuenta.

Para los impacientes, tenemos un enlace a la página resultado que vamos a conseguir realizar al final del artículo. Puede ser bueno verla para hacerse una idea de donde queremos llegar.

Desarrollo de la página y la hoja de estilos


Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las etiquetas y estilos que hemos utilizado para cada parte de la página.

Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilos externa.

<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>

El cuerpo de la página <body>


En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de fondo "fondo.gif", que se repetirá por toda la página en un mosaico. También se definen unos márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros navegadores se realiza en la capa principal con el atributo "margin" definido como "auto").

Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como el tipo de letra o el color del texto.

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

La capa contenedor


Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se colocan todos los elementos que va a tener la página.

<div id="contenedor">

</div>

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la alineación por defecto sea a izquierda). También definimos una anchura de 700px, un color de fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla y otros navegadores centren la capa.

#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en el diseño original. Se podría haber definido el atributo "border", pero eso nos repercute negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que se vea correctamente en todos los navegadores.

Este ejercicio lo vamos a ver en varios pasos. En el siguiente bloque mostraremos cómo se maqueta la cabecera y la barra de navegación.

Explicamos la creación de la cabecera de la página, que se simplificará al máximo para hacer el ejercicio más facil.

Continuamos el ejercicio práctico para realizar la maquetación de una página paso a paso con capas y hojas de estilo en cascada. Se puede ver el artículo anterior de esta serie en Maquetar una página con CSS.

La cabecera de la página


La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño márgen debajo de la imagen, que queremos evitar.

Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valores porque son los que se tomarían por defecto.

#cabecera{
height : 106px;
width: 700px;
}

La barra de navegación


Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la cabecera.

<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>

Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces tienen una clase, llamada "enlacenav", que utilizaremos para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la página.

Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.

#navegador{
background : #F5F4C3 url(images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}

Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón esté encima, cambiará de color.

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}

Podemos ver cómo queda el ejercicio realizado hasta el momento.

Realizamos la maquetación del área del cuerpo, donde se mostrará el contenido de la página.

Este ejercicio trata de maquetar una página utilizando capas y css. La primera parte se puede ver en: Maquetar una página con CSS.

El cuerpo de la página


La parte de la página donde colocamos la información principal. Crearemos una capa independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las etiquetas que colocamos dentro.

<div id="cuerpo">
<h1>Título de la página</h1>
<p>
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.
</p>
<p>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir...
</p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del sitio</a>
</div>
</div>
Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que lleguen al final del scroll vertical de la página.

Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo align=left en una imagen)

Para posibilitar la disposición en dos columnas que hemos definido en el diseño original, vamos a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.

#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}

También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del cuerpo:

H1{
font-size: 12pt;
}

Los encabezados de nivel 1, que tengan tamaño de letra 12pt.

#navabajo{
font-weight : bold;
}

Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegación.

Podemos ver el ejercicio tal como queda con los pasos realizados hasta el momento.

Creamos el lateral de la página, donde se muestran varios recuadros con un buscador y acceso a otras informaciones.

En los pasos anteriores de este taller vimos cómo crear la cabecera y cuerpo de la página. Ahora vamos a ver cómo hacer el lateral derecho de la página.

La capa lateral


En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras informaciones.

<div id="lateral">
... contenido lateral...
</div>

El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:

#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}

Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de otros elementos.

Además, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha. Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposición en 2 columnas.

Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML, compuesto por un titulo y un contenido de la caja:

<h2 class="titlat">Titulo de la caja</h2>
<div id="idunico" class="cuerpolateral">
Contenido de la caja
</div>

El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.

.titlat{
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}

.cuerpolateral{
padding: 5px 4px 13px 10px;
}

El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de línea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en la parte de abajo, que tendrá 8 pixel.

Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos márgenes internos.

Caja de buscar


Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.

Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el diseño del web.

<h2 class="titlat">Buscar</h2>
<div id="fbuscar" class="cuerpolateral">
<form>
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div>
<div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div>
</form>
</div>

Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los siguientes:

INPUT {
font-size : 8pt;
}

Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.

#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}

El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni abajo.

#campotexto{
float: left;
}

La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la izquerda.

#campotexto input{
width:100px;
}

El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.

#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}

La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo. Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda, más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de texto y la imagen de submitir.

#botonbuscar input{
border : 0px none;
}

Con esta última definición estamos indicando que la imagen de submitir (el <input type="image"> que hay dentro de la capa botonbuscar) no tenga borde.

.radio{
clear:both;
}

Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.

La caja de registro


En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.

<div id="registro" class="cuerpolateral">
<a href="#">Registrese con nosotros</a> y obtenga muchas ventajas.
</div>

Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de otras capas y con los que se han definido en las clases que se utilizan.

La caja de otras informaciones


Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones. Dentro de la caja colocaremos varios enlaces dentro de una lista.

<h2 class="titlat">Otras informaciones</h2>
<div id="otras" class="cuerpolateral">
<ul>
<li><a href="#">Quienes somos</a>
<li><a href="#">Nuestra misión</a>
<li><a href="#">Agenda de eventos</a>
</ul>
</div>

Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.

#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}

Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4 pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuación nosotros manualmente como fondo de los <li>.

#otras li{
padding-left: 14px;
background: transparent url("images/bullet.gif") 0 2px no-repeat;
margin-bottom: 10px;
}

Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño. También se define un margen en la parte inferior.

Después de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la página, el diseño queda tal como se puede ver en esta página.

Para acabar, vamos a crear un pie de página y un borde enmarque la página. Ofreceremos también unas conclusiones del ejercicio.

Apuntaremos los últimos retoques en el diseño de la página con CSS para finalizar el taller de maquetación con CSS. Se puede ver la primera parte del artículo.


Pie de la página


Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral "flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el container.

No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido hasta el momento en la plantilla en Firefox o Mozilla. Veremos que el fondo blanco no está continuado hacia abajo.

<div id="pie">
Pruebas de maquetación CSS © 2005 DesarrolloWeb.com
</div>

Esta capa tiene el siguiente estilo definido:

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}

Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral.

Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel.

El borde externo


El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para la capa contenedor el atributo border, de la siguiente manera.

#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}

En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional, aparte del que se haya asignado a la capa en si.

Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle solución sin tener que romperse la cabeza.

Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va a tener el estilo de borde definido.

<div id="borde">
<div id="contenedor">
.... contenido de toda la página
</div>
</div>

Para conseguir el borde se han definido el siguiente estilo para la capa borde.

#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}

Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen "auto" para que Mozilla y otros navegadores centren la capa.

El resultado final del ejercicio se puede ver en una página aparte. Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.

Conclusión


Hemos visto cómo maquetar una página utilizando CSS paso a paso. Esperamos que hayáis podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con CSS para la maquetación es una tarea fácil, pero también es muy sencillo encontrarnos con escollos o problemas misteriosos que no parecen tener respuesta.

Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox, Netscape, Opera y Explorer.

Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el diseño. En este caso habrán pocas cosas que cambiar, mientras que si diseñamos para Explorer y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque nada esté en su sitio.

La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se torna mucho más sencillo, potente y rápido de desarrollar.

Resultado final del ejercicio.

Variar el diseño y maquetación con la hoja de estilos

Continuamos el taller de maquetación con CSS. Creamos un diseño distinto, que aplicamos al ejemplo realizado anteriormente, cambiando solamente la hoja de estilos.

Hemos visto en una serie de artículos anteriores un ejemplo de cómo maquetar una página utilizando únicamente CSS para posicionar sus distintos elementos. Una de las principales ventajas de CSS es que se puede cambiar el aspecto de una página radicalmente, sin necesidad de cambiar su código HTML. Por ello, nos ha parecido interesante seguir profundizando en la maquetación de páginas web con CSS, ofreciendo una nueva propuesta de diseño para el mismo archivo HTML que habíamos utilizado anteriormente.

Para empezar, podemos echar un vistazo al diseño que hemos creado, utilizando un programa de edición gráfica tipo Photoshop o Fireworks. Vamos a trabajar sobre esta imagen, para que el diseño resultante sea lo más parecido posible.

También ofrecemos para descarga un archivo comprimido con todas las imágenes que vamos a utilizar en este diseño. Será interesante tenerlo a mano para tratar de hacer por nosotros mismos el ejemplo.

El mismo código HTML


Insistimos en la idea de que vamos a utilizar el mismo código HTML que hemos construido al hacer el ejemplo del artículo de maquetación CSS, dado que las hojas de estilo en cascada nos proporcionan herramientas para alterar el aspecto de la página sin editar siquiera el archivo HTML.

La anterior maquetación ya se hizo pensando en que se iba a utilizar para proponer más de un diseño, por lo que se añadió alguna etiqueta, clase o identificador adicional para facilitar este paso.

Aunque durante la creación de este segundo ejemplo hemos estado tentados de editar el código HTML, sólo hemos cambiado un aspecto que vamos a señalar a continuación.

Se trata de la imagen de la cabecera. Si nos fijamos en el archivo HTML anterior, comprobaremos que la imagen está incluida por medio de una etiqueta <img>. Al definirse la ruta de la imagen y sus valores de ancho y alto por medio de los atributos de <img>, no podemos cambiar esos datos con la hoja de estilos. Como deseamos cambiar la imagen en distintos diseños, en lugar de colocar la imagen con la etiqueta directamente en el código HTML, vamos a utilizar un truco que hemos aprendido en CSSZenGarden, que se basa en incluir un titular de texto, que luego vamos a sustituirlo por la imagen que deseemos. A su vez, hay que decir que este truco es original de Douglas Bowman http://www.stopdesign.com/articles/css/replace-text/.

Antes, habíamos definido el siguiente pedazo de código para situar la imagen de cabecera:

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Ahora, el código de la cabecera será el siguiente:

<div id="cabecera">
   <h1><span>La Primavera</span></h1>
</div>

Simplemente hemos definido un titular, que luego no aparecerá en la página, porque lo ocultaremos por medio de el atributo visibility de CSS. En su lugar, definiremos un fondo para la capa "cabecera" y asignaremos sus atributos por medio de hojas de estilo.

Así quedarán los estilos para el elemento cabecera y el encabezamiento <h1>:

#cabecera{
    background: transparent url(images/cabecera.jpg) no-repeat;
    height: 288px;
    width: 549px;
}

#cabecera h1 {
    margin: 0px 0px 0px 0px;
}
#cabecera h1 span {
    display:none;
}

El nuevo código CSS


Aparte de lo comentado para la cabecera, el código CSS creado para aplicar los estilos no aporta mucha novedad a lo que hemos visto hasta el momento.

Básicamente se ha utilizado nuevas imágenes para los fondos y hemos variado los tamaños y márgenes de las capas. Aparte, en la parte central o cuerpo de la página, se ha alineado de manera distinta los elementos, quedando los cuadrados del buscador y enlaces a otras secciones a la izquierda y el texto de la página a la derecha.

También se puede apreciar como se han utilizado unas imágenes para decorar el fondo de los titulares de los recuadros de la izquierda. También se ha colocado una imagen en el fondo donde está el texto de la página. Esta imagen está muy difuminada para permitir leer el texto con comodidad.

Vamos a dejar de lado, tal vez para próximos artículos, la explicación detallada de la declaración de estilos utilizada. En lugar de eso ponemos los enlaces hacia el archivo HTML y el CSS.

Página con el resultado final del ejercicio.

Declaración de hojas de estilo utilizada.

Taller de CSS, Opacity

Taller de CSS, Opacity

 


 


 


 


<img>


Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros.

En esta ocasión mostraré un efecto bastante simpático que podemos aplicar en capas, imágenes, formularios, etc…

La propiedad opacity funciona tanto en Internet Explorer como en Firefox:

IE:


filter: alpha(opacity=50)

Firefox:


opacity: .5

Mozilla:


-moz-opacity:0.5

El siguiente ejemplo funciona en los dos navegadores:

<style type="text/css">
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>

<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>

Ver ejemplo en marcha

Enlaces con estilos CSS que simulan botones

Hacer un botón con CSS sin utilizar formularios, simplemente con enlaces que se comportan visualmente como botones.

En este taller de CSS vamos a mostrar cómo realizar un enlace que tenga aspecto de botón. Dicho de otra manera, vamos a crear botones a partir de enlaces, aplicando una hoja de estilo que hará que los enlaces se muestren de forma similar a como serían los botones. Para ello, vamos a hacer que, al pasar el ratón por encima de un enlace, este parezca como que está pulsado.

Lo mejor para darse cuenta del objetivo de este taller es ver un ejemplo.


El código HTML


Vamos a partir básicamente de un enlace, al que asignaremos una clase definida con CSS. Como los estilos los vamos a aplicar con CSS, el enlace es tan sencillo como este:

<a href="#" class="enlaceboton">Hola!!</a>

El código CSS


Vamos a definir la clase "enlaceboton", que es el estilo que se ha asignado para el enlace. Como sabemos, los enlaces tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el estilo para cada estado.

.enlaceboton {    font-family: verdana, arial, sans-serif;
   font-size: 10pt;
   font-weight: bold;
   padding: 4px;
   background-color: #ffffcc;
   color: #666666;
   text-decoration: none;
}
.enlaceboton:link,
.enlaceboton:visited {
   border-top: 1px solid #cccccc;
   border-bottom: 2px solid #666666;
   border-left: 1px solid #cccccc;
   border-right: 2px solid #666666;
}
.enlaceboton:hover {
    border-bottom: 1px solid #cccccc;
   border-top: 2px solid #666666;
   border-right: 1px solid #cccccc;
   border-left: 2px solid #666666;
}

En principio, con la clase .enlaceboton se han definido estilos para cualquier estado del enlace. Después, para los diferentes estados del enlace se han definido sus correspondientes estilos, que son el mismo para los estados visitado y no visitado y diferentes para el estado hover, que es el que se aplica cuando está el ratón sobre el enlace.

Tan sencillo como esto. Si se desea, se puede ver el ejemplo en marcha.

Crear un menú dinámico con CSS

Código que nos ayuda a crear un menú con Css similar a los de Javascript.

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}
</style>

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div></div>
background-color de a.botonMenu : color de estado reposo (out).
background-color de a.botonMenu:hover : color de estado sobre (over).
background-color de a.botonMenu:active : color de estado seleccionado.

Ver ejemplo en marcha

Utilizar CSS para maquetar un boletín

Las ventajas de la maquetación CSS, con respecto a la maquetación tradicional por tablas, se pueden aplicar también a envíos de boletines en formato HTML.

La maquetación con CSS ofrece muchas ventajas para la accesibilidad de la página, carga en bytes y claridad del código. En este artículo vamos a contar cómo podemos aprovecharnos de esas ventajas también en los boletines de novedades enviados en formato HTML.

Para maquetar con CSS se utiliza una hoja de estilo en cascada, donde se especifica cualquier atributo de aspecto de la página, separando por completo el contenido y presentación. El contenido se define en el código HTML de la página y cualquier especificación del aspecto se incluye en un archivo externo CSS.

Referencia: Para saber más de CSS podemos consultar la sección CSS a fondo. También podemos consultar acerca de la maquetación CSS.


Un newsletter, como se ha comentado en nuestro manual de boletines de novedades, se puede enviar en formato HTML para dar vistosidad al correo. En esos casos, a la hora de crear el boletín se debe hacer una página web normal y luego se enviará como cuerpo del mensaje.

Como cualquier otra página web, la que creamos para hacer el boletín, puede realizarse utilizando CSS, lo que redundará en ventajas para el creador del boletín y suscriptor.

  • El peso del mensaje se podrá reducir, al no ser necesario incluir ninguna etiqueta HTML para definir los estilos. Esto nos ahorrará mucho código.

  • Podremos cambiar el aspecto del mensaje con sólo cambiar la hoja de estilos, sin necesidad de modificar el código HTML que venimos utilizando para hacer el envío. Esto nos ofrece una mayor capacidad de innovación en el envío del mensaje.
  • Si se pierde la hoja de estilos por cualquier razón o el sistema de correo del suscriptor no soporta CSS, simplemente verá el mensaje sin el aspecto definido por el creador del boletín. Pero por lo menos verá perfectamente el envío, con toda la información del mensaje, presentada con los estilos predeterminados del sistema del usuario.
  • En caso de que a un usuario no soporte formato HTML, podría darse el caso de que viese el código de la página (con las etiquetas y todo), en lugar de ver el formato web. En ese caso, por lo menos recibiría un código mucho más legible y comprensible por el suscriptor, que si estuviera mezclado con etiquetas HTML para definir los estilos.
  • A la hora de crear los distintos boletines cada vez, se ahorra tiempo, puesto que no hay que preocuparse por definir los estilos. Es decir, la modificación es mucho más sencilla.

Como todo en esta vida, maquetar un boletín con CSS, también tiene algunas desventajas.

  • La principal que veo es que hace falta tener mayores conocimientos para crear un boletín con CSS. Es decir, cualquier persona es capaz de hacer una página con HTML básico utilizando un editor de webs como Frontpage o Dreamweaver. Sin embargo, con CSS deberemos dominar una tecnología adicional y algún que otro programa para realizar el trabajo.
  • Otra desventaja es que algunos sistemas de correo no incluyen enlaces con archivos externos, ya sean imágenes o declaraciones CSS. Esto hace que no muestren los estilos del boletín, aunque por lo menos se mostrará la página básica sin los estilos. Una posibilidad para evitar esto es incluir los estilos dentro del propio código de la página, aunque entonces estaremos contaminando un poco el código limpio de nuestro boletín.

Ejemplo de boletín en formato HTML con CSS

Nosotros llevamos tiempo enviando en nuestra web MercadoProfesional.com un boletín semanal en formato HTML, que está maquetado por completo con CSS. Vamos a mostrar aquí su código HTML y el código CSS que utilizamos para definir los estilos.

Sería bueno ver el boletín en una página aparte, para hacernos una idea previa del contenido y estilo creados.

Código HTML

Podemos ver a continuación el código HTML de uno de nuestros boletines de novedades.

<html>
<head>
    <title>Boletín de novedades 25 .:MercadoProfesional.com:.</title>
   <link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>

<body>
<div id="container">
   <div id="cabecera">
    <div id = "titulo">
    <h1>Boletín de novedades<BR> MercadoProfesional.com</h1>
    </div>
    <div id="logo">
      <a href="http://www.mercadoprofesional.com/"><img src="http://www.mercadoprofesional.com/mail_boletin_novedades/imgs/logo.gif" width = "155px" height = "78px" border="0px" valign="top"></a>
     </div>
    </div>
    <div id="topCuerpo"></div>
    <div id="cuerpo">

      <div id="numBoletin"> Boletín de Novedades 25 # 18/05/2005 # </div>
    <div id="cuerpo1">
    <p>Saludos cordiales,
   </p>
   <p>

Te llega este correo por ser uno de los profesionales registrados en MercadoProfesional.com
Te informamos de las nuevas solicitudes que han llegado, para que no dejes pasar la oportunidad de enviar tus presupuestos. </p>

</div>
    <div id="cuerpoNov"><h2 class="icoTit"> Nuevos Proyectos: </h2>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/364.php"> Tienda Online</a></h3>
    <p class="par">Tienda online, muy bien definida, para venta de servicios de revelado online</p>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/366.php"> Desarrollo de portal inmobiliario</a></h3>
    <p class="par">Como su nombre indica, un portal inmobiliario, hacen especial hincapié en la funcionalidad.</p>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/368.php"> Desarrollo de portal</a></h3>
    <p class="par">Desarrollo y promoción de un portal, exactamente, no sabemos que temática quieren utilizar.</p>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/369.php"> Formulario de flash y PHP</a></h3>
    <p class="par">Breve desarrollo en php para una aplicación en flash, con opciones de seguir colaborando en el futuro.</p>
   </div>
   <p>Esta semana tenemos 4 proyectos nuevos.</p>
   <p>Simplemente despedirnos de todos vosotros y desearos suerte con los presupuestos.</p>
   <p>© Guiarte Multimedia S.L. - +34 915440837 - <a href ="mailto:info@mercadoprofesional.com">info@mercadoprofesional.com</a> -</p>
</div> <div id="pieCuerpo"></div>
</body>
</html>

Como este código no tiene ningún estilo definido a través de HTML, resulta bastante sencillo de interpretar.

Código CSS

Ahora podemos ver el código del archivo CSS que estamos utilizando para definir los estilos del documento. Seguramente alguno de los estilos definidos no lo estaremos utilizando en esta edición del boletín de novedades. No os estrañaros por eso. En general, no extrañarse si no está totalmente optimizada la declaración de estilos.

BODY {
    margin : 0 0 0 0px;
   background-color: #CCCCCC;
   font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align : center;
}

#cabecera {
    background-image: url(imgs/fondo_cab.gif);
    background-repeat : no-repeat;
    margin : 0 0 0 0px;
    background-position : right;
    padding : 0 0 0 0px;
    width : 500px;
    height: 96px;
}

#logo {
    padding : 7 20 11 20px;
}

#titulo {
    padding : 18 20 0 20px;
    float : right;
    margin-right: 24px;
}

#container {
    width : 500px;
    padding : 0 0 0 0px;
    margin : auto;
    text-align : left;
}

#topCuerpo {
    margin-bottom : 0px;
    margin-left : 0px;
    margin-right : 0px;
    margin-top : 5px;
    border-bottom : 1px solid #9b9b9b;
    width : 493px;
    float : right;
}

#cuerpo {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding : 10 10 10 10px;
    background-image : url(imgs/fondo_cuerpo.gif);
    margin : 0 0 0 6px;
    background-position : right;
    background-repeat : repeat-y;
    clear : both;
}

A:ACTIVE{
    color : #003366;
}

A:HOVER{
    color : #003366;
    text-decoration : none;
}

A:LINK{
    color : #003366;
}

A:VISITED {
    color : #003366;
}

#numBoletin {
    background-color : #e9e9e9;
    border : 1px solid #666666;
    width : 304px;
    float : right;
    padding : 6 0 6 10px;
}

#cuerpo1 {
    clear : both;
    padding-top: 10px;
}

#cuerpoNov {
    background-color : #d2e3fb;
    border : 1px solid #666666;
    padding : 5 10 10 5px;
}

#pieCuerpo {
    background-image : url(imgs/bajo_cuerpo.gif);
    height:9px;
    background-repeat : no-repeat;
    margin-left : 6px;
}

H1 {
    font-size : 16px;
    font-weight : bold;
    color : #003366;
    text-align : center;
}

H2 {
    font-size : 11px;
    font-weight : bold;
    color : #003366;
}

.icoTit{
    background-image : url(imgs/IcoTit.gif);
    background-repeat : no-repeat;
    padding-left:12px;
    margin-top:0px;
    background-position : left;
}

H3 {
   font-size: 10px;
   font-weight : bold;
   color : #003366;
}
.icoNovedad{
    background-image : url(imgs/IcoNovedad.gif);
    background-repeat : no-repeat;
    padding-left:10px;
    margin-left:3px;
    margin-top:0px;
    margin-bottom:2px;
    background-position : left;
}

.par{
    margin-top:2px;
    padding-left:10px;
    margin-left:3px;
}

.resaltado {
    background-color : #e9e9e9;
    border : 1px solid #666666;
    padding : 6 0 6 10px;
}

La declaración de estilos resulta bastante larga, pero como decíamos, se puede podría optimizar bastante todavía.

Podemos ver el boletín en una página aparte.


Conclusión

El paso más difícil para realizar este boletín es hacer la maquetación propiamente dicha en CSS. Pero siempre resulta interesante perder un poco de tiempo para mejorar nuestra manera de hacer las cosas.

Antes de acabar, queremos poner un enlace a una página para visualizar el boletín sin la definición de estilos asociada.
Así es como se vería el boletín si por cualquier cuestión el sistema del suscriptor no acepta CSS o no se llega a enlazar con la hoja de estilos por cualquier motivo. Se verá que el boletín queda bastante comprensible, aunque no tan vistoso.

Recuadro sencillo y elegante con CSS

Cómo hacer un recuadro atractivo pero muy fácil de hacer, utilizando CSS para aplicarle los estilos.

En muchas ocasiones, al maquetar una página web, se necesita recuadrar una información para remarcar su contenido, destacándolo de otros textos del documento.

Es básicamente lo que vamos a hacer en el ejercicio de esta ocasión. Se trata de un ejemplo muy sencillo, pero que sirve como continuación de otro artículo que hemos publicado en el taller de HTML. (ENLACE A http://www.desarrolloweb.com/articulos/2025.php) En dicho taller realizábamos los recuadros utilizando únicamente HTML, sin declaración de estilos, lo que no es muy adecuado debido a las tendencias actuales.

CSS es, en estos momentos, la tecnología más adecuada para definir los estilos de un documento. Lo que antes habíamos realizado con HTML se puede realizar con CSS obteniendo varias ventajas de la maquetación con Hojas de Estilo en Cascada.

Nota: Las ventajas y fundamentos de las Hojas de Estilo en Cascada (CSS) se pueden ver en el artículo Maquetar una web con CSS.


El ejercicio


Para empezar, sería bueno observar el objetivo de este ejercicio, para tener una idea exacta de lo que vamos a hacer.
El ejercicio dispone de tres recuadros con estilos distintos, aunque a pesar de ello tienen códigos muy similares. Para variar su aspecto, simplemente se cambia la declaración de estilos para cada uno.

La maquetación con estilos se realiza utilizando etiquetas <DIV> en lugar de tablas. Por eso el código incluye las etiquetas <DIV> necesarias y poco más.

Este sería el código de la primera tabla.

<div id=tabla1>
   <div id=cabtab1>
   Recuadro curioso con HTML
   </div>
   <div id=cuerpotab1>
   Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
   </div>
</div>

Contiene tres etiquetas <DIV> una para englobar el recuadro entero, y asignarle estilos como el borde o estilos que deseemos que se apliquen a todo el recuadro. También tendremos un <DIV> para el encabezamiento del recuadro y otro para el cuerpo.

Los estilos que utilizamos para este recuadro son los siguientes.

#tabla1{
   border: 1px solid #1E679A;
   width: 280px;
}
#cabtab1{
   background-color: #1E679A;
   font-weight: bold;
   color: #ffffff;
   padding: 2 2 2 2px;
}
#cuerpotab1{
   padding: 4 4 4 4px;
   background-color: #ffffcc;
}
Cada <DIV> tiene asignado un estilo distinto dependiendo de nuestras necesidades.

Para el segundo recuadro podremos ver un código HTML casi idéntico. Lo único que cambiamos son los identificadores de los <DIV> , para poder asignar unos estilos distintos al recuadro.

<div id=tabla2>
   <div id=cabtab2>
   Recuadro curioso con HTML
   </div>
   <div id=cuerpotab2>
   Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
   </div>
</div>

El código CSS para definir el aspecto es el siguiente.

#tabla2{
   border: 1px solid #165480;
   width: 200px;
}
#cabtab2{
   background-color: #5fa6d7;
   font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;
}
#cuerpotab2{
   font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #ffffcc;
}

Como se puede ver, no tiene ninguna dificultad adicional con respecto al primer ejemplo, pues sólo se definen estilos para cada uno de los <DIV> .

En el tercer recuadro hemos complicado un poquito el código, aunque nada reviste ninguna complicación. En este caso, como el recuadro contenía un texto con varias opciones de una lista, hemos incluido, dentro del cuerpo del recuadro, un <ul> (unordered list) con cada una de las opciones a visualizar.

<div id=tabla3>
  <div id=cabtab3>
  Recuadro curioso con HTML
  </div>
  <div id=cuerpotab3>
   <ul>
     <li>Opción uno</li>
     <li>Otra opción con texto en varias líneas</li>
     <li>Lo que sea que desees destacar</li>
     <li>Última opción</li>
   </ul>
  </div>
</div>

En la declaración de estilos también hemos definido el aspecto de la lista, para que se ajuste a nuestras necesidades.

#tabla3{
   border: 1px solid #80A93E;
   width: 200px;
}
#cabtab3{
   background-color: #B7F259;
   font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;
}
#cuerpotab3{
   font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #F5ECB9;
}
#cuerpotab3 ul{
   margin: 0 2 0 20px;
   padding: 0 0 0 0px;
}
#cuerpotab3 li{
   margin: 0 2 0 2px;
   padding: 0 0 0 0px;
}

Para definir el estilo de la lista indicamos el identificador del <DIV> donde se encuentra la lista, seguido de la etiqueta sobre la que deseamos declarar los estilos, en este caso "ul" para definir los estilos de la lista y "li" para declarar los estilos de cada una de las opciones. En este ejemplo hemos declarado los estilos necesarios para definir un margen adecuado para la lista y para cada una de sus opciones.

Conclusión


Hemos visto una manera sencilla de hacer cajas con CSS. Tal vez este artículo es demasiado básico, pero se trataba de mostrar cómo se pueden hacer con CSS algunas cosas que habíamos hecho previamente con sólo HTML.

Como se puede ver, comparando este ejemplo con su contrapartida en HTML , Con CSS se maqueta con mucha más coherencia y se obtiene un código mucho más claro.

Decorar un campo select de formulario con CSS

Ejemplo de un código para decorar un campo select de un formulario, utilizando hojas de estilos en cascada.

CSS ofrece infinitas opciones para decorar todos los elementos soportados por html. Esta vez mostraré como aplicar nuestro estilo personalizado a los drop down menú.

Primero definiremos el tag option, que contendrá el estilo de letra, el tamaño, el color, etc...

option {font-family: verdana; font-size: 10px; color: white}

Luego definiremos dos estilos vinculados a option que contendrán los colores de fondo de cada opción:

option.uno {background-color: #CCC}
option.dos {background-color: #666}

El último paso es colocar el drop down menú con nuestro estilo personalizado:

<select>
<option class="uno">Opción</option>
<option class="dos">Opción</option>
<option class="uno">Opción</option>
<option class="dos">Opción</option>
<option class="uno">Opción</option>
<option class="dos">Opción</option>
</select>

Aparte de asignar estilos a los option, también se deben definir los estilos del campo select en se. será necesario hacerlo así, por lo menos, para el navegador Firefox y otros de la familia de Mozilla.

Para definir el estilo del campo select utilizaremos este código CSS:

SELECT{ font-family: verdana; font-size: 10px; color: white; background-color:#666;}

Podemos ver el ejemplo en marcha.

Esconder con CSS el email a los spambots

Existen robots que rastrean páginas en busca de emails para hacerles spam. Vemos algunas técnicas para evitar que cacen nuestra dirección publicada en la web.

Cuando publicamos una dirección de correo en una página web debemos saber que no tardará mucho en ser rastreada e incorporada a bases de datos de emails para hacer spam. Es una auténtica paliza tener que recibir decenas o cientos de mensajes basura al cabo del día o la semana, así que merece la pena poner en marcha algún mecanismo para evitar que los spambots (robots en busca de direcciones de email) cacen nuestro correo electrónico.

En DesarrolloWeb.com ya publicamos algunos trucos posibles para evitar que encuentren nuestro email escrito en la web, en el artículo Ocultar un email de un enlace para evitar el spam. Ahora vamos a mostrar otro mecanismo que hemos encontrado en una página web. En concreto, este artículo es una traducción libre de este otro artículo en inglés: Hiding email address from spambots, escrito por Lim Chee Aun.

En este caso vamos a mostrar un código que serviría para mostrar por CSS la dirección de correo electrónico. El email aparece en la hoja de estilos, nunca en el cuerpo de la página, por lo que el spambot lo va a tener muy difícil para obtener nuestro correo.

Se trata de utilizar unas características avanzadas de las hojas de estilo en cascada, que permiten definir cierto contenido, en este caso una dirección de correo electrónico, para colocar antes o después de un texto.

Concretamente vamos a utilizar CSS2 (hojas de estilo en cascada especificación 2), que incluye la definición de pseudo-elements (pseudo elementos) "before" y "after", que sirven para insertar contenidos antes y después de ciertos elementos.

En este caso, vamos a definir con CSS 2 la inclusión de un contenido después de una etiqueta HTML, en concreto la etiqueta <ADDRESS>, que sirve en principio para escribir una dirección en una página.

Nota: Conocimos los pseudo-element en un artículo del manual de CSS: Pseudo-element en CSS


El código CSS sería el siguiente:

address:after{
/* \40 es un código para escribir el caracter '@' */
content: " <nombre\40 dominio.com>";
}

Nota: El carácter @ en hojas de estilo en cascada se puede escribir con el código especial \40. Ponemos un espacio después de \40 para que quede claro que el carácter especial llega hasta allí. Podéis probar a quitar el espacio y veréis como en ocasiones la @ se transforma en otro carácter, dependiendo de lo que se haya escrito después. Ese espacio en blanco no afecta al texto, es decir, no se verá en la página.


El código HTML que deberíamos escribir para mostrar la dirección de correo sería el siguiente:

<address>© 2005 loquesea.com</address>

Como se puede ver, en el código HTML no aparece la dirección de correo electrónico en ninguna parte, con lo que el spambot no se enterará de que allí se muestra un correo.

Se puede ver el ejemplo en una página aparte.

Atención los usuarios de Internet Explorer 6. Este navegador no soporta los pseudo-elementos after o before, con lo que este ejemplo no funcionará.

En nuestro ejemplo hemos incorporado la declaración de estilos en el mismo fichero HTML, pero tal vez sería más efectivo si colocásemos la declaración de estilos en un archivo externo, que luego incluiríamos con la etiqueta en la cabecera de la página.

Conclusión


Hemos podido ver otra ingeniosa manera de ocultar la dirección de email. Sin embargo, cabe destacar que las características avanzadas de CSS2 no están soportadas por todos los navegadores.

En general, desventaja a destacar es que, con este código, la accesibilidad de la página disminuye considerablemente. Puesto que sólo ciertos navegadores mostrarán las direcciones de correo electrónico. Asimismo, esas direcciones no se podrán pinchar para enviar un correo electrónico directamente, es decir, no se pueden mostrar como enlaces. En Firefox, ni siquiera podemos seleccionar el texto de la dirección de correo, simplemente se nos permite verlo.

No obstante, es una nueva manera de mostrar un correo electrónico no accesible a programas de rastreo de emails. Hoy todavía no es una manera muy adecuada, pero tal vez lo será con el tiempo.

Recordamos que este artículo es una traducción de otro, escrito en inglés y publicado en la URL: http://www.phoenity.com/newtedge/hide_email_spambots/

Efecto de sombra con CSS

Veremos varios métodos para realizar un efecto de sombreado utilizando hojas de estilo en cascada.

He encontrado 3 métodos distintos para hacer un efecto de sombra. Son los siguientes, que veremos comentados en este artículo:

  1. Método background-color
  2. Método canal alpha
  3. Método estirar imagen

Método Background color


Este método es bastante simple. Se basa en definir tres cajas trasladadas, con diversos colores de fondo. Los elementos con las clases "blur" y "shadow" se definirán con tonos grisáceos para crear el efecto de sombreado.

Código HTML:

<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>

Código CSS:

.blur{
   background-color: #ccc; /*shadow color*/
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
}

.shadow,
.content{
   position: relative;
   bottom: 2px;
   right: 2px;
}

.shadow{
   background-color: #666; /*shadow color*/
   color: inherit;
}

.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}

La única desventaja de este método es que usa colores definidos para las sombras y ello puede dar lugar a que no se pueda mezclar este efecto con otros elementos. Con un fondo blanco, las sombras en grises quedan bien, pero pongamos el caso de que el fondo de la página fuera de color rojo. Entonces el efecto de sombreado debería realizarse con tonos rojos oscuros.

Podemos ver el ejemplo en funcionamiento en una página aparte.

Método canal alpha


Este método es muy parecido al anterior, pero soluciona el problema de mezclarse con otros elementos. Es indiferente cual sea el fondo de la página donde se va a mostrar el elemento sombreado, incluso si el sombreado se realiza en la misma página sobre distintos fondos. Utiliza imágenes de fondo en formato PNG "alpha transparentes", en lugar de colores definidos en la hoja de estilo.

El código HTML necesario es el mismo que para el ejemplo anterior, simplemente debes modificar el código CSS, en concreto para las clases "blur" y "shadow". Mostramos el código CSS para este ejemplo.

<style type=text/css>
.blur{
   background: transparent url(shadow1.png);
/*ruta para el 80%-transparente 1x1 pixel coloreado de negro */
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
}

.shadow{
   background: transparent url(shadow2.png);
/*ruta para el 60%-transparent 1x1pixel coloreado de negro */
   color: inherit;
}

.shadow,
.content{
   position: relative;
   bottom: 2px;
   right: 2px;
}

.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}
</style>

Para probar la ventaja de este tipo de fondo, podemos cambiar el color de fondo de la página web y veremos como la sombra también cambia de color.

Las dos imágenes, de 1x1 pixel medio transparentes que se necesitan para componer este ejemplo están aquí:

Pulsar para descargar imagenes-transparentes.zip


Podemos ver el ejemplo en funcionamiento en una página aparte .

Método estirar imagen


Opino que los dos métodos anteriores no son demasiado buenos, debido a que la sombra no parece muy natural. Dicho de otro modo, no resulta un efecto suficientemente realista. De modo que abro mi editor gráfico, creo una caja rectangular con efecto de sombra y lo exporto a una imagen. Posiblemente pueda utilizar esa imagen para crear el efecto de sombra.

El código HTML experimental

<div class="shade">
<img src="shadow.png" width="0" height="0" alt="" class="shade" />
bla bla</div>

El código CSS experimental

img.shade{
   width: 37ex;
   height: 9em;
/* specify the dimension of the image */
   display: block;
   position: absolute;
   z-index: -1;
/* force the image to show below the content */
   right: -3ex;
   bottom: -1em;
}

div.shade{
   width: 30ex;
   height: 6em;
/* specify the dimension of the content, slightly smaller than the image */
   position: relative;
   z-index: 1;
/* force the content to show above the image */
   background-color: #fff;
   border: 1px solid #000;
   padding: 1em 2ex;
   margin-right: 6ex;
   margin-bottom: 3em;
}

Tenemos tres desventajas en este método

  1. Como la imagen se estira, puede que no quede muy bonito.
  2. En Mozilla Firefox la imagen a veces desaparece (se puede recuperar refrescando o desplazando la página). En Internet Explorer no se muestra bien el efecto, por lo menos en la versión 6.
  3. El contenido no puede flotar (no podemos utilizar el atributo float)

Podemos obtener la imagen para hacer el ejemplo.

Podemos ver este ejemplo en marcha en una página aparte.

Un momento. ¿Cómo haríamos texto con sombreado?


Si utilizas un navegador basado en Gecko, podrías visualizar otro efecto interesante para realizar sombreado de textos sin utilizar imágenes y redimensionable simplemente cambiando el tamaño del texto o las fuentes que usa el navegador (con el menú view>text size > increase / Decrease).

El código HTML sería el siguiente:

<span id="text">Texto sombreado</span>

El código CSS

#text{
   font-size: 3em; /* optional. just to increase the font size. */
   display: block;
   line-height: 1em;
   color: #666; /* shadow color */
   background-color: transparent;
   white-space: nowrap; /* wrapping breaks the effect */
}

#text:before,
#text:after{
   content: "Texto sombreado"; /* El mismo texto que queramos mostrar sombreado */
   display: block;
}

#text:before{
   margin-bottom: -1.05em;
   margin-left: 0.1ex;
   color: #ccc; /* shadow color */
   background-color: transparent;
}

#text:after{
   margin-top: -1.05em;
   margin-left: -0.1ex;
   color: #fff; /* text color */
   background-color: transparent;
}

Este efecto puede ser útil por ahora. Sin embargo, las especificaciones de CSS2 incluyen una propiedad CSS llamada text-shadow, que sirve para definir un efecto de sombra a un texto. Sin embargo, la mayoría de los navegadores todavía no soportan esta propiedad.

Interesantes recursos sobre este tema:

Este artículo es una traducción del inglés. El original está en: http://www.phoenity.com/newtedge/drop_shadow/

Texto en vertical usando CSS

Nuevo atributo CSS para poner un texto que se pueda leer en vertical en nuestro documento HTML.

Junto con CSS3 llegan nuevos atributos para aplicar a nuestros documentos html.

Este es el turno de presentar writing-mode, que permite enderezar un texto en dirección vertical.

Lamentablemente el único explorador en soportarlo es Internet Explorer, por eso ten precaución en su uso.

<style>
#textovertical {writing-mode: tb-rl; filter: flipv fliph}
</style>

Puedes ver un ejemplo en marcha en una página aparte.

Actualmente utilizando CSS no podremos solucionar este problema de una manera adecuada para todos los entornos. Dado que este ejemplo sólo funciona con Internet Explorer, otros navegadores como Firefox u Opera verán el texto en horizontal. Si nuestro diseño es muy preciso, seguramente no podamos utilizar este ejemplo, porque si el texto aparece unas veces en hortizontal y otras en vertical, seguramente acabe descuadrándo la página.

Una posible solución a este problema sería guardar el texto como una imagen, modificarla con Photoshop o con cualquier otro programa de este tipo, para colocar el texto en vertical. Luego habría que añadirla a la web tal como cualquier otra imagen. De esta forma el texto quedaría en vertical del mismo modo que con CSS y funcionaría en todos los navegadores.

Maquetación CSS a dos columnas

Mostramos cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con una distribución de 2 columnas, una cabecera y un pie de página. Con diseño de anchura fija o fluido.

Vamos a ver cómo realizar una maquetación a dos columnas con CSS, sin utilizar tablas. Además de las dos columnas, para completar la estructura típica de una web, colocaremos una cabecera y un pie de página.

El ejemplo pretende ser el inicio de una serie de artículos para mostrar cómo realizar distintos tipos de plantillas, maquetando con CSS en lugar de tablas. Iremos publicando estos artículos en nuestro Taller de CSS.

Empezamos mostrando los dos ejemplos de maquetación que veremos en este artículo, siempre con dos columnas, dejando la columna con los enlaces de la barra de navegación a la izquierda o la derecha.

El código HTML


El código HTML de los dos ejemplos que hemos adelantado es el mismo. Básicamente este:

<div id="contenedor">
  <div id="cabecera">
    Cabecera 01
  </div>
  <div id="cuerpo">
   <div id="lateral">
    <ul>
      <li><a href="#">Enlace 1</a>
      <li><a href="#">Vínculo 2</a>
      <li><a href="#">Otro enlace</a>
      <li><a href="#">Link chulo</a>
      <li><a href="#">Más enlaces</a>
      <li><a href="#">Otro último</a>
    </ul>
   </div>
   <div id="principal">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    ......
   </div>
  </div>
  <div id="pie">
  © 2005 DesarrolloWeb.com
  </div>
</div>

Se puede ver que tenemos una capa contenedor, que engloba todo el código. Luego, dentro del contenedor tenemos tres bloques. La cabecera, el cuerpo y el pie de página. La cabecera y el pie de página son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde tendremos las dos columnas es el cuerpo.

Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte, que hemos llamado "lateral", con una lista de enlaces (sería la barra de navegación) y otra parte con el texto de la página, que hemos llamado "principal".

El código CSS


Como habíamos adelantado, veremos dos variantes de codificación a dos columnas, con los enlaces a la izquierda y a la derecha. No obstante, la mayor parte del código CSS de ambos ejemplos es la misma, pues sólo varía la declaración de estilos de la capa "lateral" y de la capa "principal".

Maquetar con los enlaces a la izquierda


Veamos la codificación CSS para la página con los enlaces a la izquierda.

<style type="text/css">
BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 0 10 0px;
   text-align: center;
   background-color: #ebebeb;
}
#contenedor{
   text-align: left;
   width: 770px;
   margin: auto;
}
#cabecera{
   background-color: #d0d0ff;
   color: #333300;
   font-size:12pt;
   font-weight: bold;
   padding: 3 3 3 10px;
}
#cuerpo{
   margin: 10 0 10 0px;
}
#lateral{
   width: 160px;
   background-color: #999999;
   float:left;
}
#lateral ul{
   margin : 0 0 0 0px;
   padding: 0 0 0 0px;
   list-style: none;
}
#lateral li{
   background-color: #ffffcc;
   margin: 2 2 2 2px;
   padding: 2 2 2 2px;
   font-weight: bold;
}
#lateral a{
   color: #3333cc;
   text-decoration: none;
}
#principal{
   margin-left: 170px;
   background-color: #ffffff;
   padding: 4 4 4 4px;
}
#pie{
   background-color: #cccccc;
   padding: 3 10 3 10px;
   text-align:right;
}

La parte que vamos a remarcar es donde se define el estilo del lateral y la capa principal. El lateral hacemos que tenga un tamaño fijo de 160 pixel, pero lo más importante es que hacemos que "flote" a la izquierda con float:left;. Esto hace que el lateral se quede en la izquierda y permite que el contenido insertado después del lateral se coloque a la misma altura, pero a la derecha.

Por su parte, para la capa principal, simplemente se indica que tiene un margen a la izquierda de 170 píxeles. Esto hace que se coloque al lado de la capa lateral, dejando un espacio en blanco de 10 píxeles. Tiene un margen de 170, de los que 160 son para el espacio que va a ocupar la capa de los enlaces y 10 píxeles de espacio entre la capa principal y la lateral.

Como la capa principal no tiene definida su anchura, se hará tan grande como lo permita el contenedor.

Nota: Estas explicaciones no son completas de todo el ejercicio. Se supone que el lector ya tiene asimilados algunos conceptos que se han explicado en el Manual de CSS o en el Taller de CSS.


Podemos ver el ejemplo en marcha en una página aparte. Como es un archivo HTML, podemos ver el código fuente para ver cómo queda el conjunto de maquetación y declaración de estilos completo.

Maquetar con los enlaces a la derecha


Continuamos mostrando los cambios que habría que hacer para maquetar la página con la columna de enlaces a la derecha. Simplemente vamos a cambiar el código CSS de las capas lateral y principal.

#lateral{
   width: 160px;
   background-color: #999999;
   float:right;
}
#principal{
   background-color: #ffffff;
   padding: 4 4 4 4px;
   margin-right: 170px;
}

Ahora la capa lateral estamos indicando que flote a la derecha. Por su parte, en la capa principal hemos cambiado el margen que había antes hacia la izquierda para ponerlo en la parte de la derecha.

Podemos ver el ejemplo en una página aparte.

Diseño fluido


Hasta aquí en este artículo hemos visto cómo hacer un diseño con una anchura fija. Si queremos un diseño fluido (que se ajusta a la anchura de la ventana del navegador), bastaría con quitarle al contenedor el atributo width: 770px;. Si no tiene definida una anchura, la capa contenedor se ajustará al tamaño de la ventana del navegador que tenga el visitante.

Además, tendremos que darle un margen al BODY, para que el contenedor no se acople por completo al borde de la ventana. Por ejemplo, podemos darle un margen de 10 píxeles a cada lado.

Tendríamos ahora esta declaración de estilos para el BODY y la capa "contenedor":

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 10 10 10px;
   text-align: center;
   background-color: #ebebeb;
}
#contenedor{
   text-align: left;
   margin: auto;
}

Podemos ver el ejemplo en una página aparte.

Maquetación CSS a tres columnas

Veamos cómo hacer una página, maquetada únicamente con Hojas de Estilo en Cascada, compuesta por tres columnas. Con diseño de anchura fija y fluido.

Continuando nuestros talleres de CSS, vamos a ver ahora como hacer una estructura de tres columnas para una página web. Esta es una estructura bastante típica de portal. En una de las columnas se suele situar la barra de navegación, en otra el contenido y en la última una serie de banners con promociones.

Sería bueno ver el resultado que buscamos en una página aparte.

Este artículo va a presuponer que el lector comprende ya la maquetación con CSS y que ha leído el artículo Maquetación CSS a dos columnas. Nos basaremos en ese artículo para componer la página con CSS a tres columnas.

En líneas generales, la posibilidad que vamos a explorar a continuación para maquetar una web con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda flotando a la izquierda, la columna de la derecha flotando a la derecha y por último pondremos la parte principal, que aparecerá en el centro de la página.

El código HTML para hacer este ejemplo será el siguiente:

<div id="contenedor">
    <div id="cabecera">
       Cabecera 01
    </div>
    <div id="cuerpo">
       <div id="lateral">
          <ul>
             <li><a href="#">Enlace 1</a>
             <li><a href="#">Vínculo 2</a>
             <li><a href="#">Otro enlace</a>
             <li><a href="#">Link chulo</a>
             <li><a href="#">Más enlaces</a>
             <li><a href="#">Otro último</a>
          </ul>
       </div>
       <div id="otrolado">
          <img src="bannerlateral.gif" width="120" height="600" alt="">
       </div>
       <div id="principal">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
          ...
       </div>
    </div>
    <div id="pie">
       © 2005 DesarrolloWeb.com
    </div>
</div>

Vemos que la página contiene tres partes, la cabecera, el cuerpo y el pie. La cabecera y el pie se colocarán en el documento ocupando todo el ancho disponible. La parte donde colocaremos las tres columnas es el cuerpo.

Dentro del cuerpo, como podemos ver, tenemos tres capas. La capa "lateral", que es la que hemos pensado colocar a la izquierda. Luego está la capa "otrolado", que es la que planeamos colocar a la derecha. Por último está la capa "principal", que es la parte central. La capa "principal" aparecerá en el centro, porque a los dos lados estarán ocupados por las capas laterales.

El CSS que vamos a utilizar para maquetar esto será el siguiente. Se parece mucho al ejemplo de maquetación CSS a dos columnas. Luego lo comentaremos.

BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ebebeb;
}
#contenedor{
    text-align: left;
    width: 770px;
    margin: auto;
}
#cabecera{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
}
#cuerpo{
    margin: 10 0 10 0px;
}
#lateral{
    width: 160px;
    background-color: #999999;
    float:left;
}
#lateral ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
}
#lateral li{
    background-color: #ffffcc;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
}
#lateral a{
    color: #3333cc;
    text-decoration: none;
}
#otrolado{
    width: 120px;
    float: right;
}
#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    width: 460px;
}
#pie{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
}

Tendremos un contenedor, de 770 píxeles (px) de ancho, que es donde vamos a colocar todas las capas. Nos centramos en explicar la zona del cuerpo, que es donde aparecerán las tres columnas.

Vemos como la capa "lateral" tiene definido un ancho de 160 px, y un float: left; para que flote a la izquierda. Vemos luego como la capa "otrolado" tiene 120 px de ancho y flota a la derecha.

Luego vemos la capa "principal", que tiene un margen a la izquierda de 170 px, para dejar un espacio con respecto a la capa "lateral". 170 px porque la capa "lateral" ocupa 160 px de ancho, más 10 px que es lo que realmente estamos poniendo de margen. En la capa "principal" también hemos definido un ancho de 460 px, para que ocupe justo el espacio que queda en el centro.

Se puede ver el ejemplo en marcha en una página aparte.

Diseño fluido


Los diseños fluidos son los que se ajustan a la anchura que tengamos en la ventana del navegador. En el anterior ejemplo el diseño tenía una anchura fija de 700 píxeles y ahora vamos a hacer un par de modificaciones para que el diseño se ajuste a la ventana del navegador.

Simplemente tendremos que quitar la definición de anchura de la capa "contenedor".

#contenedor{
    text-align: left;
    margin: auto;
}

Luego, también quitaremos la definición de anchura de la capa "principal" y añadiremos el atributo margin-right: 130px; para que la capa con el contenido central tenga un margen con respecto a la capa que queda a la derecha. 130 px porque la capa de la derecha ocupaba 120 px, más 10 px que es realmente el margen que estamos dejando.

#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    margin-right: 130px;
}

Podemos ver el ejemplo en una página aparte.

Cambiando el cursor del mouse

Cómo cambiar con css las opciones por defecto de los cursores al pasar por ciertas partes de la página.

Nuestro sistema operativo posee cursores por defecto. Cursores nos referimos al puntero del ratón: la típica flechita o cualquier otro dibujo que puede tener.

En Windows podemos encontrar varios cursores que se activan cuando pasamos por "ciertas zonas" de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la típica flechita (denominada default en CSS) cambia por la manito (pinter). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen.

Con la ayuda de las hojas de estilo podemos forzar a nuestro sistema operativo que no se rija más sobre las normas convencionales de los punteros; logrando así un atractivo diseño web en donde el puntero de nuestro mouse puede llegar a ser hasta una imagen de nuestra propia creación.

A continuación pueden observar la lista de los cursores disponibles por defecto en Windows:

  • default (flecha)
  • crosshair (cruz)
  • e-resize (flecha que apunta a la derecha)
  • hand (mano)
  • help (signo de pregunta)
  • move (cruz con flechas en los extremos)
  • n-resize (flecha que apunta hacia arriba)
  • ne-resize (flecha que apunta al noreste)
  • nw-resize (flecha que apunta al noroeste)
  • pointer (mano)
  • s-resize (flecha que apunta hacia abajo)
  • se-resize (flecha que apunta hacia el sudeste)
  • sw-resize (flecha que apunta hacia el sudoeste)
  • text (I-beam)
  • w-resize (flecha que apunta a la izquierda)
  • wait (reloj de arena)

Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.

A todo el documento:


<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: pointer}
-->
</style>
</head>
<body>
</body>
</html>

A algunos sectores del documento:


<html>
<title>Cambiar el cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>

También es posible utilizar un cursor personalizado:


<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("find.cur")}
-->
</style>
</head>
<body>
</body>
</html>

Ver ejemplo en marcha
Publicado por en No hay comentarios:
Suscribirse a: Comentarios (Atom)