logo El diario de Pepe Molina (Caricatos)

yo

Las imágenes SVG también pueden servirnos para personalizar los fondos de nuestras páginas, o de algunos de sus elementos.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Como no sabían que era imposible, lo hicieron

Anónimo, .


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Fondos con SVG

emoticón de Caricatos Publicado el día 28 de diciembre de 2014
id=140; categorías: Vicisitudes de un Webmaster

Las imágenes SVG también pueden servirnos para personalizar los fondos de nuestras páginas, o de algunos de sus elementos. En un mensaje de los foros, pensé que este formato de imágenes escalables podría ser ideal para dar la respuesta al tema "letras en diagonal (para el background)". Un estilo de fondo similar al de la respuesta es el que hemos puesto para el cuerpo de ésta página:

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>"
	);
}

En el código original no existen saltos de línea ni tabuladores.

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: Mapas interactivos svg, y su código hemos modificado levemente para permitir opacidad: mapa_comunidades_hispanas.

Ajustes

pepemolina.com 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.

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.

Dejamos de lado el estilo de las letras, solo nos queda rotar nuestro texto: "transform='rotate(-45, 150, 150)'".

Sobre el mapa de España en la esquina superior derecha del espacio reservado para el apunte, solo comentaremos que hemos modificado el código que genera ese mapa, añadiendo la posiblidad de aplicarle opacidad.

Algunas sugerencias

Si revisamos nuestros grupos de apuntes, hemos tratado distintos tipos de ficheros svg. Un reloj analógico, figuras geométricas, mapas, textos con distintas sinuosidades, gradientes, animaciones... incluso postales digitales.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.140) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 3471 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO005.gif
http://www.pepemolina.com/postales/Musicales/Imagen1.gif
http://www.pepemolina.com/postales/Musicales/Imagen2.gif
http://www.pepemolina.com/postales/Musicales/Imagen3.gif
http://www.pepemolina.com/postales/Musicales/Imagen4.gif
http://www.pepemolina.com/postales/Musicales/Imagen5.gif
http://www.pepemolina.com/postales/Musicales/Imagen6.gif
http://www.pepemolina.com/postales/Musicales/Imagen7.gif
Postal Digital
Postal Digital
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio