Foros del Web » Creando para Internet » HTML »

letras en diagonal (para el background)

Estas en el tema de letras en diagonal (para el background) en el foro de HTML en Foros del Web. ¿Se puede sin que haga falta que sea una imagen, sino texto?...
  #1 (permalink)  
Antiguo 18/12/2014, 12:47
 
Fecha de Ingreso: noviembre-2005
Mensajes: 162
Antigüedad: 12 años, 6 meses
Puntos: 1
letras en diagonal (para el background)

¿Se puede sin que haga falta que sea una imagen, sino texto?
  #2 (permalink)  
Antiguo 19/12/2014, 00:29
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.560
Antigüedad: 16 años, 2 meses
Puntos: 1265
Respuesta: letras en diagonal (para el background)

Hola:

Se ocurre que podría valerte una imagen svg, con un simple tag text y su rotate.

Por ejemplo:

Código CSS:
Ver original
  1. body    {
  2.     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' font-size='15' stroke-width='.5' stroke='red' text-anchor='center' startOffset='50%' transform='rotate(45)'>Foros del Web</text></svg>");
  3. }

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 19/12/2014, 11:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.475
Antigüedad: 15 años, 10 meses
Puntos: 2107
Respuesta: letras en diagonal (para el background)

O usar CSS:

Código CSS:
Ver original
  1. transform: rotate(45deg);

Parece más amable que usar SVG.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #4 (permalink)  
Antiguo 19/12/2014, 23:34
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.560
Antigüedad: 16 años, 2 meses
Puntos: 1265
Respuesta: letras en diagonal (para el background)

Hola:

Cita:
Iniciado por pzin Ver Mensaje
...Parece más amable que usar SVG.
...

Cita:
Iniciado por congrio7 Ver Mensaje
¿Se puede sin que haga falta que sea una imagen, sino texto?
No sé si solo estilos valga como fondo... con el svg se puede ubicar, repetir, etc.

Por cierto, con un retoque queda:

Código Javascript:
Ver original
  1. body    {
  2.     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; ' transform='rotate(-45,150,150)'>Foros del Web</text></svg>");
  3. }

En la anterior versión sobraba el startOffset (que es válido en tags textPath), y agrupé estilos...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: diagonal, letras
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:36.