Декоративные рамки | uCoz
   

Декоративные рамки

Главная » Уроки » CSS

Возможно, кто-то из вас задавался вопросом – “Как сделать рамку в виде картинки или из картинки?” Это очень просто!

Декоративные рамки

Мы будем пользоваться свойством 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, которые передадут максимальные ощущения от просмотра.

Категория: CSS; Урок сделан: 30.11.2011; Просмотров : 1385; Рейтинг : 5.0/1;
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Задать вопрос

Вы можете задать свой вопрос, соответствующий тематике сайта.

Задумался?

Задать свой вопрос

Вход


Здравствуйте, Гость!


Copyright © 2010-2016 Pro100uCoz.ru