Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

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

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

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

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

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

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

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

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

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

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

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

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

Текст и я могу вывести. Мне интересно, почему я не вижу заполнения центральной области центральным "кусочком" png-изображения.
Ваш ответ можно интерпретировать по-разному, например, как намёк на "попробуйте jpg - у Вас всё получится." Вечером дома проверю: сейчас некогда.
skotopsid вне форума
Старый 29.08.2018, 17: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 в 15:00.
skotopsid вне форума
Старый 30.08.2018, 08: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 в 08:04.
Javany вне форума
Старый 30.08.2018, 11:55   #9
skotopsid
Пользователь
 
Регистрация: 26.08.2018
Сообщений: 15
По умолчанию

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

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

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

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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