X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Border - картинка
Kolovrat_hb
Kolovrat_hb
Topic Starter сообщение 1.4.2012, 11:04; Ответить: Kolovrat_hb
Сообщение #1


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


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 блока-обертки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kolovrat_hb
Kolovrat_hb
Topic Starter сообщение 1.4.2012, 11:58; Ответить: Kolovrat_hb
Сообщение #3


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

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

но ведь картинки будут грузиться долго в таком случае. по сколько одна картинка на фоне должна быть чуть больше области которой нужна такая обводка, а за счет этого вес картинки будет больше и грузиться она будет медленней
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 1.4.2012, 12:36; Ответить: yury_mw
Сообщение #4


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

Kolovrat, вы в курсе, что фоновое изображение по-умолчанию повторяется по вертикали и горизонтали (или как укажете в стиле)?
Т.е. очень маленьким изображением можно заполнить сколь угодно большую область, в том числе и сколь угодно большую рамочку.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kolovrat_hb
Kolovrat_hb
Topic Starter сообщение 1.4.2012, 13:01; Ответить: Kolovrat_hb
Сообщение #5


это я знаю. но предположим я хочу сделать чтобы это было как пергамент. тоесть концы должны быть как будто оборваны. и как же мне одной картинкой заполнить так чтобы они нормально соединились. предположим 1 квадратик и он со всех сторон имеет нужную мне форму. только вот он начинает заполнять по горизонтали и получается что идет эта оборванная полоска вдруг обрывается начинает идти такая же по горизонтали потом еще одна такая же по горизонтали и дальше опять продолжается вертикальная. короче видно везде будет что это маленький квадратик повторяется
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 1.4.2012, 13:25; Ответить: yury_mw
Сообщение #6


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

Короче, дизайн и верстка всяких красивостей вроде рваных листков пергамента — это отдельная задачка, хоть и шаблонная.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Positive_Fun
Positive_Fun
сообщение 2.4.2012, 9:39; Ответить: Positive_Fun
Сообщение #7


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Картинка долго грузится на слайдере
0 belissimo_world 6195 7.12.2015, 10:32
автор: -belissimo_world-
Открытая тема (нет новых ответов) Ищу Копипастера 3р файл картинка+текст+кач файла и закач ко мне на хостинг
0 dimka1109 3187 21.1.2015, 20:13
автор: dimka1109
Открытая тема (нет новых ответов) 300 символов описание. Картинка и файл.
21 Seo-optimist 7472 28.10.2014, 17:59
автор: Seo-optimist
Открытая тема (нет новых ответов) Помогите сделать одинаковые отступы и убрать border у плеера YouTube в IE
0 INVADER 6166 8.9.2013, 12:26
автор: -INVADER-
Открытая тема (нет новых ответов) Нужна ваша помощ! При нажатии кнопки должна менятся картинка
1 Aljona 6314 31.7.2013, 14:37
автор: -Aljona-


 



RSS Текстовая версия Сейчас: 29.3.2024, 4:04
Дизайн