habratchanka 23 мар 2008 в 20:29

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

1 мин

9.3K

CSS*

+46

Комментарии 41

not_ice 23 мар 2008 в 21:03

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

habratchanka 23 мар 2008 в 21:10

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

kulikoff 23 мар 2008 в 21:08

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

BaBL 23 мар 2008 в 21:25

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

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

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

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

Hello World!

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

habratchanka 23 мар 2008 в 21:33

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

BaBL 23 мар 2008 в 21:34

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

habratchanka 23 мар 2008 в 21:40

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

nihi_l_ist 23 мар 2008 в 21:25

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

Hitryi_Pryanik 23 мар 2008 в 21:41

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

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

НЛО прилетело и опубликовало эту надпись здесь

denver 23 мар 2008 в 21:42

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

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

habratchanka 23 мар 2008 в 21:52

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

Regis 23 мар 2008 в 22:03

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

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

vini 23 мар 2008 в 21:50

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

-1

moscow_beast 23 мар 2008 в 23:08

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

nikitad 23 мар 2008 в 22:14

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

НЛО прилетело и опубликовало эту надпись здесь

bubuq 24 мар 2008 в 01:38

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

Zeldar 24 мар 2008 в 10:42

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

bubuq 24 мар 2008 в 13:56

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

3al 23 мар 2008 в 22:47

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

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

habratchanka 23 мар 2008 в 22:57

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

Lain_13 23 мар 2008 в 23:43

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

BaBL 23 мар 2008 в 23:36

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

Lain_13 23 мар 2008 в 23:42

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

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

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

elfiki 24 мар 2008 в 00:17

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

Lain_13 24 мар 2008 в 01:31

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

Vanok 24 мар 2008 в 00:29

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

ganzer 24 мар 2008 в 08:07

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

Lain_13 27 мар 2008 в 12:32

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

homm 24 мар 2008 в 09:06

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

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

BaBL 24 мар 2008 в 10:00

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

homm 24 мар 2008 в 10:18

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

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

Hitchsd 24 мар 2008 в 09:23

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

ganzer 24 мар 2008 в 10:09

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

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

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

yarikus 24 мар 2008 в 11:27

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

homm 24 мар 2008 в 12:14

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

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

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

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