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

    Пока вебмастера спорят о браузерах и стандартах, WebKit занимается делом :) На этой неделе разработчики CSS3 представили новое свойство, названное background-clip:text, которое позволяет наложить любой фон/изображение на текст, границы и даже тень, при этом не перекрывая их, а реализуя нечто похожее на функцию наложения «маски» в Photoshop.

    Код выглядит так:



    Hello, world!

    Результат:
    css3.jpg
    Симпатично, неправда ли? :) Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

    Еще несколько скриншотов применения нового свойства можно посмотреть здесь:
    текст с тенью
    - текст с обводкой
    текст с подчеркиваением

    Источник

    Кросс-пост Блог для вебмастеров
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +1
      по-моему подобный декор — это уже удел SVG :/
        +1
        альтернатива все же очень неплохая ;)
        0
        Это все конечно здорово. Но только перспектива это очень далекая. И весьма сомнительная. CSS2 до сих пор поддерживается не полностью некоторыми браузерами.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            фоновая картинка - просто зеленый градиент, без текста. Текст задается так, как вы написали.
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                увидела, спасибо ;) Это должно было быть в комментах :)
            0
            Спасибо за пост, интересные решения нас ожидают в скором будушем..=)
              +6
              Нафик не нужно. Лучше бы кернинг реализовали. А цацки — удел графической части. Ну хорошо, допустим залил я градиентом текст. Однако рисованный текст (SVG или раст) куда лучше! Я же могу откернить/оттрекить, интересно расставить буквы, видоизменить их и т.д.

              CSS2 хотя бы осилили, там ещё непаханная целина! Это всё замечательно, я очень хочу, чтобы веб стал красивым. Только вот красота не с технологий начинается, а с прямых рук.
              • НЛО прилетело и опубликовало эту надпись здесь
                0
                Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

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

                    Так что пользователи - тоже могут. Правда очень небольшой их процент :-/
                    –1
                    голос от троллей, (артикли убрал str_replace, ато не поймете) а че мы ваш,, WebKit услышали пару - тройку месяцев назад,, а сейчас он по acid3 скоро всем жопу порвет на британский флаг, если не уже, где же он раньше был и кто эти люди?))
                    вопрос,, из зала)))
                      0
                      Здрасте! А Safari и Konqueror не первый год существуют, и Acid2 первыми прошли.
                      0
                      Жить становиться проще, еще бы поддерживали все браузеры...
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          Ну примерно так же, как без рамочек со скруглёнными углами... :)
                            0
                            Ну кстати стеб насчет рамочек с округленными углами считаю не особо корректным, потихоньку эта возможность проникает все глубже в вебе.
                              0
                              О чём собственно и речь. Стоит некой технологии получить некоторую известность, как все начинают сознавать, что они жили во тьме, и требовать у своего поставщика её реализации.
                          0
                          >>Наверняка, скоро пользователи Safari и FireFox смогут применить это свойство.

                          Свойство, которое в css выглядит как -webkit-background-clip в браузере с движком gecko?
                            0
                            background-clip - официально заявлен W3C http://www.w3.org/TR/css3-background/#th…. Webkit просто добавил значение text. Думаю и другие браузеры реализуют это
                              0
                              За такие "просто добавил" надо бить по рукам. См. мой пост ниже.
                            • НЛО прилетело и опубликовало эту надпись здесь
                              +4
                              Я не знаю кому как, но мне кажется делать "шоб було" - поганое занятие.
                              Почему они не могли внести соответствующее предложение в W3C?
                              Почему хотят поставить их перед фактом?

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

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

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

                              ИМХО, но это не просто бесполезная, это вредная модификация свойства background-clip.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                Что-то мне подсказывает, что многое из этого в ИЕ работало безо всяких там ЦСС3...
                                А вообще круто, что реализовали, молодцы.
                                Жаль что использовать это можно будет не очень скоро =(
                                  0
                                  В ИЕ это вообще через «одно место» было сделано. Причем через такое, что никто другой им воспользоваться не смог по самым разным причинам (от технических до лицензионных).
                                  0
                                  Все это замечательно, но для сегодняшней действительности соврешенно бесполезно. IE8 вон вообще еще только подбирается к уже существующим стандартам, а новые и вовсе еще не скоро изучит. Это при том, что большинство пользователей сидит на древнем IE6, который подобные вещи в жизни не переварит из-за своей полной технологической отсталости (IE7, кстати, тоже).
                                    +1
                                    Блять, теперь появятся сайты где за курсором будут ползать мухи и текст весь будет с градиентом и аутлайном.
                                      0
                                      Ну, предположим, первое я уже где-то видел. :)
                                      А вот второе я узреть тоже не желал бы...
                                      0
                                      Какое это имеет отношение к background?

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

                                          В том и суть, что там где нужен обычный фон, приходится зачем-то приделывать картинки.
                                        0
                                        Отлично! Спасибо за сайт =)
                                          0
                                          Как-то совсем не очевидно.
                                          Например ни в жизнь не догадаюсь как сделать
                                          вместо black в первой строчке background-url
                                          т.е. фон у div

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

                                          кстати, многое из этого видел совсем недавно реализовано через стандартный CSS, возможно с капелькой JS (искать влом)
                                            0
                                            Жалко, что половина браузеров не будут эту красоту показывать :-(
                                              0
                                              А представленный скрин — настоящий или это просто иллюстрация?

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


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



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

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

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

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

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

                                                  Самое читаемое