Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Закрытая тема
Ваша тема закрыта, почему это могло произойти? Возможно,
Нет наработок или кода, если нужно готовое решение - создайте тему в разделе Фриланс и оплатите работу.
Название темы включает слова - "Помогите", "Нужна помощь", "Срочно", "Пожалуйста".
Название темы слишком короткое или не отражает сути вашего вопроса.
Тема исчерпала себя, помните, один вопрос - одна тема
Прочитайте правила и заново правильно создайте тему.
 
Опции темы
Старый 27.08.2018, 15:40   #1
skotopsid
Пользователь
 
Регистрация: 26.08.2018
Сообщений: 15
По умолчанию border-image

Читаю книжку Вадима Дунаева "Основы Web-дизайна" (2-е издание).

На 75-76 страницах рассказывается про CSS-параметр border-image и приведены рисунки, демонстрирующие работу данного параметра. Скачал аналогичный png-файл с кружочками и решил протестировать данный параметр. Так вот у меня почему-то центральная область не заполняется. Пробовал минимум в трёх браузерах.
И вообще что-то про заполнение центральной области в других источниках (в основном интернет-сайты по веб-дизайну) ни слова...

Собственно, в чём подвох? М.б. автор вводит читателя в заблуждение?
skotopsid вне форума
Старый 28.08.2018, 10:03   #2
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Цитата:
Сообщение от skotopsid Посмотреть сообщение
Читаю книжку Вадима Дунаева "Основы Web-дизайна" (2-е издание).

На 75-76 страницах рассказывается про CSS-параметр border-image и приведены рисунки, демонстрирующие работу данного параметра. Скачал аналогичный png-файл с кружочками и решил протестировать данный параметр. Так вот у меня почему-то центральная область не заполняется. Пробовал минимум в трёх браузерах.
И вообще что-то про заполнение центральной области в других источниках (в основном интернет-сайты по веб-дизайну) ни слова...

Собственно, в чём подвох? М.б. автор вводит читателя в заблуждение?
Где код который Вы написали?
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума
Старый 28.08.2018, 10:16   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Javany Посмотреть сообщение
Где код который Вы написали?
На 75-76 странице книги Вадима Дунаева "Основы Web-дизайна" (2-е издание).
Alar, верни репу!
Naive вне форума
Старый 28.08.2018, 15:09   #4
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
Смех

Как интересно получается. Человек попробовал, у него не получилось и вместо того чтобы помочь разобраться с ошибками в его коде я должен найти эту книгу, скачать её, открыть нужные страницы, сделать как там написано и написать ему что у меня всё работает?
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума
Старый 29.08.2018, 09:09   #5
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Смотрите в песочнице. https://jsfiddle.net/qh81z70r/27/
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума
Старый 29.08.2018, 13:36   #6
skotopsid
Пользователь
 
Регистрация: 26.08.2018
Сообщений: 15
По умолчанию

Цитата:
Сообщение от Javany Посмотреть сообщение
Как интересно получается. Человек попробовал, у него не получилось и вместо того чтобы помочь разобраться с ошибками в его коде я должен найти эту книгу, скачать её, открыть нужные страницы, сделать как там написано и написать ему что у меня всё работает?
Кода как такового нет: 2-3 строчки. Ошибок там скорее всего нет: не думайте, что автор и я настолько тупы.
Вы могли бы, конечно, ответить мне и по-другому, типа: "юзай поиск".
Так обычно отвечают гуру 68-го уровня и выше. ))

Я, кстати, не увидел, что у Вас всё работает. Вместо этого Вы выводите какую-то глубокомысленную фразу ("Это центральная область которая у Вас не отображается)) Поскольку это PNG то центральноя область прозрачная." )

Текст и я могу вывести. Мне интересно, почему я не вижу заполнения центральной области центральным "кусочком" png-изображения.
Ваш ответ можно интерпретировать по-разному, например, как намёк на "попробуйте jpg - у Вас всё получится." Вечером дома проверю: сейчас некогда.
skotopsid вне форума
Старый 29.08.2018, 18:58   #7
skotopsid
Пользователь
 
Регистрация: 26.08.2018
Сообщений: 15
По умолчанию

Вот вам код:

Код:
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Border image</title>
  <style type="text/css"> 
  .div1
  { 
  width:150px;
  height:150px;
  border-width:30px;
  border-style:solid;
  border-image:url(circles.png) 33.3% round;
  }

  .div2
  { 
  width:150px;
  height:150px;
  border-width:30px;
  border-style:solid;
  border-image:url(circles.jpg) 33.3% round;
  }
  </style>
 </head>
 
 <body>
 <div class=div1> </div>
 <div class=div2> </div>
  <div>  <img src=circles.png>  </div>
 </body>
</html>
Пожалуйста, оформляйте Ваш код согласно правилам.

Результат (скриншот) во вложении.

Как видно, и в случае png-файла и в случае jpg-файла результат один и тот же: чёрный кружок не заполняет центральную область!
Изображения
Тип файла: jpg brdr_img_exmpl.jpg (32.6 Кб, 115 просмотров)

Последний раз редактировалось Вадим Мошев; 14.02.2019 в 16:00.
skotopsid вне форума
Старый 30.08.2018, 09:01   #8
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Смотрите, вот код.
Код:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style type="text/css">
div{
width: 400px;
height: 400px;
text-align: center;
border-style: solid;
border-width: 150px ;
-moz-border-image: url(http://baget-ramka.com.ua/files/news_tape/images/0/30/izgotovlenie-ramok-dlja-kartin_30_p0.jpg) 150 stretch;
-webkit-border-image: url(http://baget-ramka.com.ua/files/news_tape/images/0/30/izgotovlenie-ramok-dlja-kartin_30_p0.jpg) 150 stretch;
-o-border-image: url(http://baget-ramka.com.ua/files/news_tape/images/0/30/izgotovlenie-ramok-dlja-kartin_30_p0.jpg) 150 stretch;
border-image: url(http://baget-ramka.com.ua/files/news_tape/images/0/30/izgotovlenie-ramok-dlja-kartin_30_p0.jpg) 150  fill stretch;
}
	</style>

	<div>Это центральная область которая у Вас не отображается))</div>
</body>
</html>
вот ссылка ведущая в песочницу
https://jsfiddle.net/qh81z70r/59/

-moz-border-image:
-webkit-border-image:
-o-border-image:
кроссбраузерность.

stretch - растянуть
fill stretch - растянуть и заполнить
поменяйте в песочнице и посмотрите на результат.

Книга это конечно очень хорошо, но еще почитайте спецификацию, там более подробная информация.
Не задавай вопрос, если не знаешь что делать с ответом...

Последний раз редактировалось Javany; 30.08.2018 в 09:04.
Javany вне форума
Старый 30.08.2018, 12:55   #9
skotopsid
Пользователь
 
Регистрация: 26.08.2018
Сообщений: 15
По умолчанию

Цитата:
Сообщение от Javany Посмотреть сообщение

Книга это конечно очень хорошо, но еще почитайте спецификацию, там более подробная информация.
Вот какой результат мне нужен:

Смогёте?
Изображения
Тип файла: jpg P_20180830_114257.jpg (90.2 Кб, 139 просмотров)
skotopsid вне форума
Старый 30.08.2018, 16:10   #10
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Исходник изображения давайте.
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума
Закрытая тема

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
От какого блока border? kpripper HTML и CSS 3 14.06.2018 15:44
Mouse Without Border Jaloliddin Софт 5 20.12.2017 13:54
Убрать border у PageControl nibufep Общие вопросы Delphi 8 25.10.2015 20:36
CSS image border не работает Bub HTML и CSS 5 24.02.2012 08:44
Не работает border-width _PROGRAMM_ HTML и CSS 7 27.04.2010 14:56


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS