Как сделать разрезанную картинку?

[psywalker]

А ответьте пожалуйста,мне это очень важно,я уже давно мучаюсь:
А как на третьей картинке http://htmlbook.ru/content/?id=77 ,на шапке 2-ая слева(зелёная)тыква изначально была не прямоугольная,а с касой линией снизу?Я в фотошопе всё перепробовал,у меня постоянно получаеться прямоугольная картинка,а мне принципиально нужно,чтобы моя картинка была такая,как я её вырезал. Напишите пожалуйста,как это сделать,может с помощью CSS это возможно или ещё как нить?

[SkyM@n]

Варианты:
1. PNG+CSS
2. PNG+JS

[psywalker]

1-ый вариант PNG+CSS..а распиши мне плиз прям по нотам,как это сделано?

[Johnatan]

А кто сказал, что там "косая" граница? Там всё ровно... Просто там есть прозрачное пространство. В фотошопе вырезай как тебе нужно и накладывай куда тебе нужно. Всё будет так же выглядеть.

[psywalker]

Даа..хорошобы ещё знать.как это сделать..) Если есть возможность,распиши плиз,куда нажать и т.д

[SkyM@n]

Не умеешь юзать фотошоп?
Так и скажи. Тогда тебе - в другую ветку. Тут - ХТМЛ-программирование.

[5naip]

необязательно png прозрачность творить.
можно обычную гифку поставить туда.Обыкновенной прямоугольной формы.
все дело в том - как её раскрасить...

[Johnatan]

5naip
Тут ты не прав. Ведь можно вместо гифки вставить обычный PNG. Обыкновенной прямоугольной формы...

[5naip]

что-то я несовсем понял твой пост...
Отвечу как понял: дак а смысл?суть действия не изменится, а, насколько я помню - png весит больше gif(сохраненный для web).Тем более,что там всего ~3 цвета...

[SkyM@n]

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

а распиши мне плиз прям по нотам,как это сделано?

В сети полно материала на эту тему, но так и быть...
Но для этого:
1. Учишь псевдокласс hover (CSS )
2. Учишься работать в фотошопе. Тему фотошопа посвящено множественное кол-во форумов, книг, в том числе в вышеуказанном мной разделе можно обсудить работу с тем же фотошопом
3. Позже сделаю и покажу, как вот тут