Перевод статьи «Use Elements as Background Images with -moz-element», David Walsh
Все мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element, это реализованное Mozill’ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!
Смотреть демо
HTML и CSS
Предположим, что HTML элемент существует внутри текущей страницы и у него задан стиль. У элемента есть CSS градиент, текст и несколько CSS свойств:
<div id="mozElementBack" style="border:1px solid #999;width: 200px; height: 100px; color: #fff; background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);">
I'm in the background.
</div>
Я задал стили внутри атрибута элемента, но -moz-element работает и со стилями указанными в тегах style или внешних таблицах стилей. Теперь, имея элемент на нашей странице, мы можем использовать его как «background» для другого элемента:
#mySpecialElement {
/* mozElementBack exists as an element within the page */
background: -moz-element(#mozElementBack) repeat;
}
Присваивание ID элемента свойству -moz-element, теоретически, превращает элемент в фоновое изображение, позволяющее применять background-repeat и все остальное. Также, заметьте, что элемент обновляется при обновлении стиля и содержимого фонового элемента, так что вы работаете с «живим» фоном!
Смотреть демо
Потрясающее CSS свойство, не так ли? Возможность использования существующего HTML элемента, в качестве CSS фона, просто удивительна, но благодаря Mozilla, это полностью возможно. Вы думаете о реальном применении это свойства? Преимущество, которое я вижу в -moz-element это то, что вы сможете включать текст в фон, также вы сможете использовать элементы сгенерированные внешними скриптам (скрипты социальных закладок, например). Какая же это интересная реализация!
