Проблема с меню

[Carneol]

Добрый день!

Очень нуждаюсь в помощи с меню, буду рада любым советам.

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

Красным выделен, собственно, участок меню, который необходимо сверстать, а непонятки с левым участком с надписью "Friends Sign Up". В PSD-макете вся оранжевая область меню - одна целая картинка, причем, сделанная так, что ее на части разобрать очень проблематично, даже слишком проблематично, так что отрезать от картинки левую часть и прилепить в код бэкграундом я не смогу. Есть ли возможность как-то так сделать левую часть ресурсами только HTML и CSS? Так, чтоб и hover-эффект на эту часть меню был такой же формы. Либо, может, есть еще какие-то варианты?

Заранее спасибо, буду очень-очень благодарна за любую помощь..

[caprella]

Я бы, наверное, делала так:

- отказалась бы от градиента средствами css в пользу картинок из-за левого угла

- попробовала выделить этот угол (вручную очистить от внешнего желтого фона, а если фон однотонный, то и вместе с ним можно уголок вырезать)

- уголок этот писала бы фоном через :before

- если нужно делать ховер, то создать второй такой уголок, принудительно подгрузив его заранее

А еще можно попробовать такой вариант:

- блок Friends Sign Up сделать прямоугольником с градиентом

- относительно всего этого прямоугольника абсолютно спозиционировать png-картинку, которая прикрывала бы левый верхний угол (не знаю, понятно ли объяснила), - тогда градиент можно и css делать, а по ховеру его спокойно менять

[Carneol]

Очень интересное решение, как-то у меня даже фантазии на такое не хватило )) Спасибо большое, очень полезно!

[USF]

саму фигуру сделать можно

http://codepen.io/usf/pen/nAglC

а вот граница.. разве что тенями играться или граница + прозрачность + абсолютное позиционирование.

куда проще фон вырезать нормально

[Carneol]

саму фигуру сделать можно

http://codepen.io/usf/pen/nAglC

а вот граница.. разве что тенями играться или граница + прозрачность + абсолютное позиционирование.

куда проще фон вырезать нормально

Спасибо огромное!

[npofopr]

А вообще полистайте тот же кодепен или cssdesk

Там много разнообразных решений, вот тут не совсем ваше, но тоже всякие уголки + градиент.

+ зависит еще от того, для каких браузеров вы это делаете.

[Carneol]

А вообще полистайте тот же кодепен или cssdesk

Там много разнообразных решений, вот тут не совсем ваше, но тоже всякие уголки + градиент.

+ зависит еще от того, для каких браузеров вы это делаете.

Спасибо! Ссылки прекрасные, очень помогло, особенно codepen. А делать надо для ie8-10, chrome, Opera, FF

Edited February 1, 2013 by Carneol