Полупрозрачные модули с закруглеными углами

Discussion in 'Создание шаблона' started by GOoDm@n, Jul 18, 2008.

Thread Status:
Not open for further replies.
  1. GOoDm@n
    Offline

    GOoDm@n Недавно здесь

    Joined:
    May 30, 2007
    Messages:
    17
    Likes Received:
    1
    Gender:
    Male
    Здравствуйте!

    На днях сделал макет сайта в фотошопе. По замыслу в шаблоне должны быть модули с закругленными углами да ещё и полупрозрачные. Раньше далал закругленные углы модулей но тогда прозрачности не было. А щас мне надо что б модуль выглядел в любой позиции одинаково. Размер модуля по ширине нерастяжный. Я понимаю что усложнил себе жизнь )) но это мне надо как то сделать.

    Что бы вы посоветовали в таком случае? Заранее всем благодарен! ;)
     
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Joined:
    Mar 12, 2007
    Messages:
    5,094
    Likes Received:
    158
    Gender:
    Male
    Ответ: Полупрозрачные модули с закруглеными углами

    GOoDm@n, сначала div модуля с "нижней" заливкой, потом создаем эти закругленные полупрозрачные штуки и сохраняем в png, оформляем как обычный модуль.
     
  4. GOoDm@n
    Offline

    GOoDm@n Недавно здесь

    Joined:
    May 30, 2007
    Messages:
    17
    Likes Received:
    1
    Gender:
    Male
    Ответ: Полупрозрачные модули с закруглеными углами

    а эта "нижняя" заливка не будет пробиватся по углам? со скриптами номер не проходит
     
  5. Fanamura
    Offline

    Fanamura Доброта

    Joined:
    Mar 12, 2007
    Messages:
    5,094
    Likes Received:
    158
    Gender:
    Male
    Ответ: Полупрозрачные модули с закруглеными углами

    GOoDm@n, у меня не пробивала
     
  6. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Полупрозрачные модули с закруглеными углами

    Ничего не усложнил, фиксированная ширина модулей упрощает стоящую перед тобой задачу вдвое! ;D

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

    Внутри позиций модулей понадобится выставляешь стиль отображения "-2" (контейнер с заголовком третьего уровня внутри) или "-3" (четыре вложенных друг в друга контейнера с заголовком третьего уровня внутри). Использование "-2" стиля оправданно в случае, когда оформление заголовка модуля ограничивается лишь его текстовым оформлением, бэкграунд займет верхняя заливка модуля, в случае же, когда заголовок оформляется еще и графически, без использования "-3" стиля не обойтись.

    Картинки в известном тебе графическом редакторе можно изготовить как сразу с прозрачностью, так и без нее, поскольку прозрачность изображений можно задать также и при помощи CSS, для чего используются различные фильтры. Удачи!
     
    GOoDm@n likes this.
  7. GOoDm@n
    Offline

    GOoDm@n Недавно здесь

    Joined:
    May 30, 2007
    Messages:
    17
    Likes Received:
    1
    Gender:
    Male
    Ответ: Полупрозрачные модули с закруглеными углами

    Спасибо за помощь! Но хотелось бы и на примере увидеть;)

    А в этом случае по высоте модуль будет растяжен? Я раньше думал что надо как минимум 3 картинки:
    1. 2 верхних угла
    2. фон
    3. 2 нижних угла

    Это я так делал когда у меня не было прозрачности, а щас не получится так...

    Добавлено через 3 часа 50 минут
    всем спасибо! уже разобрался. порядок вывода изображений не тот был просто.:)
     
    Last edited: Jul 21, 2008
Thread Status:
Not open for further replies.

Share This Page

Loading...