| |

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.

Retocar la imagen

Como ya hemos indicado, la imagen tendría que tener el fondo transparente o del mismo color que el fondo de la página, para que el texto, al escribir alrededor de la figura, se vea correctamente, claro, que esto es según decida el diseñador.

Yo he usado el GIMP para la explicación, supongo que porque es gratuito y por si alguien no se puede permitir comprar programas como Photoshop, Paint Shop Pro, … Lo primero que se tiene que hacer es seleccionar el fondo que queremos eliminar, usando cualquiera de las herramientas de selección que posee GIMP.

Herramientas GIMP
En este caso, yo he usado la varita mágica, porque el fondo tiene un color muy parecido, y modificando el umbral para que amplie la selección, consigo seleccionar todo el fondo en un par de clicks.
paso1.png
Una vez ya tenemos el fondo seleccionado, debemos borrarlo mediante el comando limpiar (CTRL + K), no olvidando mirar si la capa tiene canal alfa, necesario para la transparencia.
paso2.png
Yo he grabado la imagen en formato PNG porque permite 16M de colores y fondo transparente, aunque IE no trata bien el fondo transparente (te recomiendo que uses Firefox u Opera o que esperes al IE7).

Tomar medidas de la imagen

Ya tenemos la imagen, ahora la vamos a usar como fondo de una capa (arriba a la izquierda), que también tendrá incluido el texto:

<div class="contenedor"><p>
Lorem ipsum dolor sit amet, consectetuer
...
</p></div>


div.contenedor {
width: 500px;
background: url(flor.png) top left no-repeat;
}

Como puedes apreciar, todo el texto aparece encima de la imagen, por ello tenemos que ir midiendo la distancia en pixels desde el origen de la frase hasta el contorno de la imagen para cada una de las líneas que se sobreponen a la imagen, puedes usar un editor de imágenes, pero te recomiendo que uses MeasureIt para Firefox.
paso3.png

Últimos pasos

Ya tenemos la imagen retocada, las medidas y el parrafo, ahora solo nos falta colocar ciertos elementos html, uno por cada línea, para que el texto del párrafo no se escriba encima de la imagen.

Los elementos que vamos a usar son SPAN cuyo estilo (usando class) será el siguiente:

	.margen {
float: left;
display: block;
height: 19px;
clear: left;
}

Siendo importantes para este efecto float y clear, podéis ver una explicación de ambas aquí, el height debe ser del tamaño de una línea de texto.

A parte, cada elemento tendrá un un id y un estilo asociado que indicará el ancho:

#margen1 { width: 122px; }

Solo falta colocar los elementos HTML dentro del párrafo de texto y ya habremos acabado.

<div class="contenedor"><p>
<span id="margen1" class="margen"></span>
...
<span id="margenn" class="margen"></span>
Lorem ipsum dolor sit amet, consectetuer
...
</p></div>

Ejemplo

Similar Posts

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

37 pasos para un perfecto etiquetado HTML

ByLuis

Para aquellos que empiecen o para quienes aún sean un poco de la vieja escuela, el artículo al que hacemos referencia puede ser de gran ayuda ya que te explica desde lo más elemental a lo más semántico.
Hay un total de 37 puntos que nos explican qué es lo que debemos hacer o qué es cada cosa dentro de una página web. Empieza explicando lo que es un HTML, luego un XHTML, los diferentes tipos de XHTML, el DOCTYPE, la validación del documento, la codificación (recomendando UTF-8), el BOM dentro de un archivo UTF-8, las entidades, la semántica (el uso de cabeceras y de em o strong), los párrafos o los saltos de línea y muchas otras cosas más que recomendamos que leaís.
Bulletproof HTML: 37 Steps to Perfect Markup

| | |

Cambiar el tamaño de letra dinámicamente

ByLuis

font-size de Elmundo.es

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.

Read More “Cambiar el tamaño de letra dinámicamente”

CSS dinámicos

ByLuis

Un interesante artículo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artículo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.

Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.

Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se debería diferenciar de mostrar un HTML:

header('Content-Type: text/css');
if (condicion) {
echo '#estilo { display: inline; }';
} else {
echo '#estilo { display: inline; }';
}

El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, así seleccionamos unos estilos u otros, pero no los generamos:

header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
echo '@import "estilo1.css";';
} else {
echo '@import "estilo2.css";';
}

Static and dynamic CSS combined

Gráficas mediante CSS

ByLuis

Una buena colección de herramientas para generar gráficas (de barras, progreso, de tarta, …):

10 Free CSS Graph Resources

Vía / Intenta