Продолжаю серию статей на тему нововведений в CSS3. На этот раз речь пойдет о Border Image. Вкратце это возможность указывать для границ объекта не только толшину и стиль линии, но и указывать в качестве линии картинку!
Синтаксис таков:
border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat;
Как вы видите синтаксис похож на background-image, поэтому не должен вызвать проблем. Так же можно указать так, чтобы картника не заполнялась, а растягивалась. Для этого нужно добавить опцию stretch.
Можно также задать явно картники и для отдельных границ:
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
Поддерживается в Firefox 3.1, Safari и Chrome.
Инфа по теме:
в
Так и будешь кусочками баловать ? Есть где-то мануал по CSS3 ?
в
а Опера поддерживает ?
в
Оуу CSS3 с ним гемороя иногда порой бывает достаточно.А кстате разве в браузерах уже не поддерживается ?
Я слышала, что вроде да..или то если позже CSS3..:\
в
css3 принес много интересного. Остаются вопросы поддержки этого стандарта разными браузерами и процент такой поддержки. Сегодня этот стандарт поддерживается лишь очень небольшим числом установленных у пользователей браузеров: Opera(0.7% из них половина устаревшие версии), FireFox 3.1(0%), IE 8 – 0%. Получается, что новые возможности css сегодня не используются и будут использоваться лишь спустя год или два – в 2010-2011 годах.
Хотя информация о новинках интересна.
в
Спасибо, будем пользоваться.
в
Я себе сделал цитаты на своём блоге в таком стиле. Удобная реализация! CSS3 рулит!
в
отличные возможности, но жаль не дня сегодняшнего
в
Спасибо, буду пробовать!
в
Как вы видите синтаксис похож на background-image, поэтому не должен вызвать проблем
в
Где-то читал, так там кто-то говорил, что верстальщикам можно будет полностью перейти на html 5 (наверное и на css3) году к 2020-ому
в
[quote comment="2190"]Как вы видите синтаксис похож на background-image, поэтому не должен вызвать проблем[/quote]
Ага, не должен, канеш…сами то пробовал ? Скока с ним мороки ((
в
Да какой там css3, если ещё многие устаревшие браузеры поддерживают не все фишки css2, а требования заказчика делать вёрстку кроссбраузерной это закон и никуда не денешся. А новые возможности css3 можно будет увидеть ещё не скоро.
в
Да CSS, это сила, я в своих сайтах стараюсь как можно больше его использовать, по моему красиво получается, а синтаксис действительно, только в опере лучше смотрятся все css навороты, объемнее что-ли..
в
По-моему это пока красивая сказка. Ни за что не рискнула бы клиенту делать сайт с css3
Начнуться проблемы с кроссбраузерностью и тп.
Проходили…
Это не новый стандарт, это просто направление..
в
>действительно, только в опере лучше смотрятся все css навороты, объемнее что-ли.
смешно..г-н спамер
А правда, зачем любоваться этими css3?
если я не смогу их применить для своих заказчиков (студия у меня)
в
АВТОРУ блога
1. при комментах попадаешь на проблемы с бд
502 ошибка
2. капча у вас всегда с ответом 14?))
в
Пока прийдет этот сиэсэс3.. а пока только остаетса думать что всё могло бы быть проще
в
CSS3 достаточно мощный инструмент, вот только неизвестно когда мы дождёмся его полноценную поддержку основными популярными браузерами!
в
Дождемся, даст Бог.
в
быстрей бы уже эта технология заработала)
в
Пробовал аналогичное на CSS2, но там только точки и тире получаются в «обводке». Спасибо за этот пост.
в
Мммдааа… придется ждать и надеется, чтоб браузеры поскорее начали поддерживать новинки (((