Editando apunte: Fondos con SVG

Editando apunte: Fondos con SVG cerrar apuntes

ID: 140 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster
Etiquetas: diseño, etiquetas, imágenes, sociedad, tags, webmaster
Extras: diseño, etiquetas, imágenes, sociedad, tags, webmaster
apunte: - - - - - - - -

<p>
	[rss]Las imágenes SVG también pueden servirnos para personalizar los fondos de nuestras páginas, o de algunos de sus elementos.[/rss]
	En un mensaje de los foros, pensé que este formato de imágenes escalables podría ser ideal para dar la respuesta al tema "<a href="http://www.forosdelweb.com/f4/letras-diagonal-para-background-1116419/">letras en diagonal (para el background)</a>".
	Un estilo de fondo similar al de la respuesta es el que hemos puesto para el cuerpo de ésta página:
</p>
<pre class="codigo">body	{
	background: url("data:image/svg+xml;iso-8859-1,
	<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' x='0' y='0'>
		<text x='150' y='150' style='font: bold 36px arial; dominant-baseline: middle; fill: red; text-anchor: middle; opacity: .2' transform='rotate(-45,150,150)'>
			pepemolina.com
		</text>
	</svg>"
	);
}</pre>
<p>
	En el código original no existen saltos de línea ni tabuladores.
</p>
<p>
	Otro elemento svg que estamos usando de fondo es el mapa de España que aparece junto al título del apunte, que es el mismo del apunte:
<a href="?titulo=Mapas%20interactivos%20svg&PHPSESSID=t5m07kgsqqlot1n3v65i5tb020">Mapas interactivos svg</a>, y su código hemos modificado levemente para permitir opacidad:
<a href="diario.jocker.php?extra=codigo&codigo=mapa_comunidades_hispanas&PHPSESSID=t5m07kgsqqlot1n3v65i5tb020">mapa_comunidades_hispanas</a>.
</p>

<h3 class="subtitulo">
	Ajustes
</h3>

<p>
<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250' x='0' y='0' style="background-color: #abcdef; border: 3px ridge red; margin: 0 0 .5em 1em; float: right;" viewbox="0 0 300 300" preserveAspectRatio="none">
		<text x='150' y='150' style='font: bold 36px arial; fill: red; dominant-baseline: middle; text-anchor: middle;' transform='rotate(-45, 150, 150)' >
			pepemolina.com
		</text>
		<line x1="0" y1="300" x2="300" y2="0" stroke-width="1" stroke="black"/>
	</svg>
	El fondo de la página lo hemos aislado a un lado de este párrafo para mostrar mejor sus detalles.
	También hemos eliminado la opacidad, y para distinguir la alineación, añadimos una línea que cruza diagonalmente el recuadro,
aunque también hemos reducido algo el tamaño (no nos olvidemos de la escalabilidad del formato), ya que no era necesario usar la misma
resolución que el fondo.
</p>
<p>
	De todos modos, despreocupándonos del tamaño al escalarla, tenemos una imagen del 300x300 (digamos que nos referimos a puntos),
donde el texto lo ubicamos en el centro (150x150).
	Para el centrado horizontal usamos el estilo/atributo text-anchor, dándole el valor "middle" (mitad), y usamos el mismo valor
para el centrado vertical en el estilo/atributo dominant-baseline.
</p>
<p>
	Dejamos de lado el estilo de las letras, solo nos queda rotar nuestro texto: "transform='rotate(-45, 150, 150)'".
</p>
<p>
	Sobre el mapa de España en la esquina superior derecha del espacio reservado para el apunte, solo comentaremos que
hemos modificado el <a href="diario.jocker.php?extra=codigo&codigo=mapa_comunidades_hispanas&PHPSESSID=t5m07kgsqqlot1n3v65i5tb020">código que genera ese mapa</a>,
añadiendo la posiblidad de aplicarle opacidad.
</p>

<h3 class="subtitulo">
	Algunas sugerencias
</h3>

<p>
	Si revisamos nuestros <a href="diario.jocker.php?extra=grupos&PHPSESSID=t5m07kgsqqlot1n3v65i5tb020">grupos de apuntes</a>, hemos tratado distintos tipos de ficheros svg. Un reloj analógico,
figuras geométricas, mapas, textos con distintas sinuosidades, gradientes, animaciones... incluso <a href="ficheros/navidad-2013.svg?PHPSESSID=t5m07kgsqqlot1n3v65i5tb020">postales digitales</a>.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación