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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

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

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
 

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

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

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

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

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

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



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

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

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

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



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

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

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

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

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

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

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



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

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

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

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

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

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



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

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

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

Всего записей: 15040 | Зарегистр. 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%;}
}

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

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

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

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

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



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

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

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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



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

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

Platinum 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

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



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

Всего записей: 3346 | Зарегистр. 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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

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


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

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru