border-image в CSS3

1
Фев
2010

border-image в CSS3

Здравствуйте, дорогие друзья!) Я продолжаю линейку постов на тему CSS3 и сегодня хочу Вам предложить рассмотреть новую (может и не для всех) возможность облегчения создания кнопок (и не только!) для Ваших веб-страничек. И это свойство называется "border-image".

Demo border-image CSS3

Что с помощью него можно создать?

Ответ простой - красивый объект, границы которого будут созданы с помощью картинки.

Возьмем и нарисуем, к примеру, вот такую форму:

bord-im2

Как Вы видите, это границы кнопки. С помощью свойства "border-image" мы растянем эту форму по ширине текста, который будет внутри, и в результате получим полноценную кнопочку с красивыми закругленными углами, при этом нам не понадобится резать каждый уголок кнопки, а потом с помощью HTML-кода склеивать все эти части, чтобы получить кнопку. Все это оставим в прошлом и реализуем нашу идею одной строчкой кода с помощью CSS3!)

Так как каждый популярный браузер понимает правила по-своему, мы напишем следующий универсальный код:

.myimage {
border-image: url(bord-im2.png) 10;
-webkit-border-image: url(bord-im2.png) 10;
-moz-border-image: url(bord-im2.png) 10;
}

Для того, чтобы картинка заполнялась в форме нужно прописать "round":

.myimage {
border-image: url(bord-im2.png) 10 round;
-webkit-border-image: url(bord-im2.png) 10 round;
-moz-border-image: url(bord-im2.png) 10 round;
}

А если Вам надо, чтобы растягивалась, нужно прописать "stretch":

.myimage {
border-image: url(bord-im2.png) 10 stretch;
-webkit-border-image: url(bord-im2.png) 10 stretch;
-moz-border-image: url(bord-im2.png) 10 stretch;
}

По умолчанию установлен "stretch".

На данный момент это свойство поддерживают браузеры: Google Chrome, Safari, Firefox 3.6 (по-моему, начиная с версии 3.1 это свойство уже поддерживается). К сожалению Opera 10.10 еще не понимает свойство "border-image", а за IE 9 просто молчу :-D

Download (скачать) border-image CSS3

Вот такое вот интересное свойство нас ждет в CSS3. В следующих постах я опишу еще несколько интересных свойств в 3-м CSS-е. Так что, stay in touch! ;)

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (18) к “border-image в CSS3”

  1. Жека пишет:

    Круто! 8)

  2. galaxy пишет:

    чет, Вы Легич, нахалтурили с описаниями :Р
    что за параметр 10? и что там нам нужно чтоб ростягивалось? чет я не понял :D

  3. Илларион пишет:

    Извините за любопытство, но отступы от чего?

    • Oleg Mykhailenko пишет:

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

  4. Алексей пишет:

    Спасибо за статью. Такой вопрос: с помощью этого ли атрибута была сделана затемненная граница для “тела” сайта? Хотелось бы узнать, как именно, если не секрет:)

    • Oleg Mykhailenko пишет:

      Не совсем понял о какой границе Вы говорите =)

      • Алексей пишет:

        О границе центральной части страницы, обрамленной вычурным:) рисунком сверху и снизу, фон которой белого цвета и в которой непосредственно находится вся инфа. А границы по бокам затемнены, что создает эффект “приподнятости” центрального страницы над остальным сероватым фоном. Объяснил, как смог =)

        • Oleg Mykhailenko пишет:

          Понял =)
          Нет, это затемнение сделано не с помощью “border-image”. Это вырезанная полосочка высотой в 1px и размножена по высоте с помощью “repeat-y”.

        • Алексей пишет:

          Благодарю за разъяснение =)

    • Oleg Mykhailenko пишет:

      Ю а велкам! ;)

  5. Kaktus пишет:

    пришел сюда именно за этим. был бы рад картинке-примеру для стренч? здесь ее точно не хватает

    • Oleg Mykhailenko пишет:

      Вы, наверное, невнимательно прочитали статью, я писал, что “По умолчанию установлен ”stretch“. И тот пример, который приведен в статье, он, как раз, со “stretch”.

  6. Александр пишет:

    Классный сайт сделал Олег, много интересного для себя нашел информации. Спасибо тебе =)

  7. Андрей пишет:

    Народ, помогите плз. через border-image проблем не возникает, но мне надо определить только left и right с разными картинками (возможно одну отразить по горизонтали). При этом код не воспринимается, и границы не отображаются вообще. использую:
    border-left-image: url() 0 0 0 x;
    border-right-image: url() 0 x 0 0;

    В чём может быть касяк?