Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2013 » Ноябрь » 25 » Красивая рамка для блогов и сайтов
12:15
Красивая рамка для блогов и сайтов
И так снова здравствуйте!
В сегодняшней статье мы будем рассматривать то, как сделать красивую, декоративную рамку для изображений и текста в сообщениях блога,или же даже в статьях своего сайта, и тем самым придать его оформлению еще большей уникальности.
Сделать это на мой взгляд довольно таки просто, достаточно изготовить или выбрать подходящую картинку и добавить в нужное место 6 строк свойств CSS и ваша декоративная рамка готова. А вот как,какие свойства и куда, об этом мы сегодня и поговорим.
Всем давно известно, что за рамки вокруг блоков отвечает такое стилевое свойство как border - оно универсальное, и с помощью него можно указать как ширину так и цвет этой самой рамки. А вот чтобы сделать рамкой изображение существует такое стилевое свойство как border-image , вот им то мы сейчас и воспользуемся.
Для примера покажу как все это выглядит.
Браузер Internet Explorer,
всех версий, не поддерживает данную запись стиля
и не отображает её.
По-этому в универсальном свойстве border вы можете указать специально для него определенный цвет.
Долго мучатся не пришлось - выбрал картинку рамки и уменьшил в графическом редакторе, вы можете сделать сами уже сами такую какую захотите по качеству и дизайну.
А я использовал изображение, которое вы видите ниже слева:

Хотелось бы заметь,что это реальный размер используемого изображения, ни разрезать, ни делить его не нужно. При использовании в качестве рамки оно делится стилем на фрагменты автоматически (как показано на рисунке справа) ,при этом нужно только указать размеры фрагментов (в процентах или в пикселях), предварительно их вычислив и загрузив изображение на хостинг, для получения ссылки. В данном случае наш код будет выглядеть таким образом:
Код
border-style: solid;
border-width: 27px 27px 27px 99px;
-moz-border-image: url(ram.png) 27 27 27 99 repeat;
-webkit-border-image: url(ram.png) 27 27 27 99 repeat;
-o-border-image: url(ram.png) 27 27 27 99 repeat;
border-image: url(ram.png) 27 27 27 99 fill repeat;
Теперь разберем запись url("ram.png") 27 27 27 99 repeat; - url("ram.png") - это ссылка на изображение-(то которое вы загрузите на свой сайт,блог,у каждого она будет альтернативна,т.е указывать тот путь,куда изображение было предварительно загружено). - 27 27 27 99 - это размеры фрагментов, на которые будет резаться это изображение, записываются в таком порядке: вверх, право, низ, лево; - repeat - значение для фрагментов. Также есть значения round (не поддерживается в Safari и Chrome и заменяется на repeat) и stretch - оно обычно по умолчанию.
Ну а для того чтобы не заморачиваться с вычислениями,есть отличный онлайн сервис - border-image.com , которой и поможет разделить изображение, с просмотром готового результата, вам останется только взять готовый код, вставить ссылку на загруженную картинку и разместить его в нужном месте вашего шаблона.
На этом все уважаемые читатели.Эксперементируем...
Категория: CSS | Просмотров: 1036 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика