Новое в CSS3: background-clip: text

[@not_ice]

по-моему подобный декор — это уже удел SVG :/

[@habratchanka]

альтернатива все же очень неплохая ;)

[@kulikoff]

Это все конечно здорово. Но только перспектива это очень далекая. И весьма сомнительная. CSS2 до сих пор поддерживается не полностью некоторыми браузерами.

[@BaBL]

А какой текст надо вписать в дивы, чтоб увидеть, скажем, "MyCompany?"

просто если для:

<div>
This background clips to the text.
</div>

результатом выдается

Hello World!

хотелось бы узнать побольше про этот генератор символов.

[@habratchanka]

фоновая картинка - просто зеленый градиент, без текста. Текст задается так, как вы написали.

[@BaBL]

я не про то =) просто код "This background clips to the text.", а результатом его выполнения представлен "Hello World!" =))

[@habratchanka]

увидела, спасибо ;) Это должно было быть в комментах :)

[@nihi_l_ist]

Спасибо за пост, интересные решения нас ожидают в скором будушем..=)

[@Hitryi_Pryanik]

Нафик не нужно. Лучше бы кернинг реализовали. А цацки — удел графической части. Ну хорошо, допустим залил я градиентом текст. Однако рисованный текст (SVG или раст) куда лучше! Я же могу откернить/оттрекить, интересно расставить буквы, видоизменить их и т.д.

CSS2 хотя бы осилили, там ещё непаханная целина! Это всё замечательно, я очень хочу, чтобы веб стал красивым. Только вот красота не с технологий начинается, а с прямых рук.

[@denver]

Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

Пользователи вряд ли смогут применить...

[@habratchanka]

отчего нет? :) вебмастер уже и не пользователь? :)

[@Regis]

Без проблем: на любой сайт куда угодно что угодно можно навесить через GreaseMonkey и ему подобных :)

Так что пользователи - тоже могут. Правда очень небольшой их процент :-/

[@vini]

голос от троллей, (артикли убрал str_replace, ато не поймете) а че мы ваш,, WebKit услышали пару - тройку месяцев назад,, а сейчас он по acid3 скоро всем жопу порвет на британский флаг, если не уже, где же он раньше был и кто эти люди?))
вопрос,, из зала)))

[@moscow_beast]

Здрасте! А Safari и Konqueror не первый год существуют, и Acid2 первыми прошли.

[@nikitad]

Жить становиться проще, еще бы поддерживали все браузеры...

[@bubuq]

Ну примерно так же, как без рамочек со скруглёнными углами... :)

[@Zeldar]

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

[@bubuq]

О чём собственно и речь. Стоит некой технологии получить некоторую известность, как все начинают сознавать, что они жили во тьме, и требовать у своего поставщика её реализации.

[@3al]

>>Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

Свойство, которое в css выглядит как -webkit-background-clip в браузере с движком gecko?

[@habratchanka]

background-clip - официально заявлен W3C http://www.w3.org/TR/css3-background/#th…. Webkit просто добавил значение text. Думаю и другие браузеры реализуют это

[@Lain_13]

За такие "просто добавил" надо бить по рукам. См. мой пост ниже.

[@BaBL]

в гекко оно будет -mozilla-background-clip, а когда и другие дойдут до кондиции, и пойдут релизы FF3.5 или FF4 каких-нибудь, появится альясы на background-clip

[@Lain_13]

Я не знаю кому как, но мне кажется делать "шоб було" - поганое занятие.
Почему они не могли внести соответствующее предложение в W3C?
Почему хотят поставить их перед фактом?

Ну а теперь внимание!

Вопрос 1:
Мне приспичило текст написать с одной фактурой, сделанной через это свойство, а фон под текстом — другой. Что же это получается? Я могу сделать текст либо НА фоне, либо ФОНОМ, но не вместе!

Вопрос 2:
Объясните мне непонятливому, с какой такой радости background стал отвечать за отрисовку чего-то на нём?

ИМХО, но это не просто бесполезная, это вредная модификация свойства background-clip.

[@elfiki]

Что-то мне подсказывает, что многое из этого в ИЕ работало безо всяких там ЦСС3...
А вообще круто, что реализовали, молодцы.
Жаль что использовать это можно будет не очень скоро =(

[@Lain_13]

В ИЕ это вообще через «одно место» было сделано. Причем через такое, что никто другой им воспользоваться не смог по самым разным причинам (от технических до лицензионных).

[@Vanok]

Все это замечательно, но для сегодняшней действительности соврешенно бесполезно. IE8 вон вообще еще только подбирается к уже существующим стандартам, а новые и вовсе еще не скоро изучит. Это при том, что большинство пользователей сидит на древнем IE6, который подобные вещи в жизни не переварит из-за своей полной технологической отсталости (IE7, кстати, тоже).

[@ganzer]

Блять, теперь появятся сайты где за курсором будут ползать мухи и текст весь будет с градиентом и аутлайном.

[@Lain_13]

Ну, предположим, первое я уже где-то видел. :)
А вот второе я узреть тоже не желал бы...

[@homm]

Какое это имеет отношение к background?

Лeчше бы сделали background-opacity, а то вопросы на форуме, о том, как сделать прозрачный фон у элемента и непрозрачный контент сплош и рядом.

[@BaBL]

не поможет, в ИЕ это появится после нашей смерти. Я сейчас через AlphaImageLoader вставляю PNG'шки полупрозрачным фоном (хотя в ИЕ от этого лаги начинаются, но как еще то?), т.е., какое-никакое но все ж решение. Пусть лучше сделают нормальное отображение полупрозрачных PNG, наконец, тогда эта проблема частично решится.

[@homm]

Хотя-бы наши дети буду жить в счастливом мире :)

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

[@Hitchsd]

Отлично! Спасибо за сайт =)

[@ganzer]

Как-то совсем не очевидно.
Например ни в жизнь не догадаюсь как сделать
вместо black в первой строчке background-url
т.е. фон у div

логичным кажется:
text-background-url
border-background-url

кстати, многое из этого видел совсем недавно реализовано через стандартный CSS, возможно с капелькой JS (искать влом)

[@yarikus]

Жалко, что половина браузеров не будут эту красоту показывать :-(

[@homm]

А представленный скрин — настоящий или это просто иллюстрация?

Если настоящий, то у меня много вопросов, как именно, начиная с какой точки, и с каким масштабом накладывается изображение на разные элементы?


Если взглянуть на картинку под лупой



Слева — бордер и скопированный участок из «ноги» слова «Hello». Низ примерно совпадает, верх — нет… Какой-то нереальный простор для неверного трактования стандартов.

[@pratavetra]

Возникла необходимость сделать что-то подобное в CSS2.

Подскажите, в какую сторону копать, желательно с примерами?

Спасибо. :)

[@myadzel]

Попробовал эмулировать эту свойство на инлайн-svg для Mozilla и Opera:
www.myadzel.ru/tests/html/text-background/

Вроде получилось.