Экспериментируем с 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
|
Как я и говорил в предыдущей статье, после релиза Firefox 4 все вдруг резко начали загружать новые свойства CSS. Сразу после CSS селектора any() в движок Gecko добавилась новая прикольная CSS фича, |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.