¿Cómo agregar un halo a un texto en el compositor?


15

Me gustaría agregar textos con halo, en el compositor (no en el mapa). ¿Sabes una manera de hacerlo?

Estoy usando QGIS 2.0.1

Respuestas:


21

Agrega una nueva etiqueta QGIS 2.0.1 Composer.

En el item propertiessi pones el siguiente código

<span style="color:blue;text-shadow: 0px 0px 2px #4d2d4d, 0px 5px 10px #aefe00;">Test</span>

obtendrá el efecto deseado:

ingrese la descripción de la imagen aquí

(¡No olvide deshabilitar el item backgroundsi está buscando una etiqueta transparente !)


EDITAR

Algunas text-shadowexplicaciones a continuación:

ingrese la descripción de la imagen aquí

Para compensaciones y desenfoque, puede usar valores positivos o negativos.


Más, puedes tener múltiples sombras, así:

Ejemplo 1:

<span style="color:brown;text-shadow: 0.5px 0.5px 0.5px #fff, 0.7px 0.7px 0px rgba(0,0,0,0.5);">Test</span>

Y verás esto:

ingrese la descripción de la imagen aquí

Ejemplo 2

<span style="color:violet;text-shadow: -0.5px 0.5px 0px #00e6e6, -1px 1px 0px #01cccc, -1.5px 1.5px 0px #00bdbd;">Test</span>

ingrese la descripción de la imagen aquí

Ejemplo 3

<span style="color:white;text-shadow:
               0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);">Test</span>

ingrese la descripción de la imagen aquí


1
Es la primera vez que uso HTML, ¡me acabas de presentar a un mundo nuevo! Al explorar su sugerencia, encontré ese código, que corresponde exactamente a lo que estaba buscando: "text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white". Muchas gracias
cd44

20

Otra forma fácil de lograr lo mismo que la función de búfer en QGIS.DESKTOP es la siguiente:

<p style="-webkit-text-stroke: 3px white">Test</p>

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.