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

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

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


Закрытая тема
Ваша тема закрыта, почему это могло произойти? Возможно,
Название темы включает слова - "Помогите", "Спасите", "Срочно"
Название темы не отражает сути вашего вопроса.
Тема исчерпала себя, помните, один вопрос - одна тема
Прочитайте >>>правила <<< и заново правильно создайте тему.
 
Опции темы
Старый 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,694
Репутация: 2127
По умолчанию

Цитата:
Сообщение от 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-файла результат один и тот же: чёрный кружок не заполняет центральную область!
Изображения
Тип файла: jpg brdr_img_exmpl.jpg (32.6 Кб, 2 просмотров)
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 Посмотреть сообщение

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

Смогёте?
Изображения
Тип файла: jpg P_20180830_114257.jpg (90.2 Кб, 0 просмотров)
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


22:22.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru