Esquinas redondeadas y cuadros con sombra

En CSS3 habrá propiedades para crear bordes redondeados o compuestos por imágenes y cuadros con sombras, pero con un poco de trabajo pueden simularse algunas de estas características con CSS2, sin necesidad de usar tablas o etiquetas adicionales.

Esta página se inspiró en una creada por Arve Bersvendsen, quien también tiene muchos otros ejemplos interesantes del uso de CSS.

Por supuesto, crear bordes redondeados y sombras será mucho más sencillo con CSS3. Por ejemplo, para poner un borde rojo, grueso, con esquinas redondeadas alrededor de un párrafo, en CSS3 sólo serán necesarias dos líneas como éstas:

P { border: solid thick red;
	border-radius: 1em }

Y para agregar una sombra borrosa a medio cuadratín (em) debajo y a la derecha del párrafo, bastará una sola línea:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Puede probar aquí para ver si ya funciona). Pero si necesita crear esta clase de diseños ahora y no le preocupa la complejidad y la falta de flexibilidad, puede usar la técnica que se explica a continuación. Como mínimo, será muy útil como prueba para navegadores con errores de programación…

Cinco imágenes en un elemento

El truco básico es usar generación de contenido ('::before' y '::after') para agregar a un elemento cuatro imágenes adicionales. El pseudoelemento '::before' puede tener una imagen de fondo y otra de primer plano, lo mismo que el pseudoelemento '::after'; y el elemento en sí también puede tener un fondo, lo que resulta en un total de cinco imágenes.

Creamos cinco imágenes PNG y las colocamos en las cuatro esquinas y contra el borde derecho del elemento. Las imágenes son éstas:

esquina superior izquierda:

borde superior y esquina superior derecha:

parte del medio y borde derecho:

esquina inferior izquierda:

borde inferior y esquina inferior derecha:

Y éstas son las reglas CSS para ubicar las imágenes:

blockquote {
	max-width: 620px;
	background: url(rs-right.png) right repeat-y }
blockquote::before {
	display: block;
	line-height: 0;
	background: url(rs-topright.png) top right no-repeat;
	content: url(rs-topleft.png) }
blockquote::after {
	display: block;
	line-height: 0;
	background: url(rs-bottomright.png) bottom right no-repeat;
	content: url(rs-bottomleft.png) }

Puesto que el ancho de la imagen de fondo es de 620 píxeles, no podemos permitir cuadros más anchos, ya que de lo contrario quedarían espacios vacíos. Es por ello que incluimos la propiedad "max-width". La propiedad "display: block" es necesaria para asegurar que el contenido generado forme cuadros separados, arriba y abajo del contenido principal, en vez de insertarse en la primera línea y en la última. La propiedad "line-height: 0" asegura que no quede espacio para trazos ascendentes y descendentes encima y debajo de las imágenes en la propiedad "content".

El resultado

Y así es como se ve:

El origen HTML no es mucho más de lo que uno esperaría:

<blockquote>
<p>¿Ve un cuadro verde claro con esquinas redondeadas
y sombra, contra fondo blanco? Si no lo ve así,
el navegador no está manejando correctamente el contenido generado
(o quizá, ni siquiera lo esté generando).
</blockquote>

Y si desea verificar si su navegador ya puede hacerlo con CSS3, puede probar aquí.