[Перевод] Использование элементов, в качестве фоновых изображений при помощи -moz-element

Перевод статьи «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 это то, что вы сможете включать текст в фон, также вы сможете использовать элементы сгенерированные внешними скриптам (скрипты социальных закладок, например). Какая же это интересная реализация!

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.