Dale forma al texto con CSS

Uno de los problemas con los que nos podemos encontrar a la hora de maquetar una página web con CSS, es la de realizar formas complejas con el texto, requiriendo de trabajar con una buena cantidad de capas. Para facilitar este trabajo, desde CSS Text Wrapper nos dan varias posibilidades, permitiéndonos de forma gráfica darle forma al texto, y generando por nosotros todo el código necesario para añadirlo directamente a la web, y de tres formas distintas: todo el código en un único archivo HTML, separando el código HTML del CSS, o por JavaScript.

De color a escala de grises con jQuery y CSS

Este es un interesante efecto que nos proporciona el blog sohtanaka, aunque para entenderlo mejor tenemos un tutorial en castellano, explicando el efecto, en CSSBlog. El efecto aplicado realiza la acción cuando nos posicionamos encima de una imagen, pasando ésta de color a escala de grises, con un efecto de transición y un borde más oscuro simulando una sombra. Podéis ver este efecto en la siguiente demo.

Etiquetas y atributos CSS soportados por los clientes de correo

A la hora de diseñar una plantilla de correo, el mayor problema con el que nos podemos encontrar es el limitado número de etiquetas y atributos que aceptan los clientes de correo. A la hora de “maquetar” estos diseños, tendremos que tener en cuenta que cada cliente de correo funciona de format distinta, aceptando unas u otras etiquetas, y encontrándonos cosas como que Outllook 2007 o Gmail no aceptan casi ningún tipo de selector, y prácticamente la mayoría de los clientes no aceptan transparencias.

Para identificar las etiquetas y atributos soportados por los clientes de correo más usados, en Campaign Monitor han realizado un completo resumen donde recopilan toda esta información, la cual puedes ver en su web, o descargarla en formato PDF o XLSX.

Esquinas redondeadas con CSS e imágenes

El uso de esquinas redondeadas en ciertos elementos para la web, es una de las técnicas más utilizadas y populares en Internet. En roundedcornr.com podéis realizar este efecto de una forma rápida y sencilla, ya que os genera automáticamente el código y las imágenes necesarias para conseguir este logrado efecto, que funciona perfectamente en la mayoría de los navegadores.

Minimiza y ordena tu CSS

Barry van Oudtshoorn, ha desarrollado un compactador de CSS que además nos permite ordenar alfabéticamente los atributos de nuestros CSS. Para ello, ha seguido las especificaciones que Google propone en Minimize Payload Size haciendo que nuestro CSS sea más pequeño y, por consecuente, tarde menos en llegar al usuario final.

¿Que es lo que hace?

Usando un fichero CSS de base se le aplican una serie de transformaciones para obtener un fichero CSS nuevo complemente compactado.

• Se eliminan todos los comentarios
• Ordena todos las propiedades de cada selector alfabéticamente
• Ordena todos los valores de cada propiedad alfabéticamente
• Elimina todo espacio innecesario.

Vía aNieto2k

CSS: text-shadow

El CSS nivel 3 tiene una propiedad llamada “text-shadow” que permite añadir una sombra a cada letra de un texto. En su forma más simple, es más o menos así:

h3 {text-shadow: 0.1em 0.1em #333}

Esto añade una sombra gris oscuro (#333) un poco a la derecha (0.1em) y abajo (0.1em) en relación con el texto normal.

Texto con sombra borrosa

La forma más sencilla de la propiedad “text-shadow” tiene dos partes: un color (como #333 en el ejemplo anterior) y un desplazamiento (0.1em 0.1em en el ejemplo anterior). El resultado es una sombra nítida con el desplazamiento indicado. Pero también puede hacerse que el desplazamiento sea impreciso, lo que da por resultado una sombra más o menos borrosa.

La cantidad de imprecisión se da como otro desplazamiento, en este caso 0.05em.

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}

También es posible poner más de una sombra. Colocando acertadamente dos sombras, una oscura y la otra clara, el efecto puede ser muy útil:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Brillo de neón

Si se pone una sombra borrosa justo detrás del texto, es decir, con desplazamiento igual a cero, el efecto es un resplandor alrededor de las letras. Si el resplador de una sola sombra no es suficientemente intenso, basta repetir la misma sombra unas pocas veces:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
		0 0 0.2em #87F}

Rotar y transformar con CSS

Aunque es una funcionalidad que existe desde hace tiempo en las especificaciones de CSS, cada uno los navegadores la han aplicado a su manera, existiendo entonces diferentes formas de llamar a esta propiedad. Hablo de la posibilidad de rotar o transformar un elemento con la propiedad Transform de CSS.

En la siguiente lista se puede ver cómo se llama a esta propiedad para cada uno de los navegadores más importantes. Como no es un estándar, el resto de navegadores o no tienen esta posibilidad, o la llaman también de otra forma distinta.

• DXImageTransform.Microsoft.BasicImage (Internet Explorer)
• -webkit-transform (Safari | Chrome)
• -moz-transform (Firefox)

A continuación os dejo dos enlaces con ejemplos del uso de esta propiedad, uno para “mover” imágenes, y el otro ejemplo para rotar texto.

1. How To Create a Pure CSS Polaroid Photo Gallery (Line 25)
2. Text rotation with CSS

Efectos avanzados en CSS3

Nettus nos trae esta vez un vídeo en el que nos enseña cómo aplicar efectos avanzados con CSS3, aunque ya nos avisa que para poder comprobar en la realidad la aplicación de estos efectos, tendremos que utilizar un navegador Webkit, o esperar a que los demás navegadores implementen estas funcionalidades, ya que por ahora son pocos los que están actualizados a CSS3. Aún así, es un interesante vídeo donde podemos comprobar funcionalidades que se pueden aplicar con la nueva versión de CSS: máscaras, reflejos, transiciones, animaciones, etc.

A Crash-Course in Advanced CSS3 Effects

Recursos sobre CSS

El enlace siguiente, recopila más de 250 recursos sobre CSS, entre los que se pueden encontrar técnicas y tutoriales para aprender a manejar las hojas de estilos, “chuletas” varias, formas de optimizar tus hojas, menús en CSS, páginas de inspiración, etc.

250+ Resources to Help You Become a CSS Expert

Estilos del Sistema Operativo en CSS

Una de las características menos conocidas de CSS2.1 es la capacidad de definir las fuentes y los colores que están en uso por parte del tema del sistema operativo subyacente. Esto puede ser útil en algunas situaciones, en caso de requerir mayor integración con el Sistema Operativo.

Aún así, hay varias consideraciones a tener en cuenta:

• No confíe en estas propiedades en todas las combinaciones de Sistema Operativo / navegador. Si prueba por ejemplo en Opera sobre BeOS, entonces le recomiendo que lo pruebe primero.
• Las propiedades han quedado obsoletas en CSS3, en favor de la apariencia y el diseño personalizado.
• No hay nada que impida al usuario final definir un tema o esquemas de color feos en su sistema operativo.

Por lo tanto, es una opción interesante para ciertos casos, pero siempre quedará mejor un diseño personalizado y adaptado a las necesidades propias de la página web.

Fuentes del Sistema

La fuente del Sistema se asigna a través de la propiedad Font. Tenga en cuenta que la familia, el tamaño y el estilo son todas las asignadas en su caso.

body
{
  font: caption;
}

Colores

El sistema de colores pueden ser asignado a cualquier propiedad que espere un valor de color.

body
{
  color: WindowText;
  background-color: Window;
  border: 2px solid ActiveBorder;
}

En la tabla siguiente, se pueden ver las propiedades aceptadas.