[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Вырезать элемент с тенью на макете
Rigel
Всем привет!
У меня на макете есть элемент с закругленными уголками и с красивой тенью, как мне вырезать его вместе с тенью или отдельно элемент и отдельно тень, чтобы не вырезался еще и фон под этим объектом? Подскажите пожалуйста, кто знает.

user posted image

Эффект тени наложен через свойство слоя Drop Shadow.



Спустя 17 минут, 12 секунд (21.11.2011 - 11:55) sebastjan написал(а):
один из многочисленных способов отобразить закругления и тень и чтоб ИЕ6 понимал.
При условии что ширина блока фиксированная.
Устанавливаем блок с тенью на прозрачном слое(в фотошопе)
Вырезаем полоску верхней - горизонтальной части блока.
Вырезаем полосу из середины- это будет БГ_фон блока(зальём потом -репит У по вертикали)
Вырезаем нижнию плоску с закруглениями низа блока.
--------
Ну а потом размещаем путём позиционирования ДИВ.
Минимум блоков ДИВ 3 штуки.
Применяем для ИЕ чтоб понимал ПНГ прозрачность фильтр, примеры в инети найдёшь.
Остальные броузеры сами всё подхватят.

Коротко и быстро, единственное, блок должен быть фиксированный, но как правило все блоки меню фиксированные по ширине.

Спустя 31 минута, 51 секунда (21.11.2011 - 12:27) Rigel написал(а):
Спасибо, буду пробовать! smile.gif

Спустя 49 минут, 5 секунд (21.11.2011 - 13:16) sebastjan написал(а):
Ещё уточнение, если основной фон страницы однотонный, не имеет градиента, тогда можно вырезать в фотошопе на основном фоне и сохринить в ЖПГ, не придёться фильтр прозрачности прикручивать к ПНГ.
Будет кросброузерно.

Спустя 3 часа, 43 минуты, 41 секунда (21.11.2011 - 17:00) inpost написал(а):
Rigel
Ширина фиксированная? Фон всегда фиксированный?

Спустя 1 час, 19 минут, 48 секунд (21.11.2011 - 18:20) Rigel написал(а):
inpost, да, блок с тенью фиксированный.

Еще проблема в том, что блок с тенью - это Shape

Спустя 23 минуты, 2 секунды (21.11.2011 - 18:43) inpost написал(а):
Сначала всё переведём в обычный вид:
Layer->FlatterImage . Теперь избавились от слоёв и других эффектов, просто вид такой, каков он есть.
Далее вырезаем центральную часть по ширине ВМЕСТЕ с тенью. Берёшь всю ширину, высоту в 1px. Далее лишь верхушку и низ вырезаешь ровно то тому месту, до куда идёт закругление (визуально это где-то пикселей 15-20 высота будет).

Всё готово. Вставляешь в див, ему задаёшь padding-top,padding-bottom, и 2 слоя с position:absolute, один к верху блока, другой к низу блока. Фон блока делаешь тем фоном в 1px.

Всё ясно?

Спустя 16 часов, 29 минут, 54 секунды (22.11.2011 - 11:13) Rigel написал(а):
inpost
Все понятно, работает. Правда, только со сплошным фоном, а у меня градиент будет, забыл на примере это показать rolleyes.gif
Про FlatterImage не знал, спасибо smile.gif

Спустя 32 минуты, 2 секунды (22.11.2011 - 11:45) inpost написал(а):
Rigel
Градиент не абсолютный, а лишь внизу до центральной части, и тоже самое вверху. Если на весь блок - то блок станет фиксированным. Если как я говорю, лишь какой-то отрезок - как делали раньше, только не по 15-20px, а побольше для градиента. Обычно для простого градиента хватает и 40-45px с обоих сторон, чтобы не ужимать текст и оставлять более-менее красивый дизайн.

Спустя 7 часов, 25 минут, 26 секунд (22.11.2011 - 19:10) Rigel написал(а):
inpost
Спасибо за помощь! :)

Чтобы не создавать новый топик, спрошу тут:

Как позиционировать элемент span вертикально по центру div?
display: table-cell;
vertical-align: middle;

Не помогают :unsure:

Спустя 3 часа, 45 минут, 28 секунд (22.11.2011 - 22:56) sebastjan написал(а):
smile.gif
Это надо стилю ДИВ задать чтб он по центру позиционировал.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.