Форум Сайтостроение Веб-строительство

Посоветуйте как правильно порезать картинку для html

[Удален]
680

Есть такое меню с закругленными краями. Намекните как его правильно в html вставить. Может как-то можно заменить картинку, элементами html?

J
На сайте с 02.02.2009
Offline
53
jumash
#1

для закругленных уголков

Картинку режете на мелкие составляющие - чтоб тянулись хорошо.

И вперёд, экспериментировать! :)

Или же тупо порезать на уголки - получится 11 картинок, если не ошибаюсь

[Удален]
#2

От спасибо! :)

[Удален]
#3

Я обычно делаю не так. Если высота верхнего заголовка фиксирована - то его на две картинки.

Первая - левая часть со сруглением кладется на слой, слой под ним (той же высоты) заливается паттерном на основе однопиксельной (в ширину) полосочки, полученной из градиента, и все это размером тыща-две пикселей, а правый уголок как есть во вторую картинку кладется. В PNG это займет пару килобайт. Потом верстается див в диве, у внешнего - правый уголок и padding-right, у второго на бекграунд длинную картинку и паддинг лефт, а потом сразу текст.

Пример (правда края квадратные, но есть полутень, поэтому методика та же):

- правый край

- внутренний див

И будет тянуться по ширине.

При создании простых скругленных рамочек - в вашем случае нижняя часть меню - есть два варианта, то создается картинка, состоящая из 4х сложенных уголков (получается что-то типа квадрата (если края с большим радиусом скругления,то 4хрогая циклоида - "звездочка"), повернутый под 45 градусов), и верстается 4 вложенных дива - у каждого один бекграунд но разный background-position (по углам), а у внешнего еще нужный border.

При неизвестном фоне (с полутенями там и прочая), все гораздо хуже. Чтобы сделать такую штуку тянущуюся во все стороны по контенту, мне потребовалось 6 картинок.

Левый верхний угол+верхняя рамка - удлиненное на пару тысяч пикселей,

Правый верхний угол - одна картиночка

Вертикальная левая граница+ фон под ней(если есть) растянутый также "с запасом" - по высоте текстуры (как правило 1 пиксель)

Вертикальная правая граница - одна картиночка тоже по высоте

левый нижний угол+растянутая нижняя рамка

правый нижний угол.

Соответственно вложенных 6 дивов с паддингами

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

[Удален]
#4

Спасибо! мне приглянулась идея с четырьмя углами. Будуд пробовать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий