У меня на макете есть элемент с закругленными уголками и с красивой тенью, как мне вырезать его вместе с тенью или отдельно элемент и отдельно тень, чтобы не вырезался еще и фон под этим объектом? Подскажите пожалуйста, кто знает.
Эффект тени наложен через свойство слоя Drop Shadow.
Спустя 17 минут, 12 секунд (21.11.2011 - 11:55) sebastjan написал(а):
один из многочисленных способов отобразить закругления и тень и чтоб ИЕ6 понимал.
При условии что ширина блока фиксированная.
Устанавливаем блок с тенью на прозрачном слое(в фотошопе)
Вырезаем полоску верхней - горизонтальной части блока.
Вырезаем полосу из середины- это будет БГ_фон блока(зальём потом -репит У по вертикали)
Вырезаем нижнию плоску с закруглениями низа блока.
--------
Ну а потом размещаем путём позиционирования ДИВ.
Минимум блоков ДИВ 3 штуки.
Применяем для ИЕ чтоб понимал ПНГ прозрачность фильтр, примеры в инети найдёшь.
Остальные броузеры сами всё подхватят.
Коротко и быстро, единственное, блок должен быть фиксированный, но как правило все блоки меню фиксированные по ширине.
При условии что ширина блока фиксированная.
Устанавливаем блок с тенью на прозрачном слое(в фотошопе)
Вырезаем полоску верхней - горизонтальной части блока.
Вырезаем полосу из середины- это будет БГ_фон блока(зальём потом -репит У по вертикали)
Вырезаем нижнию плоску с закруглениями низа блока.
--------
Ну а потом размещаем путём позиционирования ДИВ.
Минимум блоков ДИВ 3 штуки.
Применяем для ИЕ чтоб понимал ПНГ прозрачность фильтр, примеры в инети найдёшь.
Остальные броузеры сами всё подхватят.
Коротко и быстро, единственное, блок должен быть фиксированный, но как правило все блоки меню фиксированные по ширине.
Спустя 31 минута, 51 секунда (21.11.2011 - 12:27) Rigel написал(а):
Спасибо, буду пробовать!
Спустя 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
Еще проблема в том, что блок с тенью - это Shape
Спустя 23 минуты, 2 секунды (21.11.2011 - 18:43) inpost написал(а):
Сначала всё переведём в обычный вид:
Layer->FlatterImage . Теперь избавились от слоёв и других эффектов, просто вид такой, каков он есть.
Далее вырезаем центральную часть по ширине ВМЕСТЕ с тенью. Берёшь всю ширину, высоту в 1px. Далее лишь верхушку и низ вырезаешь ровно то тому месту, до куда идёт закругление (визуально это где-то пикселей 15-20 высота будет).
Всё готово. Вставляешь в див, ему задаёшь padding-top,padding-bottom, и 2 слоя с position:absolute, один к верху блока, другой к низу блока. Фон блока делаешь тем фоном в 1px.
Всё ясно?
Layer->FlatterImage . Теперь избавились от слоёв и других эффектов, просто вид такой, каков он есть.
Далее вырезаем центральную часть по ширине ВМЕСТЕ с тенью. Берёшь всю ширину, высоту в 1px. Далее лишь верхушку и низ вырезаешь ровно то тому месту, до куда идёт закругление (визуально это где-то пикселей 15-20 высота будет).
Всё готово. Вставляешь в див, ему задаёшь padding-top,padding-bottom, и 2 слоя с position:absolute, один к верху блока, другой к низу блока. Фон блока делаешь тем фоном в 1px.
Всё ясно?
Спустя 16 часов, 29 минут, 54 секунды (22.11.2011 - 11:13) Rigel написал(а):
inpost
Все понятно, работает. Правда, только со сплошным фоном, а у меня градиент будет, забыл на примере это показать
Про FlatterImage не знал, спасибо
Все понятно, работает. Правда, только со сплошным фоном, а у меня градиент будет, забыл на примере это показать
Про FlatterImage не знал, спасибо
Спустя 32 минуты, 2 секунды (22.11.2011 - 11:45) inpost написал(а):
Rigel
Градиент не абсолютный, а лишь внизу до центральной части, и тоже самое вверху. Если на весь блок - то блок станет фиксированным. Если как я говорю, лишь какой-то отрезок - как делали раньше, только не по 15-20px, а побольше для градиента. Обычно для простого градиента хватает и 40-45px с обоих сторон, чтобы не ужимать текст и оставлять более-менее красивый дизайн.
Градиент не абсолютный, а лишь внизу до центральной части, и тоже самое вверху. Если на весь блок - то блок станет фиксированным. Если как я говорю, лишь какой-то отрезок - как делали раньше, только не по 15-20px, а побольше для градиента. Обычно для простого градиента хватает и 40-45px с обоих сторон, чтобы не ужимать текст и оставлять более-менее красивый дизайн.
Спустя 7 часов, 25 минут, 26 секунд (22.11.2011 - 19:10) Rigel написал(а):
inpost
Спасибо за помощь! :)
Чтобы не создавать новый топик, спрошу тут:
Как позиционировать элемент span вертикально по центру div?
Не помогают :unsure:
Спасибо за помощь! :)
Чтобы не создавать новый топик, спрошу тут:
Как позиционировать элемент span вертикально по центру div?
display: table-cell;
vertical-align: middle;
Не помогают :unsure:
Спустя 3 часа, 45 минут, 28 секунд (22.11.2011 - 22:56) sebastjan написал(а):
Это надо стилю ДИВ задать чтб он по центру позиционировал.