15.07 / Web
Выбираем инструмент Raunded Rectangle Tool 
С помощью направляющих отмеряем одинаковое расстояние от фигуры. Идем в Edit Free Transform Path, либо жмем Ctrl+T Удерживая клавишу Ctrl тянем нижние точки к направляющим. Что бы точка не смещалась вниз/вверх удерживаем еще и клавишу Shift После расстановки точек, жмем Enter
Направляющее можно убрать (Ctrl+:) они нам больше не понадобятся.Удерживая клавишу Ctrl, в панели слоев кликаем по слою с фигурой. Создаем новый слой (вверху фигуры) — иконка 
в панели слоев. Выбираем инструмент 
Gradient Tool (G) Выставляем цвета градиента от #cccccc до #000000 Применяем градиент, снимаем выделение Ctrl+D Кликаем по слою с фигурой правой кнопкой — выбираем Blending Options, выставляем Stroke 2px цвет черный #000000
Инструментом Rectangle Tool 
внизу закладки пристраиваем черную полоску. Переключаемся на инструмент Move Tool (V) Держим клавишу Alt берем черную полоску и тащим вверх. Проще говоря, дублируем слой.
Переходим в Blending Options (^) нового слоя Отмечаем Gradient Overlay Выставляем цвета от #e9e9e9 до #cccccc Storke 1px #b2adad, чуть темнее, чем фон. Теперь наведите порядок в строю слоев — то, что должно быть вверху — вверх, то что внизу — вниз ) Ну и пишем текст )
Навигация web2.0
Направляющее можно убрать (Ctrl+:) они нам больше не понадобятся.
в панели слоев. Gradient Tool (G)
внизу закладки пристраиваем черную полоску.
Комментарии:
31 августа 2007 - 11:10, UltraPixel (вст)
На CSS можно кодом (!) делать такое…
Даю пример с углами, но и трапеции делаются также…
Вариант с картинкой хуже т.к. добавляет запросов (картинки могут не прогрузиться) и не работают у пользователей с отключенными картинками.
http://www.cssplay.co.uk/boxes/krazy.html
http://www.spiffycorners.com/
А самый простой пример разметкой при помощи тега «b»:
html:
<div id="box-3">
<b class="r3"></b ><b class="r1"></b ><b class="r1"></b >
<div class="box">
<h3>Округляем до 3px</h3>
<p>тест.тест.тест.тест.тест.</p>
</div>
<b class="r1"></b ><b class="r1"></b ><b class="r3"></b >
</div>
css:
.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#box-3 .box, #box-3 b {
background-color: #CCCCCC;
}
.box {
padding:1em;
}
ответить
На CSS можно кодом (!) делать такое…
Даю пример с углами, но и трапеции делаются также…
Вариант с картинкой хуже т.к. добавляет запросов (картинки могут не прогрузиться) и не работают у пользователей с отключенными картинками.
http://www.cssplay.co.uk/boxes/krazy.html
http://www.spiffycorners.com/
А самый простой пример разметкой при помощи тега «b»:
html:
<div id="box-3">
<b class="r3"></b ><b class="r1"></b ><b class="r1"></b >
<div class="box">
<h3>Округляем до 3px</h3>
<p>тест.тест.тест.тест.тест.</p>
</div>
<b class="r1"></b ><b class="r1"></b ><b class="r3"></b >
</div>
css:
.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
#box-3 .box, #box-3 b {
background-color: #CCCCCC;
}
.box {
padding:1em;
}
ответить
Очень даже неплохо:)
Конечно, очень просто… но под менюху как раз