|
Возможно, кто-то из вас задавался вопросом – “Как сделать рамку в виде картинки или из картинки?” Это очень просто!
Мы будем пользоваться свойством border-image. С помощью этого свойства легко управлять рамкой. Заранее следует найти или сделать нужную картинку. Она представляет собой квадрат с 4-мя сторонами и 4-мя углами, центр рамки должен быть прозрачным. Рисунок сторон должен быть одинаков.
Чтобы наша рамка отображалась правильно, нужно сделать несколько замеров: ширина левой и правой границы, высота верхней и нижней границы. Размер можно указывать в процентах и в пикселях, что намного проще и удобней. У меня размеры границ такие – 30px, 30px, 30px, 30px. Порядок записи размеров – высота верхней границы, ширина правой границы, высота нижней границы и ширина левой границы.
Всё, размеры рамки известны, картинка рамки – есть. Теперь перейдем к стилям и коду. Вот так выглядит мой код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Декоративные рамки</title>
<style>
.block {
border: 30px solid #c28b7b; /* IE */
min-height: 100px;
padding: 10px;
-moz-border-image: url(images/border.png) 30 30 30 30 repeat; /* Firefox */
-webkit-border-image: url(images/border.png) 30 30 30 30 repeat; /* Chrome и Safari 5 */
-o-border-image: url(images/border.png) 30 30 30 30 repeat; /* Opera 10.5 */
}
</style>
</head>
<body>
<div class="block">
3D телевизоры Panasonic
с LED-подсветкой.
</div>
</body>
</html>
Разбираем параметры (для тех кто не знает):
- border – тут указывается ширина, тип, цвет.
- min-height – минимальная высота рамки.
- padding – отступ рамки от текста со всех сторон.
- url(images/border.png) 30 30 30 30 repeat - относительный адрес к картинки, размеры, способ повторения рамки. Существует три способа: stretch, repeat, round. Стандартное значение – stretch. Safari и Chrome не поддерживают значение round и заменяют его на repeat.
Легко и просто можно узнать все параметры и получить код здесь. Загружаем рамку и настраиваем как нужно. Затем Вам выдают код который нужно просто скопировать и вставить.
На сайте hmobi.ru есть большой выбор 3d телевизоров Panasonic, которые передадут максимальные ощущения от просмотра. | 