Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 927 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Как раз нет, всё что есть, в примере.

как раз есть, изучайте основы
https://developer.mozilla.org/ru/docs/Web/CSS/box-sizing
в первом случае есть border-box, то есть высота учитывает пэддинги и тому подобное, во втором - нет, поэтому учитывается только высота содержимого.

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 00:09 18-06-2020 | Исправлено: Mavrikii, 00:10 18-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
И всё же, не подскажете, почему в этом примере при мин.высоте 44px, высота гораздо больше? Где и что не так?

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 16:36 19-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Что в написанном выше вам непонятно?
Я же ясно написал, что по умолчанию высота применяется к содержимому и не учитывает паддинг и толщину бордюров. Но если box-sizing: border-box, как в первом случае, то высота учитывает все.

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 17:58 19-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Насколько я знаю, там в примере нет box-sizing.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 01:13 20-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Насколько я знаю, там в примере нет box-sizing

если вы считаете, что знаете и понимаете больше меня, то зачем спрашиваете?

Цитата:
html {
  box-sizing: border-box; }
 
*,
*::before,
*::after {
  box-sizing: inherit; }

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 01:17 20-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ! Почему-то не нашёл там этого, поэтому и написал так.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 01:44 20-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Спасибо за ответ! Почему-то не нашёл там этого, поэтому и написал так.

смотреть в браузере, в первую очередь, нужно закладку Computed (уж не знаю как на русском) стили - там будет показано какие стили применяются к элементу фактически, а не прописаны где то в файлах. это сразу дает понимание что применяется в данный момент и где определено.
https://developer.chrome.com/devtools/docs/elements-styles#computed_style

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 01:46 20-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Не знаю, в какой теме лучше спрашивать, CSS или JS. Подскажите, пожалуйста, просто теоретически, почему при использовании AOS, в Chrome, Firefox, Opera всё работает нормально, а в Safari нет, элементы (с анимацией) открываются в нём без анимации (или она работает гораздо раньше). Проверить, как это всё работает в IE, нет возможности.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 02:11 25-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
https://github.com/michalsnik/aos/issues?q=is%3Aissue+is%3Aopen+safari

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 02:18 25-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ссылку! Сделал, всё работает, правда, через поисковик нашёл решение.
 
Ещё просьба подсказать, как сделать, чтобы при применении этого кода, набирался сам текста, а не весь "облако/пузырёк"? Хоть какой класс использовать, именно для текста не работает. Что не так делаю для этого примера (пример ещё прежний, не обновил)?

Код:
p {
  animation: animated-text 2s steps(30,end) 1s 1 normal both;
}
 
/* text animation */
 
@keyframes animated-text{
  from{width: 0;}
  to{width: 100%;}
}

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 19:55 28-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
набирался сам текста, а не весь "облако/пузырёк"

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

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 22:18 28-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Хм, скорее всего что-то не так делал, но если для самого текста, то никак не получается, или нет анимации, или текста появляется ниже.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 22:53 28-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
я ничего сказать не могу не видя.
https://css-tricks.com/snippets/css/typewriter-effect/

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 22:57 28-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Например, во что именно вставлять текст, если оболочка такого вида?

Код:
<p class="in">Text</p>

 
Из примера по той ссылке я делал ранее.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 02:02 29-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
если оболочка такого вида?

да хотя бы в еще один div

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 02:16 29-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Так?

Код:
<p class="in"><div class="type">Text</div></p>

Тогда текст получается вне фонового "пузырька".

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 02:32 29-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Тогда текст получается вне фонового "пузырька".

я не хочу заниматься телепатией.

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 02:34 29-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Вот какая ерунда получается.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 02:45 29-06-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
на самом деле div внутри p нельзя, можно было бы обойтись вообще без p, заменив его на div с нужными паддингами и марджинами.
 
поэтому бразуер разбил на два p и div между ними.

Цитата:
<p></p><div></div><p></p>

 
ну или сделать span блочным, вместо дива (что не лучшее решение)

Цитата:
<p>
   <span style="display:block">test</span>
</p>

 
https://stackoverflow.com/questions/10763780/putting-div-inside-p-is-adding-an-extra-p

Всего записей: 9709 | Зарегистр. 20-09-2014 | Отправлено: 02:47 29-06-2020 | Исправлено: Mavrikii, 02:49 29-06-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ! Попробовал, всё равно не то, поэтому ну его нафиг, пусть будет просто статичный текст.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 03:02 29-06-2020
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru