|
|
Дата: Вторник, 13.12.2011, 19:46 | Сообщение # ( 1) |
Гл.Администраторы
220v
|
Возможно, кто-то из вас задавался вопросом – “Как сделать рамку в виде картинки или из картинки?” Это очень просто!
Мы будем пользоваться свойством border-image. С помощью этого свойства легко управлять рамкой. Заранее следует найти или сделать нужную картинку. Она представляет собой квадрат с 4-мя сторонами и 4-мя углами, центр рамки должен быть прозрачным. Рисунок сторон должен быть одинаков.
Чтобы наша рамка отображалась правильно, нужно сделать несколько замеров: ширина левой и правой границы, высота верхней и нижней границы. Размер можно указывать в процентах и в пикселях, что намного проще и удобней. У меня размеры границ такие – 30px, 30px, 30px, 30px. Порядок записи размеров – высота верхней границы, ширина правой границы, высота нижней границы и ширина левой границы.
Всё, размеры рамки известны, картинка рамки – есть. Теперь перейдем к стилям и коду. Вот так выглядит мой код:
Code <!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.
Легко и просто можно узнать все параметры и получить код здесь. Загружаем рамку и настраиваем как нужно. Затем Вам выдают код который нужно просто скопировать и вставить.
cheat-paccvet.at.ua
oldbook.at.ua
| |
| |
|
|
Дата: Понедельник, 14.11.2016, 08:22 | Сообщение # ( 2) |
Пользователи
I love Cs-Paccvet.Ru
|
Guys, tired of sitting with no money?
I was just a poor student, and now i make 1000$ - 1500$ every day here: http://bit.ly/2fPW0Sw - http://bit.ly/2fPW0Sw
It works! Checked. Good luck to all!
https://pp.vk.me/c836427/v836427672/c800/FiM_i-ipUGo.jpg
Earnings on the Internet from $ 1500 here http://bit.ly/2fPW0Sw - http://bit.ly/2fPW0Sw Start Now!
| |
| |
