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