Utiliza elementos del html como imagen del background con -moz-element 8.3.12
Utiliza elementos del html como imagen del background con -moz-element
Textos en Background
Con esta propiedad podrás, por fín, tener texto como fondos (background) de cualquier elemento.
Una vez más, Css consigue lo imposible.
Original visto en el blog de David Walsh
Todos sabemos que cada navegador se toma la libertad de aplicar sus propias características de CSS y JavaScript amparadas en sus prefijos privativos. Mozilla y WebKit han sacado algunas propiedades interesantes de CSS, y todos sabemos que las propiedades llevan mucho tiempo, más de lo que debería, hasta que llegan a recomendacioes y son soportadas por todos los navegadores. Una interesante propiedad CSS de la que probablemente no has oído hablar es -moz-element, una propiedad que Mozilla ha implementado en CSS que permite a los desarrolladores usar los elementos HTML como un elemento de fondo (background)
Supongamos que existe un elemento HTML en la página actual, y que queramos que sea a su vez el fondo (background) de otro. Cuenta con un gradiente de CSS, el texto y numerosas propiedades CSS:
<div id="mozElementBack"
style="border:1px solid #999;width: 200px; height: 100px; color: #fff;
background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);">
¿Dónde está este texto? Depende del div que elijas.
</div>
He puesto los estilos en línea, pero -moz-element trabaja con estilos declarados en las etiquetas de estilo o en hojas de estilo externas.
Este elemento que existe dentro de nuestra página, ahora podemos utilizarlo como un "fondo" de otro elemento, todo incluido, estilos y contenido:
#mySpecialElement {
background: -moz-element(#mozElementBack) repeat;
}
Simplemente estableciendo el -moz-element para el ID del elemento, teóricamente, convierte el elemento dado a una imagen de fondo, permitiendo los valores de repetición del fondo (repeat), y cualquier otra (posicionarlo...). También ten en cuenta que las actualizaciones como el contenido del elemento y las actualizaciones de estilo se actualizarán instantáneamente, por lo que estás trabajando con un "fondo vivo".
Vamos a verlo con dos ejemplos. Este primero con los códigos de arriba. Tenemos un div a la izquierda con un texto. El de la derecha es en el que declaro background: -moz-element(#mozElementBack) repeat;. Selecciona el texto con el cursor en uno y otro y observa.
El segundo con un textarea, para que introduzcas el texto que quieras y veas el efecto en vivo y en directo. Juega también a redimensionar el textarea. En este caso, colocado con no-repeat:
Una increíble propiedad CSS, ¿no? La capacidad de utilizar un elemento HTML existente como fondo CSS es salvaje, pero gracias a Mozilla, es completamente posible. Dinos en qué se te ocurre utilizar en un supuesto real esta propiedad. La ventaja que veo en -moz-elemento es que se puede incluir texto en los fondos, así como elementos generados a partir de scripts que no se controlan.
Resumiendo: una propiedad interesante.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso