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