Цитата сообщения Егорова_Таня
РАМКИ С ОБЪЕМНЫМ ФОНОМ.
Не так давно здесь! и здесь! я давала уроки как делать без фотошопа рамки с круглыми углами и тенью. Сегодня даю небольшое дополнение к предыдущим урокам. Расскажу как сделать объемно-выпуклым центральный фон и вообще любой фон в рамке. Сравните. Рамка А без эффекта объема, рамка Б с таким эффектом и рамка В с усиленным эффектом.
РАМКА А:
РАМКА Б:
РАМКА В:
Можно сделать рамку и с прямыми углами:
Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю. Я дам "скелетик" кода такой рамки, чтобы подставляя свои фоны и параметры, вы могли без особого труда собрать свою рамочку и объясню как им пользоваться.
ИТАК:
Ниже в окошках даю коды готовых рамочек и "скелетики" , которые можно использовать в любых вариантах. Их можно использовать как самостоятельную рамку, а можно вставлять в прямоугольные рамки или в такие же рамки с закругленными углами, или в такие круглые рамки вставлять прямоугольные. Можно брать заготовки и из этого урока и из предыдущих. Все зависит от вашей фантазии.
РАМКА с круглыми углами:
Код готовой рамки:
Код "скелетика" рамки:
РАМКА с прямыми углами:
Код готовой рамки:
Код "скелетика" рамки:
Пользоваться "скелетиками" очень просто. Берете из окошка код и вместо моих слов ОБВОДКА, ФОН 1, ЦВЕТ ШРИФТА, РАЗМЕР ШРИФТА ставите свои фоны и значения. Так же вставляете ССЫЛКУ НА ВАШ БЛОГ и ВАШУ ПОДПИСЬ. Как изменить кривизну углов вы можете посмотреть в предыдущих уроках по ссылке в начале поста.
За объем отвечают вот такие параметры в коде рамки- box-shadow: 5px 5px 40px #000000 inset;. Цифры можно менять в большие и меньшие стороны. Цифра 5 отвечает за глубину объема(см. фото А-1), а цифра 40 за плавность перехода объема(см. фото А-2). Тень в "скелетиках" установлена черного цвета, но его можно поменять на любой другой. Для этого надо изменить 6 цифр 000000(см. фото А-3) на нужный код цвета.
Вот такая рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.
|
|
|
|
Егорова Татьяна |
|
Код готовой рамки:
Код "скелетика" рамки:
Вот такая необычная рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.
|
|
Егорова Татьяна |
|
|
|
|
|
|
|
|
|
Код готовой рамки:
Код "скелетика" рамки: