| |

Cómo crear márgenes según un contorno

ByLuis

Margen asimétricoHace unos días comentábamos sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.

Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.

Read More “Cómo crear márgenes según un contorno”

Márgenes redondeados mediante CSS

ByLuis

borde-redondo.gif Seguimos con bordes redondeados.
Siempre que añadimos imágenes en nuestra página web, el texto cuando se ordena alrededor de ella lo hace tomándola como una caja, lógicamente, porque es así su forma real. Pero, ¿qué pasa cuándo la imagen tiene transparencias y tiene un contorno no recto?, pues que da igual, sigue tomándolo como una caja. En estos casos, el efecto que causa es un poco feo, ya que queda mucho espacio sobrante.
En publicaciones de prensa, sobre todo en revistas, muchas veces aparece la imagen de un personaje y el texto se ordena según la figura de la persona. Aunque en prensa usan un diseño estático e introducen saltos de línea cuando les interesa, el efecto que crean es de mucha vistosidad.
Si estás interesado en esta forma de presentación, puedes ver en couchfort cómo lo hacen. Debido a que la explicación quizás no sea suficiente para algunas personas, en Sentido Web vamos a incluir un howto que explique cómo hacerlo paso a paso.
Vía / del.icio.us

| |

Recursos para crear bordes redondeados

ByLuis

nifty.pngPara aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.