Використання елементів, в якості фонових зображень за допомогою-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
це те, що ви зможете включати текст в фон, також ви зможете використовувати елементи згенеровані зовнішніми скриптам (скрипти соціальних закладок, наприклад). Яка ж це цікава реалізація!
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.