Экспериментируем с CSS функцией element()

Как я и говорил в предыдущей статье, после релиза Firefox 4 все вдруг резко начали загружать новые свойства CSS. Сразу после CSS селектора any() в движок Gecko добавилась новая прикольная CSS фича, которую я бы хотел сегодня помучать, - это функция element().

Согласно спецификации, функция делает следующее: начиная с Gecko 2.0, вы можете пользоваться CSS функцией element(), чтобы использовать случайный HTML элемент в качестве фонового изображения через свойства background или background-image. Звучит интересно! Обратите внимание - это работает только в последней версии Firefox, для ранних версий все еще требуется добавлять приставку -moz- (т.е. функция будет выглядеть так: -moz-element()).

Вы конечно можете сразу посмотреть на демо-пример и увидеть, как я поэкспериментировал с данной функцией, но я все же рекомендую вам дочитать статью до конца, и вы узнаете, почему эти эксперименты оказались такими интересными.

Что надо знать

Вот некоторые вещи, которые вам следовало бы узнать о функции (все взято из спецификации):

  • Полезно будет использовать функцию для передачи изображения в HTML5 элемент <canvas>, а затем применить его в качестве фона.
  • Вы можете воспользоваться методом document.mozSetImageElement() для изменения элемента, используемого в качестве фона.
  • Синтаксис: -moz-element(id), где id - это ID элемента, который нужно использовать в качестве фона, назначенного так: "#id".

Теперь, зная все это, можем начать веселиться с нашей функцией. Давайте посмотрим, что у нас получится!

Эксперимент №1: начало

В первую очередь, нам нужно проверить, как и при каких условиях будет работать эта функция, поэтому начнем с довольно простенького примера. Вот код:

HTML

<div id="exp1container">
   <p>This is the container for the first experiment.</p>
</div>
<div id="exp1clone">
   <!-- Empty -->
</div>

CSS

#exp1container {
   height:50px; background:-moz-element(#exp1clone); }
#exp1clone {
   width:50px; height:50px; background-color:orange; }

Как видите, у #exp1container нет фонового цвета (background-color). Вместо него он использует в качестве фона элемент #exp1clone. Так как у второго элемента есть фон, то в первом контейнере он тоже появится.

Отлично! Кажется, работает. Обратите внимание на то, что функция автоматически повторяет шаблон (прямо как с фоновыми изображениями). Теперь, когда мы убедились в работоспособности функции, давайте посмотрим, как мы можем ее использовать.

Эксперимент №2: копируем фон

В предыдущем примере копия была пустая. Мне стало интересно, что будет, если ее чем-нибудь заполнить (например, текстом или изображением). Вот код, который я написал:

HTML

<div id="exp2container">
   <p>This is the container for the second experiment.</p>
</div>
<div id="exp2clone">
   <p>This clone has some text & an image <img src="/images/clone.png" alt="Clone" />.</p>
</div>

CSS

#exp2container {
   height:50px; background:-moz-element(#exp2clone); font-weight:bold; color:white; }
#exp2clone {
   width:150px; height:50px; background-color:orange; }

Как видите, я немного изменил значения свойств font и color, так как в противном случае, мы бы вообще не смогли ничего прочитать. А так - все работает! Более того, это настоящая копия: при выделении текста, его фон тоже выделиться.

Меня действительно поразил этот факт. Давайте посмотрим, что мы еще можем сделать.

Эксперимент №3: копируем checkbox

Затем мне стало интересно, какие события можно запускать. Я взял простой элемент HTML (checkbox), применил его как фон и выделил. Вот код:

HTML

<div id="exp3container">
   <p>This is the container for the third experiment.</p>
</div>
<div>
   <p>Check this checkbox: <input type="checkbox" id="exp3clone" /></p>
</div>

CSS

#exp3container {
   background:-moz-element(#exp3clone); }

Как вы уже догадались, это тоже сработало. Чекбоксы везде!

Эксперимент №4: свойства CSS

Следующим вопросом был такой: что случиться, если мы будем динамически изменять некоторые CSS свойства через jQuery. Я взял первый пример, при наведении курсора, он должен был поменять цвет (с помощью jQuery). Поменяется ли цвет фона контейнера?

HTML

<div id="exp4container">
   <p>This is the container for the fourth experiment.</p>
</div>
<div id="exp4clone">
   <!-- Empty -->
</div>

CSS

#exp4container {
   height:50px; background:-moz-element(#exp4clone); }
#exp4clone {
   width:50px; height:50px; background-color:orange; }

JavaScript

$("#exp4clone").hover(function() {
   $(this).css("background-color", "red");
}, function() {
   $(this).css("background-color", "orange");
});

Вот, что отобразилось при наведении курсора:

Да, похоже, что и это сработало. Но что, если мы не изменили текущий элемент, а сгенерировали событие?

Эксперимент №5: события CSS

Итак, с изменением текущего элемента, похоже, все работает. Но что если мы привяжем его к псевдо-селектору :hover? Возможен и другой селектор (так как -moz-element не связывает событие :hover). Давайте посмотрим, что из этого выйдет.

HTML

<div id="exp5container">
   <p>This is the container for the fifth experiment.</p>
</div>
<div id="exp5clone" class="left">
   <!-- Empty -->
</div>

CSS

#exp5container {
   height:50px; background:-moz-element(#exp5clone); }
#exp5clone {
   width:50px; height:50px; background-color:orange; }
#exp5clone:hover {
   background-color:red; }

Вот результат наведения курсора:

Похоже, все работает круто: даже события CSS будут обработаны, как следует.

Эксперимент №6: id элемента body

Итак, с маленькими блоками все работает отлично, но что, если огромный HTML элемент будет применен как фон? В следующем примере я добавил тегу body id и применил его, как фон.

HTML

<body id="body">
   <!-- All the HTML -->
 
   <div id="exp6container">
      <p>This is the container for the sixth experiment.</p>
   </div>
</body>

CSS

#exp6container {
   background:-moz-element(#body); }

Что особенно странно в этом примере, это то, что дочерние элементы назначают родительский элемент своим фоном. Кажется, работать не будет? Вообще-то, это сработает.

Эксперимент №7: Свойство border-image

Меня действительно поразило, что можно сделать с помощью данной функции. Но я решил зайти глубже и попробовать кое-что, о чем не сказано в спецификации. Firefox поддерживает еще одно свойство CSS3 - border-image. Давайте посмотрим, как отреагирует на него функция element():

HTML

<div id="exp7container">
   <p>This is the container for the seventh experiment.</p>
</div>
<div id="exp7clone">
   <img src="/images/clone.png" alt="Clone" />
</div>

CSS

#exp7container {
   -moz-border-image: -moz-element(#exp7clone) 0 16 0 16 stretch stretch; }

Итак, вместо функции url() вызовем element(). И вот результат:

Как видите, никакой рамки. Облом! Было бы полезно, если бы они добавили еще и это.

Эксперимент №8: анимация CSS

Свойство CSS3 transition позволяет нам создавать анимацию, которая также поддерживается в Firefox 4. Давайте посмотрим на фон, когда копия будет анимироваться:

HTML

<div id="exp8container">
   <p>This is the container for the eight experiment.</p>
</div>
<div id="exp8clone">
   <!-- Empty -->
</div>

CSS

#exp8container {
   height:50px; background:-moz-element(#exp8clone); }
#exp8clone {
   width:50px; height:50px; background-color:orange; -moz-transition-duration: 1s; }
#exp8clone:hover {
   background-color:red; -moz-transform: rotate(350deg) scale(0.8) rotate(-30deg); }

Как видите, при наведении курсора на копию, она повернется, поднимется, и поменяется в цвете. Что случится с контейнером?

Да, анимация проиграется несколько раз друг за дружкой. Выглядит неплохо, и я этому удивился.

Эксперимент №9: псевдо-элементы

Мы уже проверили CSS событие :hover, но мне стало интересно, будут ли работать псевдо-элементы. Я взял элементы :before и :after и применил кое-что к элементу content. Вот, что вышло:

HTML

<div id="exp9container">
   <p>This is the container for the nineth experiment.</p>
</div>
<div id="exp9clone">
   <!-- Empty -->
</div>

CSS

#exp9container {
   height:50px; background:-moz-element(#exp9clone); font-weight:bold; color:white; }
#exp9clone {
   width:50px; height:50px; background-color:orange; }
#exp9clone:before {
   content:":before"; }
#exp9clone:after {
   content:":after"; }

И вот, что получилось:

Да, даже псевдо-элементы работают отлично!

Эксперимент №10: элементы canvas

Как я говорил в самом начале, согласно спецификации, функция может быть очень полезна в комбинации с элементом canvas, так как он может рисовать элементы динамически. Конечно, все нужно проверить, поэтому я добавил элемент canvas с кое-какими рисунками при наведении курсора. Вот код:

HTML

<div id="exp10container">
   <p>This is the container for the tenth experiment.</p>
</div>
<canvas id="exp10clone" width="50" height="50" class="left"></canvas>

CSS

#exp10container {
   height:50px; background:-moz-element(#exp10clone); }
#exp10clone {
   background-color:orange; }

И вот результат:

Круто! Функция element() оправдала все мои ожидания.

Что вы думаете?

Что вы думаете насчет этой функции? Где она могла бы быть полезна? Можете ли вы добавить еще экспериментов (например, с видео)?

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/_B5a42xI5oM/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Экспериментируем с CSS функцией element() | | 2012-06-19 12:05:49 | | Статьи Web-мастеру | | Как я и говорил в предыдущей статье, после релиза Firefox 4 все вдруг резко начали загружать новые свойства CSS. Сразу после CSS селектора any() в движок Gecko добавилась новая прикольная CSS фича, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: