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

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот вам код:

Код:
<!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-файла результат один и тот же: чёрный кружок не заполняет центральную область!
Миниатюры
Нажмите на изображение для увеличения
Название: brdr_img_exmpl.jpg
Просмотров: 54
Размер:	32.6 Кб
ID:	94030  

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

Смотрите, вот код.
Код:
<!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
Репутация: 10
По умолчанию

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

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

Смогёте?
Миниатюры
Нажмите на изображение для увеличения
Название: P_20180830_114257.jpg
Просмотров: 73
Размер:	90.2 Кб
ID:	94033  
skotopsid вне форума  
Старый 30.08.2018, 16:10   #10
Javany
Форумчанин
 
Регистрация: 15.05.2018
Сообщений: 75
Репутация: 129
По умолчанию

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
От какого блока 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


08:25.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.