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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 90 0 тем, 10 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 33 Вне конкурса за определение пользователя месяца

  • Фотография Developer
    #6

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Алексей111
    #8

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


Border - картинка

#1 Kolovrat

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

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

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

 

 

  • 0

#2 yury

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

Отправлено 01 April 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 April 2012 - 10:58

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

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

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

#4 yury

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

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

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

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

#5 Kolovrat

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

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

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

#6 yury

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

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

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

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

#7 Positive_Fun

Positive_Fun
  • Неактивные
  • 5 сообщений
  • Репутация: 0

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

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



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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