Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Border - картинка

#1 Kolovrat

Kolovrat
  • Заблокированные
  • 61 сообщений
  • Репутация: 0
0

Отправлено 01 Апрель 2012 - 10:04

Как то копался в юкозовском шаблоне каком то и наткнулся там на такую тему. У определенной области края были оформлены не с помощью стандартных функций ну типа такой - border: 5px groove red; , а с помощью картинок. Я тогда совсем не смыслил в языках разметки и не понял как это делается, сейчас попробовал таким образом - border-bottom-style: url(ссылка); border-bottom-width: 5px; , но ни че не получилось. Может кто знает как сделать картинку, подскажите пожалуйста

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Картинка в рамке
  2. Зазор между картинками при табличной верстке
  3. Repeat картинки фона по "y" в вертикальном сайт баре
  4. Кнопка на css из изображений
  5. Как вывести картинки на сайте в несколько колонок

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 01 Апрель 2012 - 10:32

Kolovrat,
стилевое свойство border не допускает использование каких-либо картинок для оформления границ блоков.
Оно лишь позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Стиль — это один из вариантов: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset. (никаких картинок)

Если хочется оформить границы блока с помощью изображений, то делается это по-разному, как правило, с помощью вложенных блоков-оберток, например, так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
.wrap{
   background: #ccf url(картинка.jpg);
   padding: 5px;
}
.blck{
   background: #fff;
   padding: 1em;
}
</style>
</head>
<body>
<div class="wrap"><div class="blck">
   Каждый охотник желает знать, где сидит фазан.
</div></div>
</body>
</html>
Чем больше изображений, тем больше блоков-оберток. Т.е. например, если хочется использовать 4 изображения (по одному на каждую из сторон блока), то потребуется 4 блока-обертки.
  • 1

#3 Kolovrat

Kolovrat
    Topic Starter
  • Заблокированные
  • 61 сообщений
  • Репутация: 0

Отправлено 01 Апрель 2012 - 10:58

а ну с этим примерно понял спс)) пока ждал ответа нашел статью про новую функцию border-image. написано что работает не во всех браузерах. да и настраивать не очень удобно, но за то с оптимизацией проблем нету, всего пару строк и все нормально. но там реально запутаная херь, надо указывать какая область картинки должна использоваться и т.д., до сих пор не могу понять, но это меня больше впечатлило

хотя не) ваш вариант мне тоже нравится))) сначала я плохо понял как это работает а теперь дошло)) и настраивать не долго и работать будет в любом браузере

но ведь картинки будут грузиться долго в таком случае. по сколько одна картинка на фоне должна быть чуть больше области которой нужна такая обводка, а за счет этого вес картинки будет больше и грузиться она будет медленней
  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 01 Апрель 2012 - 11:36

но ведь картинки будут грузиться долго в таком случае. по сколько одна картинка на фоне должна быть чуть больше области которой нужна такая обводка, а за счет этого вес картинки будет больше и грузиться она будет медленней

Kolovrat, вы в курсе, что фоновое изображение по-умолчанию повторяется по вертикали и горизонтали (или как укажете в стиле)?
Т.е. очень маленьким изображением можно заполнить сколь угодно большую область, в том числе и сколь угодно большую рамочку.
  • 1

#5 Kolovrat

Kolovrat
    Topic Starter
  • Заблокированные
  • 61 сообщений
  • Репутация: 0

Отправлено 01 Апрель 2012 - 12:01

это я знаю. но предположим я хочу сделать чтобы это было как пергамент. тоесть концы должны быть как будто оборваны. и как же мне одной картинкой заполнить так чтобы они нормально соединились. предположим 1 квадратик и он со всех сторон имеет нужную мне форму. только вот он начинает заполнять по горизонтали и получается что идет эта оборванная полоска вдруг обрывается начинает идти такая же по горизонтали потом еще одна такая же по горизонтали и дальше опять продолжается вертикальная. короче видно везде будет что это маленький квадратик повторяется
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 01 Апрель 2012 - 12:25

Многое зависит от фоновой картинки и от размера блока.
Чтобы не бросалось в глаза, что "это маленький квадратик повторяется" дизайнеру и верстальщику важно уметь выделить повторяющийся фрагмент фонового изображения для тайлинга (если он есть, а если нет, то придется ограничиться действительно одним большим изображением).
См пример картинки из соседней темы:
Поэтому возможны варианты.
Например
* если у фоновой картинки каждый из четырех краев особенный, то фоновых картинок (и соответственно блоков-оберток) будет 4
* так же придется позаботиться, чтобы стороны вашего пергамента гладко сшивались в углах и возможно потребуются еще 4 блока для изображений углов

Короче, дизайн и верстка всяких красивостей вроде рваных листков пергамента — это отдельная задачка, хоть и шаблонная.
  • 1

#7 Positive_Fun

Positive_Fun
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 02 Апрель 2012 - 08:39

простым языком тебе надо картинку подогнать и размер блока =)) а лучше переходить на ccs3 и html5 так как прогрес не стоит на месте)))))
  • 0


Оформление форума – IPBSkins.ru