Наскоро Джон Ресиг, човекът зад jQuery и разработчик в Мозила, обяви в блога си едно от подобренията в следващата версия на Огнената лисица. Става дума за подобрения в поддръжката на CSS3 и по-специално за свойството border-image. Чрез използването на това свойство от CSS3 могат да се решат много проблеми около постигането на желания дизайн без нуждата от излишни елементи. Сетихте ли се за заоблените ъгли, които са толкова „Web2.0“? А разни заврънкулки, които придават архивен вид на страницата? Тези и други ефекти могат да се постигнат със CSS3, стандартния синтаксис е следния:

border-image: url("border.png") 27 27 27 27 round stretch;

Това, което работи в Сафари и ще е достъпно във Firefox 3.1 е:

-webkit-border-image: url("border.png") 27 27 27 27 round stretch;
-moz-border-image: url("border.png") 27 27 27 27 round stretch;

URL е адреса на картинката, четирите числа показват каква част от горната, дясната, долната и лявата част на картинката се използват, за да се оформят ъглите. Останалата част от картинката се използва за допълнителен фон на елемента. Последните две ключови думи указват как да се разтегнат и наложат частите от картинката за страните на елемента и за фона – могат да се разпънат или да се повтарят. За да разберете най-добре значението на различните части от декларацията и алгоритъма за разполагане на частите от картинката по рамката на елемента, прочетете спецификацията.

Това свойство, заедно с вече наличната отдавна поддръжка на border-radius (чрез -moz-border-radius в Мозила и -webkit-border-radius в Сафари) ще направи много техники, разработени за постигане само на заоблени ъгли, в отживелица. Като се започне от добавянето на допълнителни елементи, статично или чрез Javascript, фонови изображения или малки елементи с плътен фон, които да рисуват заоблянето, и се стигне до „плъзгащите се врати“, ското всичките ще останат в историята.

Етикети: border-image, CSS, CSS3