Объемные рамки разной конфигурации. Без фотошопа!
|
|
Суббота, 01 Марта 2014 г. 21:46
+ в цитатник
Недавно я давала урок по изготовлению рамок с круглыми углами. Посмотреть его можно
здесь. А
Sergg62, подсказал как сделать рамки с разными углами и тенью. За это ему огромное спасибо!
Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю.
Даю коды готовых рамок и коды "скелетиков". Как ими пользоваться можете посмотреть в предыдущем уроке.
Расскажу теперь про эти рамки. Они с тенью и есть возможность делать углы разной закругленности, а значит и рамки разной конфигурации.
В принципе код для этих рамок-заготовок один. Можете взять его в окошке ниже.
Подставляя разные значения для "крутизны" углов, вы можете "гнуть" рамку как хотите. Вставляя разные заготовки друг в друга и меняя в их коде параметры, можно получить массу разнообразных вариантов рамок.
Вот смотрите.
Вместо моих слов ставите свои значения и URL картинок-фонов.
Radius: задает кривизну угла. В коде написано, например ВЕРХ ЛЕВЫЙ УГОЛ, значит подставляя цифру от 0 до 180, вы измените "округлость" верхнего левого угла. Значение 0 сделает угол прямым.
Можно изменить цвет тени-shadow: в коде стоит черный цвет-000000, вы можете заменить эти цифры на другие. Дальше идут цифры 6. Изменяя их в большую или меньшую стороны можно менять размер тени и ее отображение с одного или 3-х сторон.
Ниже даю код готовой рамки и рамки, в которой сохранены параметры, но только нет фонов, значений шрифта и ссылки на блог. Вы сможете подставить свои изображения-фоны.
Рамка 1
Код готовой рамки
Код "скелетика" рамки
Рамка 2
Код готовой рамки
Код "скелетика" рамки
Рамка 3
Код готовой рамки
Код "скелетика" рамки
Рамка 4
Код готовой рамки
Код "скелетика" рамки
Рамка 5
Вот такая необычная рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.
|
| Егорова Татьяна |
|
| |
|
|
|
Код готовой рамки
Код "скелетика" рамки
Рамка 6
Вот такая необычная рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.
|
| Егорова Татьяна |
|
| |
|
|
|
Код готовой рамки
Код "скелетика" рамки
Рамка 7
Вот такая необычная рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.
|
| Егорова Татьяна |
|
| |
|
|
|
Код готовой рамки
Код "скелетика" рамки
Рамка 8
Вот такая необычная рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.
|
| Егорова Татьяна |
|
| |
|
|
|
| |
|
Код готовой рамки
Код "скелетика" рамки
Метки:
рамки с кодами
рамки с круглыми углами
уроки
Процитировано 392 раз
Понравилось: 187 пользователям
-
187
Запись понравилась
-
392
Процитировали
-
3
Сохранили
-